Babelify 7 and JSX error

babelify7.md

Babelify 7 and JSX error

First Babelify is not Babel and their version numbers doesn't match. This confuses me a lot at first.

If you run into a similar error as I did next. Try these steps to fix it.

1st, you need install

npm install --save-dev babel-preset-es2015 babel-preset-react

2nd, you need to modify package.json as

"browserify": {
    "transform": [
      ["babelify",  {"presets": ["es2015", "react"]}]
    ]
  }

babel/babelify#131

As of v7.0.0, babelify uses babel 6.0.0, which fundamentally changed the API. babel – and thus babelify – now explicitly require you state the transforms you'd like to run via "presets" or "plugins". See https://babeljs.io/blog/2015/10/29/6.0.0/ and https://github.com/babel/babelify#options.

A similiar issue appears when using babel-jest which is a known issue that is not fixed yet. The only way is to roll back to babel-jest 5.2.1

npm install [email protected] --save-dev

C:\Users\ethan.deng\Desktop\Source\Sharepoint\React-Jest>browserify -d js/App.js > build/bundle.js
Error: Parsing file C:\Users\ethan.deng\Desktop\Source\Sharepoint\React-Jest\js\App.js: Unexpected token (5:2)
    at Deps.parseDeps (C:\Users\ethan.deng\AppData\Roaming\npm\node_modules\browserify\node_modules\module-deps\index.js:437:28)
    at fromSource (C:\Users\ethan.deng\AppData\Roaming\npm\node_modules\browserify\node_modules\module-deps\index.js:376:44)
    at C:\Users\ethan.deng\AppData\Roaming\npm\node_modules\browserify\node_modules\module-deps\index.js:370:17
    at ConcatStream.<anonymous> (C:\Users\ethan.deng\AppData\Roaming\npm\node_modules\browserify\node_modules\concat-stream\index.js:36:43)
    at ConcatStream.emit (events.js:129:20)
    at finishMaybe (C:\Users\ethan.deng\AppData\Roaming\npm\node_modules\browserify\node_modules\concat-stream\node_modules\readable-stream\lib\_stream_writable
.js:460:14)
    at endWritable (C:\Users\ethan.deng\AppData\Roaming\npm\node_modules\browserify\node_modules\concat-stream\node_modules\readable-stream\lib\_stream_writable
.js:469:3)
    at ConcatStream.Writable.end (C:\Users\ethan.deng\AppData\Roaming\npm\node_modules\browserify\node_modules\concat-stream\node_modules\readable-stream\lib\_s
tream_writable.js:436:5)
    at DuplexWrapper.onend (C:\Users\ethan.deng\AppData\Roaming\npm\node_modules\browserify\node_modules\duplexer2\node_modules\readable-stream\lib\_stream_read
able.js:537:10)
    at DuplexWrapper.g (events.js:199:16)

C:\Users\ethan.deng\Desktop\Source\Sharepoint\React-Jest>browserify -d js/App.js > build/bundle.js
Error: Couldn't find preset "es2015" while parsing file: C:\Users\ethan.deng\Desktop\Source\Sharepoint\React-Jest\js\App.js
    at OptionManager.mergePresets (C:\Users\ethan.deng\Desktop\Source\Sharepoint\React-Jest\node_modules\babelify\node_modules\babel-core\lib\transformation\fil
e\options\option-manager.js:329:17)
    at OptionManager.mergeOptions (C:\Users\ethan.deng\Desktop\Source\Sharepoint\React-Jest\node_modules\babelify\node_modules\babel-core\lib\transformation\fil
e\options\option-manager.js:289:12)
    at OptionManager.init (C:\Users\ethan.deng\Desktop\Source\Sharepoint\React-Jest\node_modules\babelify\node_modules\babel-core\lib\transformation\file\option
s\option-manager.js:414:10)
    at File.initOptions (C:\Users\ethan.deng\Desktop\Source\Sharepoint\React-Jest\node_modules\babelify\node_modules\babel-core\lib\transformation\file\index.js
:191:75)
    at new File (C:\Users\ethan.deng\Desktop\Source\Sharepoint\React-Jest\node_modules\babelify\node_modules\babel-core\lib\transformation\file\index.js:122:22)

    at Pipeline.transform (C:\Users\ethan.deng\Desktop\Source\Sharepoint\React-Jest\node_modules\babelify\node_modules\babel-core\lib\transformation\pipeline.js
:42:16)
    at Babelify._flush (C:\Users\ethan.deng\Desktop\Source\Sharepoint\React-Jest\node_modules\babelify\index.js:28:24)
    at Babelify.<anonymous> (_stream_transform.js:130:12)
    at Babelify.g (events.js:199:16)
    at Babelify.emit (events.js:104:17)