I've been dealing with webpack > 5 bundling issues since yesterday.
Here's what my package.json looks like:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"path-browserify": "^1.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.1",
"react-scripts": "5.0.1",
"socket.io-client": "^4.5.4",
"stream-http": "^3.2.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"hola": "echo hola mundo"
},
"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"
]
}
}
This is how it started:
jaime@jaime-Lenovo:~/gameapp$ npm run build
> react-scripts build
Creating an optimized production build...
Failed to compile.
Module not found: Error: Can't resolve 'path' in '/gameapp/frontend/node_modules/serve-static'
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: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
After reading answers (like this: i tried to Polyfill modules in webpack 5 but not working (Reactjs)) I tried:
1.- Adding resolve:{ fallback: { path: false }} on my /node_modules/react-scripts/config/webpack.config.js returns:
Module not found: Error: Can't resolve 'http' in '/node_modules/express/lib'
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "http": false }
2.- Adding resolve:{ fallback: { path: require.resolve('path-browserify') }} returns:
Module not found: Error: Can't resolve 'http' in '/gameapp/frontend/node_modules/express/lib'
you need to:
- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
- install 'stream-http'
or:
resolve.fallback: { "http": false }
3.- Using resolve.fallback: { "http": false } gives:
Failed to compile.
Module not found: Error: Can't resolve 'net' in '/gameapp/frontend/node_modules/express/lib'
4.- Adding resolve:{ fallback: { path: require.resolve('stream-http') }} returns:
Failed to compile.
Module not found: Error: Can't resolve 'net' in '/home/jaime/gameapp/frontend/node_modules/express/lib'
And here's where I'm stuck. Is this last message part of the Webpack > 5 problem? and if so, what polyfill should I use? or should I just downgrade to webpack 4?