Module not found: Error: Can't resolve 'fs' error in React Application

[Nijat Mursali]

Hello,

I'm currently working on one project regarding implementing OpenCV, and I saw this library. I have installed it via NPM, but I'm getting the following errors when I import the library:

Compiled with problems:

ERROR in ./node_modules/@techstark/opencv-js/dist/opencv.js 77:34-47

Module not found: Error: Can't resolve 'fs' in 


ERROR in ./node_modules/@techstark/opencv-js/dist/opencv.js 78:38-53

Module not found: Error: Can't resolve 'path' in 

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 }

Could you please let me know how can I solve this issue? I have created webpack.config.js file which looks like this:

const webpack = require("webpack");
const path = require("path");

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./src/index.js"),
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js", ".jsx"],
    fallback: {
      fs: false,
      path: false,
      crypto: false,
    },
    modules: ["app", "node_modules"],
    extensions: [".js", ".jsx", ".react.js"],
    mainFields: ["browser", "jsnext:main", "main"],
  },
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  devServer: {
    static: path.resolve(__dirname, "./dist"),
  },
};

But, it does not work. Do I need to have another commands to push the code to run?

[Wilson Tian]

@nijatmursali please check https://github.com/TechStark/opencv-js-examples/tree/develop/opencv-js-webpack-example It works for me.

[Nijat Mursali]

I have tried it, but it gives Module not found: Error: Can't resolve 'pages/notFound' when I use with webpack. What rule should I add in that case? I cannot add ./pages/notFound.jsx because I have bunch of these pages.

[Wilson Tian]

I don't have your source code. I'm not clear what's the issue, but the above error doesn't seem to be related to opencv.js

[gauti]

any solution for the above one?

[Wilson Tian]

Here is a working example https://github.com/TechStark/opencv-js-examples/tree/develop/opencv-js-webpack-example

[gauti]

@ttt43ttt Thanks for taking a look, I have posted my question here, am facing 'fs' issue
https://stackoverflow.com/questions/73435275/unable-to-use-opencv-js-in-react-native

[gauti]

[Michael David Pascual]

I also experienced this fs module not found error. I think this is related to this facebook/create-react-app#11756

The way I solved it is by switching to react-app-rewired

Step by step instruction https://stackoverflow.com/a/73661388/1862452