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

Yevette

I have the same problem. Please look at here, https://mcmap.net/q/190011/-importing-library-in-react-code-throws-compilation-error – Giddings

Answer 1

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

Peterec

@Th3Cod3- sir but in angular webpack.config.js dosent exist..tell me any another file for angular? – Swore

@KapilSoni the default Angular builder does not allow modification of the webpack config. You need to use a different builder like npmjs.com/package/@angular-builders/custom-webpack – Galanti

@SteveSanders this is not great advice sadly. Ejecting the entire Angular build system just to fix a dependency is insane. – Kempe

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. – Fourdrinier

Answer 2

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.

Dania

Same for me. I'm using create react app with typescript and deploying to Cloudflare so no webpack or anything else going on – Grooms

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. – Paladin

The purpose with fallback module is that it will only use your installed util package in fallback condition. Meaning in case util is not provided in the runtime environment. – Visceral

Answer 3

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

Inger

Answer 4

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"]
    }

Islaen

Answer 5

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

Umbelliferous

Answer 6

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

Phenoxide

Answer 7

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.

Tigre

Answer 8

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.

Whencesoever

Answer 9

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

Pickaback

Answer 10

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

Rancidity

Answer 11

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

Dagostino

Answer 12

This issue is solved by running below command in my case: npm install util --force

Somite

Answer 13

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

Femmine

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

Answer 14

We need just to run

npm audit fix --force

to address all issues.

Parbuckle

Is this comment malicious sarcasm? Doing this on a large project is extremely likely to break something. Hopefully something obvious, but not necessarily. – Eldwen