I have tried installing webpack at the beginning of a new project, and I've tried ignoring the modules in the package.json. My webpack comes up with 19 errors when building, each corresponding to a module that is neither installed nor necessary. I've googled a few different queries but I have only turned up with a) make polyfill or b) set resolve fallback to false. I believe I made a proper polyfill with the buffer module and I set the rest of the offending modules to false.
Error:
> npx webpack -w
assets by status 0 bytes [cached] 1 asset
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/slick/Documents/Work/freelance/stacks-scales2'
resolve './src' in '/Users/slick/Documents/Work/freelance/stacks-scales2'
using description file: /Users/slick/Documents/Work/freelance/stacks-scales2/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/slick/Documents/Work/freelance/stacks-scales2/package.json (relative path: ./src)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/slick/Documents/Work/freelance/stacks-scales2/src doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/slick/Documents/Work/freelance/stacks-scales2/src.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/slick/Documents/Work/freelance/stacks-scales2/src.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/Users/slick/Documents/Work/freelance/stacks-scales2/src.wasm doesn't exist
as directory
/Users/slick/Documents/Work/freelance/stacks-scales2/src doesn't exist
webpack 5.62.1 compiled with 1 error and 1 warning in 225 ms
assets by status 606 KiB [cached] 1 asset
runtime modules 432 bytes 3 modules
javascript modules 564 KiB
modules by path ./node_modules/ 564 KiB 56 modules
./src/index.js 407 bytes [built] [code generated]
http (ignored) 15 bytes [built] [code generated]
./streams (ignored) 15 bytes [built] [code generated]
./extend-node (ignored) 15 bytes [built] [code generated]
json modules 261 KiB
modules by path ./node_modules/iconv-lite/ 86.7 KiB 8 modules
./node_modules/mime-db/db.json 142 KiB [built] [code generated]
./node_modules/statuses/codes.json 1.54 KiB [built] [code generated]
./node_modules/mime/types.json 30.8 KiB [built] [code generated]
WARNING in ./node_modules/express/lib/view.js 81:13-25
Critical dependency: the request of a dependency is an expression
@ ./node_modules/express/lib/application.js 22:11-28
@ ./node_modules/express/lib/express.js 18:12-36
@ ./node_modules/express/index.js 11:0-41
@ ./src/index.js 1:16-34
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
ERROR in ./node_modules/body-parser/lib/read.js 18:11-26
Module not found: Error: Can't resolve 'zlib' in '/Users/slick/Documents/Work/freelance/stacks-scales2/node_modules/body-parser/lib'
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: { "zlib": require.resolve("browserify-zlib") }'
- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "zlib": false }
@ ./node_modules/body-parser/lib/types/raw.js 15:11-29
@ ./node_modules/body-parser/index.js 145:15-41
@ ./node_modules/express/lib/express.js 15:17-39
@ ./node_modules/express/index.js 11:0-41
@ ./src/index.js 1:16-34
...
19 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
webpack 5.62.1 compiled with 19 errors and 2 warnings in 5377 ms
This seems to often be resolved in the package.json, but it doesn't work for all of them on this one:
"resolve": {
"fallback": {
"fs": "false",
"crypto": "false",
"zlib_bindings": "false",
"zlib": "false",
"stream": "false",
"url": "false",
"querystring": "false",
"http": "false",
"net": "false",
"buffer": "resolve.require('buffer')"
}
},
"mode": "development",
"scripts": {
"start": "npx src/index.jsx",
"build": "npx webpack -w"
},
"dependencies": {
"@material-ui/core": "^4.12.3",
"buffer": "^6.0.3",
"compression": "^1.7.4",
"cors": "^2.8.5",
"express": "^4.17.1",
"mysql": "^2.18.1",
"path": "^0.12.7",
"react": "^17.0.2",
"webpack": "^5.62.1"
},
"devDependencies": {
"webpack-cli": "^4.9.1"
}
}
The server is very basic, as it's a basic site:
const compression = require('compression');
const cors = require('cors');
const path = require('path');
const app = express();
const port = 3030;
app.use(compression());
app.use(express.static(path.join(__dirname, '../dist')));
app.use(cors());
app.get('/', (req, res) => {
res.send();
});
app.listen(port, () => {
console.log(`Listening on port ${port}...`);
});```