最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin4浏览0评论

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 ponent. 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  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: "monjs2",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_ponents|build)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  externals: {
    react: "monjs react",
    "react-dom": "monjs 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-ponents": "^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: {
    monjs: "react",
    monjs2: "react",
  },
  "react-dom": {
    monjs: "react-dom",
    monjs2: "react-dom",
  },
},

and

externals: {
  react: "monjs 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 ?

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 ponent. 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/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: "monjs2",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_ponents|build)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  externals: {
    react: "monjs react",
    "react-dom": "monjs 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-ponents": "^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: {
    monjs: "react",
    monjs2: "react",
  },
  "react-dom": {
    monjs: "react-dom",
    monjs2: "react-dom",
  },
},

and

externals: {
  react: "monjs 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 ?

Share Improve this question edited Aug 8, 2022 at 14:03 Yves M. 31k24 gold badges109 silver badges149 bronze badges asked Aug 31, 2021 at 8:51 x2cheesex2cheese 3332 gold badges6 silver badges17 bronze badges 1
  • 1 The issue is related to the fact that the module is not ready when you require\import it. – Alessandro_Russo Commented Mar 31, 2023 at 14:11
Add a ment  | 

2 Answers 2

Reset to default 0

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

I faced a similar error using NextJS v14 when I tried to fetch data using server-side rendering.

I created an Axios helper, but it do not work:

const httpRequest = axios.create({
    baseURL: "http://localhost:8080"
});

I attempted to use this HTTP helper, but I got the same errors as you:

const { data } = await httpRequest.get(`/courses`);

It's necessary to use the full endpoint for server-side requests:

const { data } = axios.get("http://localhost:8080/courses");

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论