Reputation: 751

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

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

Upvotes: 75

Answers (15)

shahzadali

Reputation: 1

Create React App(react-scripts) abstracts away the webpack configuration. So, those using react-scripts to manage their application can use craco(Create React App Configuration Override).

Install craco npm install @craco/craco
Add a configuration file at the root of the project touch craco.config.js
Add the required polyfill in the craco.config.js file

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

Install the relevant node package npm install util
Update the scripts section in the pacakge.json file to use craco like:

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
  }
}

Upvotes: 0

Rupesh Shingavi

Reputation: 41

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

Upvotes: 0

Dilip H

Reputation: 156

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.

Upvotes: 1

Radim Šafrán

Reputation: 608

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

Upvotes: 0

Alireza Abdollahnejad

Reputation: 1047

We need just to run

npm audit fix --force

to address all issues.

Upvotes: -4

Willy K.

Reputation: 432

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

Upvotes: 0

Nsamba Isaac

Reputation: 495

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

Upvotes: 0

luigicut

Reputation: 31

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

Upvotes: 3

Elliptica

Reputation: 4332

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.

Upvotes: 29

Gowtham Gowda

Reputation: 2036

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

Upvotes: 3

max zanT

Reputation: 11

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.

Upvotes: 1

Snehendu Roy

Reputation: 108

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

Upvotes: -1

SimoneMSR

Reputation: 486

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

Upvotes: 9

Th3Cod3

Reputation: 990

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

Upvotes: 83

Alexandre Pereira Nunes

Reputation: 1088

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

Upvotes: 26

Module not found: Error: Can&#39;t resolve &#39;util&#39; in webpack

Answers (15)

Related Questions

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