Babel problem [SOLVED]: `npm run build` -> Error: Failed to parse package.json data. babelify error [SOLUTION]

Frontend Web Development: The Big Nerd Ranch Guide Chapter 17: Using ES6 with Babel
1

Running npm run build on newly installed modules brings Error :

npm ERR! code EJSONPARSE …
npm ERR! Failed to parse package.json data.

The error is related to babelify:
The problem is that new version of babelify is changed and that requires to change package.json to reflect that:

Solution for changing package.json I found here:
https://github.com/babel/babelify
and regarding babel-preset-env also here:
https://github.com/babel/babel-preset-env/issues/186

and changed the corresponding "browserify" section in package.json
from:

  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "sourceMap": true
        }
      ]
    ]
  },

to:

   "browserify": {
     "debug": true,
     "transform": [
       [ "babelify", { "presets": ["babel-preset-env" ] } ]
       ]
    }

"debug": true here is to replace sourceMap option.

After that npm run build brings error:

Error: Cannot find module ‘@babel/core’
babelify@10 requires Babel 7.x (the package ‘@babel/core’). If you’d like to use Babel 6.x (‘babel-core’), you should install ‘babelify@8’.

which was corrected by installing 8th version of babelify and dependency:

npm install babelify@^8 babel-preset-env

/* Actually I install all packages globally to save space on disk:
npm install -g babelify@^8 babel-preset-env
npm link babelify babel-preset-env
*/

That’s it! npm run build now works without error messages and generates dist/main.js with sourceMap.

—
Another possible options would be to change to version 10 of babelify babelify@10 and related {presets: ["@babel/preset-env"]
– But I didn’t tested this yet:

   "browserify": {
     "debug": true,
     "transform": [
       [ "babelify", { "presets": ["@babel/preset-env" ] } ]
       ]
    }
2 Likes