webpack scrypt.js: Critical dependency: the request of a dependency is an expression

[dankins]

Description

Building on v.1.2.1 using create-react-app fails due to webpack warning /node_modules/web3-eth-accounts/src/scrypt.js Critical dependency: the request of a dependency is an expression" when CI=true (ie, fail on warnings)

Expected behavior

Building a create-react-app using webpack should succeed

Actual behavior

I am able to build everything locally, however the build fails in my CI environment. The warning is as follows:

/node_modules/web3-eth-accounts/src/scrypt.js
Critical dependency: the request of a dependency is an expression

I assume it is a result of this line:
https://github.com/ethereum/web3.js/blob/1.x/packages/web3-eth-accounts/src/scrypt.js#L17

Steps to reproduce the behavior

Error Logs

Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

/home/circleci/project/node_modules/web3-eth-accounts/src/scrypt.js
Critical dependency: the request of a dependency is an expression


info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run build stderr:
error Command failed with exit code 1.

Gists

Versions

• web3.js: v1.2.1
• nodejs: v10.16.0
• browser: circleci
• ethereum node:

[nivida]

Thanks for opening this issue! We will fix and release it asap.
The current workaround for you would be to suppress the webpack warning.

[Matelasse]

@nivida This is getting obnoxious and upvotes are increasing in number. How can we help to resolve this?

[michaelsbradleyjr]

@Matelasse I'm working on a PR, at the request of @nivida, hopefully will have it up for review by tomorrow, I've just been pretty pressed for time this week.

See: #2938 (comment).

The webpack warning is just a warning, and it should be possible in your build pipeline or whatever to ignore it instead of failing (i.e. if you're experiencing a build failure — maybe check it's just a warning for you and not an actual failure).

My apologies for any frustration this has caused.

[michaelsbradleyjr]

It’s currently a WIP, will be continuing today.

[wickstjo]

Could someone please clarify how to actually fix the warning?

[talaikis]

Could someone please clarify how to actually fix the warning?

Setting CI=false inside create-react-app .env, allows to build it.

[jjhesk]

got the same problem here

[ishristov]

Is there a new status with the error?

[ernestognw]

I'm using rescripts to allow modifications on the CRA webpack config, so I removed the exprContextCritical rule to avoid the warning for now. I know it's not the best solution so far, but will make the build pass while it's fixed by the web3 team.

Here's my .webpack.config.js and .rescriptsrc.js that overrides the CRA webpack config removing the warning

.webpack.config.js

module.exports = config => {
  config.module.exprContextCritical = false;
  return config;
};

.rescriptsrc.js

module.exports = [require.resolve('./.webpack.config.js')];

Hopefully this will help someone :)

[jjhesk]

same problem again v1.2.1

[blockchaingate]

same problem:
WARNING in ./node_modules/web3-eth-accounts/src/scrypt.js 17:50-60
Critical dependency: the request of a dependency is an expression

[alexbrtsv]

same problem:
WARNING in ./node_modules/web3-eth-accounts/src/scrypt.js 17:50-60
Critical dependency: the request of a dependency is an expression

It fix if modify node: false; with node: { buffer: true } in
nodes_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js
but its not good solution)

Versions
web3: "^1.2.1",
Angular CLI: 8.3.6
Node: 12.11.0
OS: darwin x64
Angular: 8.2.8

[tharinduvindula]

WARNING in ./node_modules/web3-eth-accounts/src/scrypt.js 17:50-60
Critical dependency: the request of a dependency is an expression
what is the solushion

"dependencies": {
"@agm/core": "1.0.0-beta.5",
"@angular/animations": "7.0.2",
"@angular/cdk": "7.0.2",
"@angular/common": "7.0.2",
"@angular/compiler": "7.0.2",
"@angular/core": "7.0.2",
"@angular/forms": "7.0.2",
"@angular/http": "7.0.2",
"@angular/material": "7.0.2",
"@angular/platform-browser": "7.0.2",
"@angular/platform-browser-dynamic": "7.0.2",
"@angular/platform-server": "7.0.2",
"@angular/router": "7.0.2",
"@ngrx/effects": "^7.0.1",
"@ngrx/entity": "^7.0.1",
"@ngrx/router-store": "^7.0.1",
"@ngrx/store": "^7.0.1",
"@ngrx/store-devtools": "^7.0.1",
"@types/base-64": "^0.1.3",
"@types/utf8": "^2.1.6",
"ajv": "6.4.0",
"arrive": "2.4.1",
"base-64": "^0.1.0",
"bip32": "git+https://github.com/bitcoinjs/bip32.git#patchRmd160-2",
"bootstrap": "4.3.1",
"bootstrap-material-design": "4.1.1",
"bootstrap-notify": "3.1.3",
"chartist": "0.11.0",
"classlist.js": "1.1.20150312",
"core-js": "2.4.1",
"express": "4.16.3",
"flag-icon-css": "^3.4.2",
"fusioncharts": "^3.13.4",
"fusionmaps": "^3.13.1-sr.1",
"googleapis": "28.1.0",
"hammerjs": "2.0.8",
"intl": "^1.2.5",
"jquery": "3.4.1",
"moment": "2.22.1",
"node-pre-gyp": "^0.13.0",
"npm-packlist": "^1.4.6",
"nyc": "^14.1.1",
"perfect-scrollbar": "1.1.0",
"popper.js": "1.14.3",
"rxjs": "6.3.3",
"rxjs-compat": "6.3.3",
"utf8": "^3.0.0",
"web-animations-js": "2.3.1",
"web3": "^1.0.0-beta.37",
"zone.js": "0.8.26"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^7.4.3",
"@angular-builders/dev-server": "^7.3.1",
"@angular-devkit/build-angular": "^0.13.8",
"@angular/cli": "6.0.3",
"@angular/compiler-cli": "^7.2.12",
"@angular/language-service": "7.0.2",
"@types/bootstrap": "3.3.32",
"@types/chartist": "0.9.34",
"@types/googlemaps": "3.30.8",
"@types/jasmine": "2.5.38",
"@types/jquery": "^1.10.35",
"@types/node": "^6.0.73",
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "^4.1.0",
"chai": "^4.1.2",
"chai-as-promised": "^7.1.1",
"chai-bignumber": "^3.0.0",
"codelyzer": "4.2.1",
"dotenv": "^8.1.0",
"ganache-cli": "^6.1.8",
"jasmine-core": "3.1.0",
"jasmine-spec-reporter": "4.2.1",
"jquery": "^3.2.1",
"karma": "2.0.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "1.4.2",
"karma-jasmine": "1.1.1",
"lite-server": "^2.3.0",
"nodemon": "^1.17.3",
"protractor": "5.3.1",
"solidity-coverage": "^0.6.7",
"truffle": "5.0.0-beta.0",
"truffle-contract": "3.0.6",
"truffle-hdwallet-provider": "^1.0.17",
"ts-node": "5.0.1",
"tslint": "5.9.1",
"typescript": "3.1.6",
"webpack-merge": "^4.2.2"
}
}

[joshstevens19]

so to get your angular app to work on web3 version 2 i wrote a angular script which executes on postinstall but that doesn't seem to exist in 1.0. The dependency warning itself is just a warning so you can still run the app without that being fixed.

If you drop this in your project on the route and then execute it with node it should allow your angular app to work. Il do a PR when i get a chance to put that script in web3 1.0 as well.

const fs = require('fs');
const f = './node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';

// This is because we have to replace the `node:false` in the `/angular-cli-files/models/webpack-configs/browser.js`
// with `node: {crypto: true, stream: true}` to allow web3 to work with angular (as they enforce node: false.)
// as explained here - https://github.com/ethereum/web3.js/issues/2260#issuecomment-458519127
if (fs.existsSync(f)) {
    fs.readFile(f, 'utf8', function(err, data) {
        if (err) {
            return console.log(err);
        }
        var result = data.replace(/node: false/g, 'node: {crypto: true, stream: true}');
        fs.writeFile(f, result, 'utf8', function(err) {
            if (err) return console.log(err);
        });
    });
}

#2260 (comment) < link to where i answered this before.

In terms of this dependency is anyone still looking at fixing it? been open for a while now happy to do a PR to fix it if not.

[nivida]

This got fixed with the following commit and will be released asap.

[ItalyPaleAle]

@nivida version 1.2.1 didn't solve this for me

I still get error:

WARNING in ./node_modules/web3-eth-accounts/src/scrypt.js 17:50-60
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/web3-eth-accounts/src/index.js
 @ ./node_modules/web3-eth/src/index.js
 @ ./node_modules/web3/src/index.js
 @ ./src/lib/EthWallet.js
 @ ./src/views/AccountView.svelte
 @ ./src/entry/account.js
 @ multi ./src/entry/account.js

[nivida]

It will be released with 1.2.2

[tharinduvindula]

when 1.2.2 release

[SpiegelSoft]

This is still happening for me (v1.2.4)

[nivida]

@SpiegelSoft Be sure you have updated the package-lock file of your project.

[Liberalite]

@SpiegelSoft Be sure you have updated the package-lock file of your project.

Deleted package-lock and tried npm & yarn but i still get the same errors using CRA.
Any other suggestions ? Thanks !

[nivida]

@Liberalite Thanks for asking! As it looks like is it not resolving the package entry correctly. We have defined the browser property in the package.json of the scrypt-shim package to fix the warning from your screenshot. If the mainFields and target property of the webpack configuration is defined correctly. Will it use the browser entry if it exists in the package it wants to resolve.

• Related Documentation

[Liberalite]

@nivida Can you please share some code ?
I'm failing misserably :D
I tried to add scrypt-shim, tried to add mainFields: ['browser'] inside resolve: { but still get the same two errors. Cheers !

[x5engine]

I still get the issue too

[gjgd]

Same ^ It came back

[cgewecke]

@gigd @x5engine Could you run npm list web3 or yarn list web3 in your project and show the dependency tree? It's possible you have a Web3 version lower than 1.2.2 somewhere.

For example, here's someone in a webpack issue about this topic 7 days ago noting that @truffle/contract depends on 1.2.1.

[gjgd]

I didn't know about npm list web3 that's an awesome feature! Indeed the dependency tree shows versions of both [email protected] and [email protected].

That solves it for me

[kuzdogan]

How do you solve it @gjgd Don't we need to wait for the listed packages to upgrade to [email protected]+?