Babel useBuiltIns: 'usage', failing with core-js 3

Question

I have recently started working with Webpack, and I am encountering an error with a build related to my Babel and Core js (v3) settings.

The error I am getting is the following: Module not found: Error: Can't resolve 'core-js/modules/es.string.replace' in 'C:\path\' @ file.jsx

This is on a React project, and the function I am trying to use is on one of my jsx components.

My package.json looks like this:

    "devDependencies": {
        "@babel/cli": "^7.8.4",
        "@babel/core": "^7.9.6",
        "@babel/plugin-proposal-class-properties": "^7.8.3",
        "@babel/preset-env": "^7.9.6",
        "@babel/preset-react": "^7.9.4",
        "@babel/preset-typescript": "^7.9.0",
        "@babel/runtime-corejs3": "^7.10.1",
        "autoprefixer": "^9.8.0",
        "babel-loader": "^8.1.0",
        "core-js": "^3.6.5",
        "css-loader": "^3.5.3",
        "cssnano": "^4.1.10",
        "less-loader": "^6.1.0",
        "mini-css-extract-plugin": "^0.9.0",
        "node-sass": "^4.14.1",
        "optimize-css-assets-webpack-plugin": "^5.0.3",
        "postcss-loader": "^3.0.0",
        "resolve-url-loader": "^3.1.1",
        "sass-loader": "^8.0.2",
        "terser-webpack-plugin": "^3.0.1",
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.11",
        "webpack-manifest-plugin": "^2.2.0",
        "webpack-merge": "^4.2.2"
    },
    "dependencies": {
        "@babel/polyfill": "^7.8.7",
        "clean-webpack-plugin": "^3.0.0",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "regenerator-runtime": "^0.13.5"
    }

And my babel settings looks like this:

    test: /(\.jsx|\.js|\.ts|\.tsx)$/,
        exclude: /(node_modules)/,
        use: {
            loader: 'babel-loader',
            options: {
                cacheDirectory: true,
                sourceType: 'unambiguous',
                presets: [
                    [
                        '@babel/preset-env', {
                            modules: false,
                            corejs:  {
                                version: 3.6,
                                proposals: true
                            },
                            useBuiltIns: 'usage',
                            targets: {
                                browsers: browserList,
                            },
                        }
                    ],
                    '@babel/preset-typescript',
                    '@babel/preset-react'
                ],
                plugins: [
                    '@babel/plugin-proposal-class-properties'
                ],
            },
        },

In my searches, I have encountered a large number of people suffering a similar problem, but I have not yet been able to find a solution to the problem.

score 2 · Answer 1 · answered Jun 01 '20 at 09:54

After a couple of days of searching for an answer to this problem, I finally stumbled upon an answer on this Stack overflow post: https://stackoverflow.com/a/61446111/1820888 - this was my exact problem. To paraphrase the answer here for anybody who encounters this problem:

My file structure was incredibly complex - and the script files that were being transpiled were well outside the remit of my bundle set up.

Adding the following setting resolved the error - it explicitly defines where the node_modules package sits on your project, so it does not matter where in your file structure your files sit, they will be able to interpret the node_modules:

module.exports = {  
    resolve: {
      modules: [
        path.resolve(__dirname, "node_modules")
      ],
  ...

Babel useBuiltIns: 'usage', failing with core-js 3

1 Answers1