1

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?

RubenSmn
  • 4,091
  • 2
  • 5
  • 24
varChar16
  • 25
  • 1
  • 6

0 Answers0