Invalid Option: corejs is not a valid top-level option

Question

I built react project with webpack and babel.

It worked well.

But, today I got some error below.

ERROR in ./index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /home/rpf5573/react-discovery-v2/src/admin/admin-client/index.js: Invalid Option: corejs is not a valid top-level option.
        Maybe you meant to use 'targets'? (While processing: "/home/rpf5573/react-discovery-v2/src/admin/admin-client/node_modules/@babel/preset-env/lib/index.js")
    at validateTopLevelOptions (/home/rpf5573/react-discovery-v2/src/admin/admin-client/node_modules/@babel/preset-env/lib/normalize-options.js:49:13)
    at normalizeOptions (/home/rpf5573/react-discovery-v2/src/admin/admin-client/node_modules/@babel/preset-env/lib/normalize-options.js:160:3)
    at _default (/home/rpf5573/react-discovery-v2/src/admin/admin-client/node_modules/@babel/preset-env/lib/index.js:168:37)
  ....
error Command failed with exit code 2.

And this is my admin-client/.babelrc

module.exports = {
  compact: true,
  presets: [
    [
      "@babel/preset-env",
      {
        modules: false,
        targets: {
          browsers: ["since 2015"]
        },
        useBuiltIns: "usage",
        corejs: "2"
      }
    ],
    "@babel/preset-react"
  ],
  plugins: [
    "@babel/plugin-proposal-class-properties"
  ]
}

What did I wrong ?

What should I do ?

Answer 1

Maybe you had some major version change recently?

In my case, that was the cause. And the solution was:

• Completely remove node-modules folder from the project

• Remove package-lock.json file from the project root folder

• Perform a npm i to recreate everything

Answer 2

As an alternative to entirely deleting node-modules as suggested by @SysDragon. I looked deeper into why the complaint was specific to corejs. And i found a great remedy here.

In summary, these were the steps taken:

• Install the latest version of core-js (or atleast version-3). Whatever you are building "might" be making use of latest JavaScript functionality. For my case, i was working with react-16.9.0 and mdbreact-4.19.0.

Note: Core-js is a Modular standard library for JavaScript. Includes polyfills for ECMAScript up to 2019: promises, symbols, collections, iterators, typed arrays and many other features.

• Then, you need to update your transpiler, babel and it's "relatives". This block snippet helped accomplish that: yarn upgrade @babel/core @babel/plugin-transform-runtime @babel/polyfill @babel/preset-env @babel/runtime babel-loader --dev.

The --dev part is just to save them as devDependencies (if using yarn) (for npm, use --save-dev), which i advocate for especially if this is team project.

Answer 3

In my case, the subdirectory I was working on was part of a larger Yarn workspace in the root of the repository and removing that subdirectory from the workspace and reinstalling node_modules within the subdirectory fixed the issue.

This issue is most likely caused by dependency mismatches.