WebPack - TypeError: __webpack_modules__[moduleId] is not a function (development) // Error: Invalid hook call (production)

Question

I'm struggling with a WebPack error that occur when I use my custom library hosted as a package and streamed with NPM Link. Meanwhile, the production version works perfectly

Here is my scripts

"scripts": {
    "dev": "rm -rf build && NODE_ENV=development webpack",
    "build": "rm -rf build && NODE_ENV=production webpack",
},

When I bundle my code using the build script, I get

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

And, when I'm using the dev one, I get

TypeError: __webpack_modules__[moduleId] is not a function

/******/        };
/******/    
/******/        // Execute the module function
> /******/      __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/    
/******/        // Return the exports of the module
/******/        return module.exports;

Here is my webpack.config.js file:

const path = require("path");

module.exports = {
  mode: process.env.NODE_ENV,
  devtool: "source-map",
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "index.js",
    libraryTarget: "commonjs2",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  externals: {
    react: "commonjs react",
    "react-dom": "commonjs react-dom",
  },
};

My package.json:

{
  "description": "",
  "main": "/build/",
  "scripts": {
    "dev": "rm -rf build && webpack --watch",
    "build": "rm -rf build && NODE_ENV=production webpack",
    "test": "jest"
  },
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.14.5",
    "@babel/core": "^7.14.5",
    "@babel/preset-env": "^7.14.5",
    "@babel/preset-react": "^7.14.5",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@webpack-cli/serve": "^1.5.2",
    "babel-loader": "^8.1.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "eslint": "^7.28.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "html-webpack-plugin": "^4.3.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "styled-components": "^5.3.1",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.3.0",
    "webpack-dev-server": "^3.11.1"
  }
}

I tried these fix that I found on severals discussions and articles, none of them work

externals: {
  react: {
    commonjs: "react",
    commonjs2: "react",
  },
  "react-dom": {
    commonjs: "react-dom",
    commonjs2: "react-dom",
  },
},

and

externals: {
  react: "commonjs react",
},

With aliases too

alias: {
  react: path.resolve("./node_modules/react"),
  "react-dom": path.resolve("./node_modules/react-dom"),
},

About the error message related to the development mode, I found theses articles article 1 and article 2 but none of them help me.

any thought ?

Answer 1

try to load remote module like this const NotesManager = dynamic(() => import("notes/NotesManager"), { ssr: false, }); Also wrap the remote module with <Suspense>