Syntax in crac-webpack-rewired to solve webpack polyfills error-CodePudding

I created my project in React using create-react-app, but after sometime I got to this error in the console

BREAKING CHANGE: webpack \< 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
\- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
\- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
@ ./node_modules/loader-utils/lib/index.js 7:25-54
@ ./node_modules/file-loader/dist/index.js 11:19-42
@ ./node_modules/file-loader/dist/cjs.js 3:15-33
@ ./src/App.js 13:0-35
@ ./src/index.js 7:0-24 11:33-36

After reading this post, I reached the conclusion I had to modify the webpack.config.js that I did not have because I created the project with create-react-app. Instead of ejecting (it is not very recommended), I used the npm package advised at the end of this thread. The problem is that there are no examples on how to use it. My question is which syntaxis do I have to follow to modify config/webpack.extend.js? This is the code at the moment:

module.exports = {
    dev: (config) => {
        //override webpack configuration
        config.externals =[..];
        return config;
    },
    prod: (config) => {
        //override webpack configuration
        config.externals =[..];
        return config;
    }
};

I have tried using console.log(config) but it never gets to print as errors are printed back.

CodePudding user response：

You cannot use console.log() because that code is not executed from the browser, but in the Webpack "compilation" phase.

This could be a possible solution for your case.

module.exports = {
    dev: (config) => {
      //override webpack configuration
      config.resolve.fallback = {"path": require.resolve("path-browserify")};
      return config;
    },
    prod: (config) => {
      //override webpack configuration
      config.resolve.fallback = {"path": require.resolve("path-browserify")};       
      return config;
    }
}

Notice that you have to install the package path-browserfy.

You can also set the path property to false.