Module not found: Error: Can't resolve 'util' in webpack

Viewed 79885

when i run the script it show me this errors Here is error:

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: { "util": require.resolve("util/") }', install 'util'; If you don't want to include a polyfill, you can use an empty module like this:resolve.fallback: { "util": false } @ ./node_modules/webpack/lib/index.js 74:30-50 77:9-29 @ ./src/googlesheets.js 21:16-34 @ ./src/index.js 1:0-44 2:0-10

10 Answers

The main problem is with Webpack 5. It doesn't preload the polyfill of Node.js. I see that this issue can help you. https://github.com/webpack/webpack/issues/11282

To solve it: npm install util, and add it into webpack.config.js:

module.exports = {
  // ...
  resolve: {
      fallback: {
        util: require.resolve("util/")
      }
  }
  // ...
};

If your code is multi-target (node & browser), follow the other answers. If your code will only run on nodejs, this suffices:

    module.exports = {
     target: "node", // Or "async-node"
     mode: "production" /* or "development", or "none" */
     /* ... */
    }

If you do not have util, and do not even use webpack.config.ts

  1. npm install util
  2. make the following changes to your tsconfig.json
    "angularCompilerOptions": {
         "types" : ["node"]
    }

For me, it was enough to do yarn add util (alternatively, npm install util). I didn't have to add it to any other files.

After some struggling and searching around, I have found a solution for Vue3 app (I was trying to run jsonwebtoken on frontend):

  1. install node-polyfill-webpack-plugin
  2. in vue.config.js file (create one if you don't have it) add:
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = {
  chainWebpack: (config) => {
    config.plugin("polyfills").use(NodePolyfillPlugin);
  },
};

credits here

Last comment was very helpful, after that I've added: enter image description here

after modifying resolve, install with npm all of those packages one by one.

For angular apps, do npm install util and go to polyfills.ts. Add import 'util/util.js'; at last under APPLICATION IMPORTS

with ioni Cli 6 and ionic Framwork 6.0.16 i managed to solve it by going to ionic nodemodule folder :

/Users/Projects/my_APP/node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js

inside this block of code

function getBrowserConfig(wco) {
 return {
        devtool: false,
        resolve: {
            mainFields: ['es2015', 'browser', 'module', 'main'],
            fallback: {  //added this line
                dgram: false,  //added this line
                fs: false,  //added this line
                net: false,  //added this line
                tls: false,  //added this line
                util: false,  //added this line
                https: false,   //added this line
                crypto: false,   //added this line
                assert: false,   //added this line
                stream: false,   //added this line
                http: false,   //added this line
                zlib : false,   //added this line
                path: false   //added this line

              }    //added this line
           
        },
  
        node: false,
      
    };
}

I jsut runt into this while trying to use jsonwebtoken for verifying a JWT in my Angular app. After trying some of the suggestions above without success I gave up in used the jose package instead (as suggested in this post; it refers to a list of libraries at JWT.io).

My problem was fixed when I did this:

  1. Go to the node_modules folder
  2. Search for the react-scripts folder
  3. Inside config folder, you will see webpack.config.js file.
  4. Under the resolve part in ine number 303, add this
resolve: {
  fallback: {
    util: require.resolve("util/")
  },
// ...
}
Related