How can I solve 'Uncaught Error: Cannot find module 'path'' error in react.js

user_18002913 0
Viewed 286

I encountered these errors while working properly while making a web application in react.js. I've encountered it before, but I couldn't find the solution even though I tried many things on the internet. Because there are too many files in react.js, maybe my files are missing or have different names, so I may have done it wrong, but I don't think so. I'm getting the same errors now. When I run the browser in react, the following error appears in the console.

ERROR in console

  Uncaught Error: Cannot find module 'path'
        at webpackMissingModule (view.js:17:1)
        at ./node_modules/express/lib/view.js (view.js:17:1)
        at options.factory (react refresh:6:1)
        at __webpack_require__ (bootstrap:24:1)
        at fn (hot module replacement:62:1)
        at ./node_modules/express/lib/application.js (application.js:22:1)
        at options.factory (react refresh:6:1)
        at __webpack_require__ (bootstrap:24:1)
        at fn (hot module replacement:62:1)
        at ./node_modules/express/lib/express.js (express.js:18:1) ?

ERROR in the screen

Compiled with problems:X

ERROR in ./node_modules/body-parser/lib/read.js 24:11-26

Module not found: Error: Can't resolve 'zlib' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\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 }


ERROR in ./node_modules/content-disposition/index.js 19:15-39

Module not found: Error: Can't resolve 'path' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\content-disposition'

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 }


ERROR in ./node_modules/cookie-signature/index.js 4:13-30

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\cookie-signature'

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: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }


ERROR in ./node_modules/destroy/index.js 15:17-41

Module not found: Error: Can't resolve 'fs' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\destroy'


ERROR in ./node_modules/destroy/index.js 17:13-30

Module not found: Error: Can't resolve 'stream' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\destroy'

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: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }


ERROR in ./node_modules/destroy/index.js 19:11-26

Module not found: Error: Can't resolve 'zlib' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\destroy'

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 }


ERROR in ./node_modules/etag/index.js 18:13-30

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\etag'

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: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }


ERROR in ./node_modules/etag/index.js 20:12-31

Module not found: Error: Can't resolve 'fs' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\etag'


ERROR in ./node_modules/express/lib/application.js 28:11-26

Module not found: Error: Can't resolve 'http' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\express\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: { "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 }


ERROR in ./node_modules/express/lib/application.js 42:14-37

Module not found: Error: Can't resolve 'path' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\express\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: { "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 }


ERROR in ./node_modules/express/lib/request.js 18:11-30

Module not found: Error: Can't resolve 'net' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\express\lib'


ERROR in ./node_modules/express/lib/request.js 22:11-26

Module not found: Error: Can't resolve 'http' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\express\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: { "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 }


ERROR in ./node_modules/express/lib/response.js 25:11-26

Module not found: Error: Can't resolve 'http' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\express\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: { "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 }


ERROR in ./node_modules/express/lib/response.js 31:11-26

Module not found: Error: Can't resolve 'path' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\express\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: { "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 }


ERROR in ./node_modules/express/lib/view.js 16:11-26

Module not found: Error: Can't resolve 'path' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\express\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: { "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 }


ERROR in ./node_modules/express/lib/view.js 18:9-22

Module not found: Error: Can't resolve 'fs' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\express\lib'


ERROR in ./node_modules/mime-types/index.js 15:14-37

Module not found: Error: Can't resolve 'path' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\mime-types'

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 }


ERROR in ./node_modules/send/index.js 29:9-22

Module not found: Error: Can't resolve 'fs' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\send'


ERROR in ./node_modules/send/index.js 39:11-26

Module not found: Error: Can't resolve 'path' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\send'

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 }


ERROR in ./node_modules/send/index.js 43:13-30

Module not found: Error: Can't resolve 'stream' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\send'

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: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }


ERROR in ./node_modules/send/node_modules/mime/mime.js 1:11-26

Module not found: Error: Can't resolve 'path' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\send\node_modules\mime'

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 }


ERROR in ./node_modules/send/node_modules/mime/mime.js 3:9-22

Module not found: Error: Can't resolve 'fs' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\node_modules\send\node_modules\mime'


ERROR in ./node_modules/serve-static/index.js 20:14-37

Module not found: Error: Can't resolve 'path' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4\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 }

package.json

{
  "name": "stajreact4",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "bootstrap": "^5.2.0",
    "mime": "^3.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts 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"
    ]
  }
}

The versions that come out when you type npm ls webpack in the terminal in react

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
stajreact4@0.1.0 C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact4
└─┬ react-scripts@5.0.1
  ├─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.7
  │ └── webpack@5.74.0 deduped
  ├─┬ babel-loader@8.2.5
  │ └── webpack@5.74.0 deduped
  ├─┬ css-loader@6.7.1
  │ └── webpack@5.74.0 deduped
  ├─┬ css-minimizer-webpack-plugin@3.4.1
  │ └── webpack@5.74.0 deduped
  ├─┬ eslint-webpack-plugin@3.2.0
  │ └── webpack@5.74.0 deduped
  ├─┬ file-loader@6.2.0
  │ └── webpack@5.74.0 deduped
  ├─┬ html-webpack-plugin@5.5.0
  │ └── webpack@5.74.0 deduped
  ├─┬ mini-css-extract-plugin@2.6.1
  │ └── webpack@5.74.0 deduped
  ├─┬ postcss-loader@6.2.1
  │ └── webpack@5.74.0 deduped
  ├─┬ react-dev-utils@12.0.1
  │ └─┬ fork-ts-checker-webpack-plugin@6.5.2
  │   └── webpack@5.74.0 deduped
  ├─┬ sass-loader@12.6.0
  │ └── webpack@5.74.0 deduped
  ├─┬ source-map-loader@3.0.1
  │ └── webpack@5.74.0 deduped
  ├─┬ style-loader@3.3.1
  │ └── webpack@5.74.0 deduped
  ├─┬ terser-webpack-plugin@5.3.3
  │ └── webpack@5.74.0 deduped
  ├─┬ webpack-dev-server@4.9.3
  │ ├─┬ webpack-dev-middleware@5.3.3
  │ │ └── webpack@5.74.0 deduped
  │ └── webpack@5.74.0 deduped
  ├─┬ webpack-manifest-plugin@4.1.1
  │ └── webpack@5.74.0 deduped
  ├── webpack@5.74.0
  └─┬ workbox-webpack-plugin@6.5.4
    └── webpack@5.74.0 deduped

The webpack version appears to be 5.74.0. Internet was talking about this problem being a mismatch with the webpack version, and a recommendation was given to downgrade the version to 4. I also downgraded my version to 4, not exactly 4. It could be 4.12, I don't remember exactly, but we can say that I reduced it to 4. And when I said npm ls webpack again, then most of the webpack versions were 4 versions that I dropped, but 2-3 of them were still the same version, I thought maybe they were causing problems. I have described my problem a bit long because for some reason I really don't understand why it shows these errors in the middle of the project while the project is running properly. Has anyone actually solved this problem? What could be the reason? How can I solve it?

webpack reactjs javascript
1 Answers

You cannot use path as webpack doesn't polyfill core node modules (for e.g. path, fs, etc.). To use these in your project, you have to either downgrade your react version and react-dom (strongly recommend 17.0.2 for both), react-scripts version (strongly recommend 4.0.3).

These versions have an older version of webpack that supports automatic polyfills.

Another option could be manually polyfilling whatever core node modules you need but I'm not very sure of how to do that.

If you don't have any specific version needs, the first approach should work flawlessly.

user_180016930
Related