Error: Can't resolve 'path' in 'C:\work\demo\node_modules\mime-types'

Question

getting error after update "react-scripts": "4.0.3" to "react-scripts": "5.0.1", let me know why I am getting this error or how can I fix this...

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

Module not found: Error: Can't resolve 'path' in 'C:\work\sams-frontend-su\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 }

also, I created a webpack.config.js file in the parent path

module.exports = {
  resolve: {
    fallback: { "path": require.resolve("path-browserify") },
  },
};

Package.json

{
    "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "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"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.17.10",
    "@babel/core": "^7.18.0",
    "@babel/preset-env": "^7.18.0",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.8.0",
    "@mui/lab": "^5.0.0-alpha.82",
    "@mui/material": "^5.8.0",
    "@mui/styles": "^5.8.0",
    "antd": "^4.20.6",
    "axios": "^0.27.2",
    "formik": "^2.2.9",
    "mime-types": "^2.1.35",
    "moment": "^2.29.3",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-csv": "^2.2.2",
    "react-draggable": "^4.4.5",
    "react-scripts": "^5.0.1",
    "react-table": "^7.8.0",
    "react-window": "^1.8.7",
    "spelling": "^2.0.2",
    "yup": "^0.32.11"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0",
    "react-dom": "^16.8.0 || ^17.0.0"
  }
}

Answer 1

Problem is, between v4 and v5 of react-scripts Webpack was also updated from v4 to v5. In the past, it used to automatically polyfill Node.js modules, when imported from browser code, but this changed in v5. Now, you must explicitly inform Webpack it should use polyfills.

Your webpack.config.js doesn't work, because react-scripts ignore this file and uses the one shipped with it instead. There is a 3rd party package named craco (https://github.com/gsoft-inc/craco), which gives you possibility to patch Webpack config, but it's not marked as compatible v5, so I doubt it will work.

You can do two things then:
a) downgrade to v4 and stay there until Craco is ready for v5.
b) use browser-native library like mime instead

This library doesn't use any Node.js API, so it's natively supported in a browser. Give it a try.

Answer 2

The path dependency is part of the Node.js runtime.The alternative is to just use the mime module. This module was made to fix the issue. It uses the same data source as this module, and it has all the same mappings.

npm install mime

Ref: Link1, Link2