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

Question

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

I have the same problem. Please look at here, https://stackoverflow.com/a/72858182/621951 — Günay Gültekin, Jul 04 '22 at 14:18

score 69 · Answer 1 · edited Jan 03 '21 at 06:41

69

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/")
      }
  }
  // ...
};

edited Jan 03 '21 at 06:41

Daniel Geyfman

246
1
10

answered Oct 28 '20 at 20:29

Th3Cod3

851
6
7

2

@Th3Cod3- sir but in angular webpack.config.js dosent exist..tell me any another file for angular? – Kapil Soni Oct 11 '21 at 06:28
2

@KapilSoni the default Angular builder does not allow modification of the webpack config. You need to use a different builder like https://www.npmjs.com/package/@angular-builders/custom-webpack – Steve Sanders Oct 14 '21 at 16:54
1

@SteveSanders this is not great advice sadly. Ejecting the entire Angular build system just to fix a dependency is insane. – Askdesigners May 23 '22 at 07:49
I don't understand why `webpack.config.js` is set up with CommonJS (`require`) modules. Isn't WebPack supposed to emit ES modules? This looks like a good answer if it were an ES module. – Thomas David Kehoe Nov 14 '22 at 22:30

score 27 · Answer 2 · answered Mar 11 '22 at 04:29

27

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.

answered Mar 11 '22 at 04:29

Elliptica

3,928
3
37
68

Same for me. I'm using create react app with typescript and deploying to Cloudflare so no webpack or anything else going on – Kerkness Apr 29 '22 at 14:31
1

I ran into this error while attempting to install Storybook into an NextJS app. Just running `yarn add util` cleared up the error for me. – Isaac Tait May 28 '22 at 01:54

score 24 · Answer 3 · answered Jan 02 '21 at 17:04

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" */
     /* ... */
    }

score 9 · Answer 4 · answered Nov 09 '21 at 17:19

9

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

npm install util
make the following changes to your tsconfig.json

    "angularCompilerOptions": {
         "types" : ["node"]
    }

answered Nov 09 '21 at 17:19

SimoneMSR

368
1
6
16

luigicut · Answer 5 · 2022-04-09T16:56:33.623

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

install node-polyfill-webpack-plugin
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

score 1 · Answer 6 · answered Feb 09 '22 at 19:45

1

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.

answered Feb 09 '22 at 19:45

max zanT

11
1

score 1 · Answer 7 · answered Feb 24 '22 at 05:04

1

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

answered Feb 24 '22 at 05:04

Gowtham Gowda

1,780
1
10
7

score 1 · Answer 8 · answered Jan 14 '23 at 15:46

I installed the util package using the below command on the terminal:

npm i util --force

I Had to use --force above as there were some version dependency issues.

Then i created the web.config.js in the main directory of the react app and added the below code in it:

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

This resolved the util webpack issue for me.

score 0 · Answer 9 · answered Apr 12 '22 at 13:44

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,
      
    };
}

score 0 · Answer 10 · answered May 26 '22 at 10:57

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).

score 0 · Answer 11 · answered Nov 15 '22 at 09:57

Adding providers fixed this error in my case.

@Component({
    selector: "basic-data",
    templateUrl: "./basic-data.component.html",
    styleUrls: ["./basic-data.component.scss"],
    providers: [BasicDataStore], <-- Fixed the error
})
export class BasicDataComponent {
    constructor(
        private readonly basicDataStore: BasicDataStore,
    ) {}
}

(...Installing utils etc. didn't help.)

score -1 · Answer 12 · answered Jan 09 '22 at 06:37

-1

My problem was fixed when I did this:

Go to the node_modules folder
Search for the react-scripts folder
Inside config folder, you will see webpack.config.js file.
Under the resolve part in ine number 303, add this

resolve: {
  fallback: {
    util: require.resolve("util/")
  },
// ...
}

answered Jan 09 '22 at 06:37

Snehendu Roy

68
3

2

I believe content of "node_modules" should not be manually modified as it will change on a package update and will not be working for other people You could cooperate with (after they do `npm install` they will not have this change). – kcpr Feb 02 '23 at 16:21

score -2 · Answer 13 · answered Oct 02 '22 at 04:55

-2

We need just to run

npm audit fix --force

to address all issues.

answered Oct 02 '22 at 04:55

Alireza Abdollahnejad

921
8
9

Is this comment malicious sarcasm? Doing this on a large project is extremely likely to break something. Hopefully something obvious, but not necessarily. – ggranum Nov 11 '22 at 10:38

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

13 Answers13

Linked