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

nijatmursali commented 2 years ago

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?

ttt43ttt commented 2 years ago

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

nijatmursali commented 2 years ago

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.

ttt43ttt commented 2 years ago

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