So I’m having an issue creating an application where I can’t run npm build
without this popping up:
cd 'C:\Users\finnm\OneDrive\Desktop\Finn's stuff\NFT\DenOfDragons\minting_staking_dapp'
npm start
minting_staking_dapp@0.1.0 start react-app-rewired start
node:internal/modules/cjs/loader:936
throw err;
^
Error: Cannot find module 'C:\Users\finnm\OneDrive\Desktop\Finn's stuff\NFT\DenOfDragons\minting_staking_dapp\node_modules\react-scripts/config/webpack.config.dev'
Require stack:
- C:\Users\finnm\OneDrive\Desktop\Finn's stuff\NFT\DenOfDragons\minting_staking_dapp\node_modules\react-app-rewired\scripts\start.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (C:\Users\finnm\OneDrive\Desktop\Finn's stuff\NFT\DenOfDragons\minting_staking_dapp\node_modules\react-app-rewired\scripts\start.js:9:23)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
"C:\\Users\\finnm\\OneDrive\\Desktop\\Finn's stuff\\NFT\\DenOfDragons\\minting_staking_dapp\\node_modules\\react-app-rewired\\scripts\\start.js"
]
}
The module is there and the path is correct, so I don't understand why it is not found.
node version: 16.14.0
npm version: 8.5.2
Here is my package.json file:
{
"name": "minting_staking_dapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0",
"contracts": "file:./SmartContractMetaData",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"react-app-rewired": "^1.6.2",
"web-vitals": "^2.1.4",
"web3": "^1.7.0"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"assert": "^2.0.0",
"crypto-browserify": "^3.12.0",
"https-browserify": "^1.0.0",
"os-browserify": "^0.3.0",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0"
}
}
And my file config-overrides.js:
const webpack = require('webpack');
module.exports = function override(config) {
config.ignoreWarnings = [/Failed to parse source map/];
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
"crypto": require.resolve("crypto-browserify"),
"stream": require.resolve("stream-browserify"),
"assert": require.resolve("assert"),
"http": require.resolve("stream-http"),
"https": require.resolve("https-browserify"),
"os": require.resolve("os-browserify"),
"url": require.resolve("url")
})
config.resolve.fallback = fallback;
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer']
})
])
return config;
}
This was the fix:
The reason it cannot find that module is because in react-scripts 2+, the file was renamed/merged with the normal webpack.config file by create-react-app.
If you're using react-app-rewired 1.6.2, you need to be using react-app-rewired 2+ for versions of react-scripts versions 2+, partly for this reason, and partly because there were also major changes in Webpack 4. Version 1.6.2 is not Webpack 4+ compatible.