CODEWITHSUNDEEP
javascriptreactjsnpmbabeljsnpm-scripts
Dónal
Dónal

Reputation: 187399

SyntaxError when NPM script is executed

I'm trying to update the dependencies of a React app. This app includes a script defined in package.json which generates a message bundle for each locale.

"scripts": {
  "build:langs": "NODE_ENV=production babel-node scripts/mergeMessages.js"
}

The details of the script are unimportant, but it's very similar to this one, which is described in a react-intl tutorial.

Before upgrading the dependencies, the script worked, but now when I execute npm run build:langs on the command-line, I get this error:

/applications/my-app/scripts/mergeMessages.js:1
import _objectSpread from "/applications/my-app/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectSpread";
       ^^^^^^^^^^^^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:703:23)
    at Module._compile (/applications/my-app/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:770:10)
    at Object.newLoader [as .js] (/applications/my-app/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at Function.Module._load (internal/modules/cjs/loader.js:555:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:824:10)
    at Object.<anonymous> (/applications/my-app/node_modules/@babel/node/lib/_babel-node.js:234:23)
    at Module._compile (internal/modules/cjs/loader.js:759:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)

I guess the babel dependencies are the most relevant. Before the upgrade these were:

"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-loader": "7.1.2",
"babel-plugin-react-intl": "2.4.0",
"babel-preset-react-app": "3.1.2",
"babel-cli": "6.26.0",

Following the upgrade, the babel dependencies are:

"@babel/core": "7.4.4",
"@babel/polyfill": "7.4.4",
"@babel/register": "7.4.4",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.5",
"babel-plugin-named-asset-import": "^0.3.2",
"babel-preset-react-app": "^8.0.0",
"babel-plugin-react-intl": "2.4.0",
"@babel/cli": "~7.4.4",
"@babel/node": "7.2.2",

Update

I don't have either a .babelrc or babel.config.js config file, just the following in package.json

"babel": {
  "presets": [
    "react-app"
  ]
}

Upvotes: 0

Views: 309

Answers (2)

Avanthika
Avanthika

Reputation: 4182

If you are using babel-7, you need to have the following:

Try using @babel/preset-react instead of babel-preset-react-app.

"@babel/core": "^7.4.4",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",

and babel-config in package.json should be:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

Upvotes: 1

Joe Clay
Joe Clay

Reputation: 35837

From the Babel 7 migration guide:

The babel-node command in Babel 6 was part of the babel-cli package. In Babel 7, this command has been split out into its own @babel/node package, so if you are using that command, you'll want to add this new dependency.

Upvotes: 1

Related Questions