TypeError: (0 , _react.useEffect) 不是函数

Posted 2023-02-22

【中文标题】TypeError: (0 , _react.useEffect) 不是函数

【英文标题】：TypeError: (0 , _react.useEffect) is not a function

【发布时间】：2020-08-04 12:07:29

【问题描述】：

在开发环境中，我的应用运行良好。 在生产环境中它会因错误而崩溃：

Uncaught TypeError: (0 , _react.useEffect) is not a function

它发生在我创建的文件中，我在其中导入 React 和 useEffect，如下所示：

import React,  useEffect  from 'react'

const X = () => 
  useEffect(() =>  ... )

  ...

在此行下方添加一个 console.log 确认 useEffect 在生产中确实是未定义的，而在开发中是预期的功能。

我检查了我的 package.json、yarn.lock 和 node_modules 是否有任何可能低于 16.8.0 的 react 或 react-dom 版本，其中引入了 useEffect。但一切都是 16.13.1，它们是主要依赖项，我确实尝试清理我的 yarn 缓存，删除 node_modules 和 yarn.lock，然后重新安装。

我尝试在peerDependencies 中添加和删除它，但没有成功。

我检查以确保没有 2 个单独的 React 版本在运行，而是将 window.React1 = React 保存在库中，将 window.React2 = React 保存在我的应用程序中并检查

window.React1 === window.React2 是真的，所以也不是这样。

最后，我还尝试将 React 别名为 node_modules 中的特定别名，但没有任何运气。

我发现唯一可行的解​​决方案是如果我像这样导入它：

import React from 'react';

const X = () => 
  React.useEffect(() =>  ... )
  ...

但这应该与使用解构导入完全相同？ 如果我明确使用 React.useEffect 它也会迫使我将所有其他 useState 和 useEffect 挂钩更改为 React.useSate 和 React.useEffect

下一个错误就变成了：TypeError: (0 , _react.useState) is not a function 在我使用 React 钩子的另一个文件中。

我想解决问题而不是实施解决方法。

我使用 microbundle 来使用 React 捆绑我的库。 我使用parcel-bundler 来导入 React 组件并在开发环境（直接来自 src）或 prod（捆绑库）中渲染它

我使用的捆绑版本是捆绑了.mjs

我还检查了缩小的 .mjs 包的输出，并且 React 内部是这样导入的：

import ue,useEffect as pe,useState as fefrom"react";

我觉得不错。

我真的不明白重组后的导入会如何破坏它，但只做 React.useEffect 就可以了？

这是我的 package.json

  "name": "xxx",
  "version": "1.1.4",
  "repository": "[e-mail]:xxx/xxx.git",
  "author": "xxx",
  "license": "MIT",
  "source": "src/index.ts",
  "main": "dist/bundle.js",
  "umd:main": "dist/bundle.umd.js",
  "module": "dist/bundle.mjs",
  "publishConfig": 
    "registry": "https://npm.pkg.github.com/@xxx"
  ,
  "scripts": 
    "build": "microbundle",
    "dev": "parcel ./test-app/dev/index.html --port 3000",
    "start": "parcel ./test-app/serve/index.html --port 3000",
    "storybook": "start-storybook -s ./public -c .storybook --ci",
    "prepublishOnly": "yarn build"
  ,
  "dependencies": 
    "@api-platform/admin": "2.1.0",
    "@api-platform/api-doc-parser": "0.8.2",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "@material-ui/core": "^4.9.10",
    "@material-ui/icons": "^4.9.1",
    "@react-keycloak/web": "^2.1.1",
    "@types/pluralize": "^0.0.29",
    "google-geocoder": "0.2.1",
    "history": "^4.10.1",
    "keycloak-js": "^9.0.3",
    "lodash.debounce": "^4.0.8",
    "lodash.omit": "^4.5.0",
    "lodash.set": "4.3.2",
    "notistack": "0.9.9",
    "papaparse": "^5.2.0",
    "parcel-bundler": "1.12.4",
    "polished": "^3.5.2",
    "react": "16.13.1",
    "react-admin": "3.4.1",
    "react-dom": "16.13.1",
    "react-is": "16.13.1",
    "react-redux": "^7.2.0",
    "recompose": "^0.30.0",
    "redux": "4.0.5",
    "styled-components": "5.1.0"
  ,
  "devDependencies": 
    "@babel/core": "7.9.0",
    "@babel/plugin-syntax-export-default-from": "7.8.3",
    "@babel/preset-env": "7.9.5",
    "@babel/preset-react": "7.9.4",
    "@storybook/addon-a11y": "5.3.18",
    "@storybook/addon-actions": "5.3.18",
    "@storybook/addon-info": "5.3.18",
    "@storybook/addon-knobs": "5.3.18",
    "@storybook/addon-links": "5.3.18",
    "@storybook/addon-storyshots": "5.3.18",
    "@storybook/addon-storysource": "5.3.18",
    "@storybook/addon-viewport": "5.3.18",
    "@storybook/react": "5.3.18",
    "@testing-library/react": "^10.0.3",
    "@types/jsonld": "1.5.1",
    "@types/lodash": "4.14.149",
    "@types/node": "13.11.1",
    "@types/papaparse": "5.0.3",
    "@types/react-redux": "7.1.7",
    "@types/recompose": "^0.30.7",
    "@types/styled-components": "5.1.0",
    "@welldone-software/why-did-you-render": "4.0.7",
    "awesome-typescript-loader": "5.2.1",
    "babel-loader": "^8.1.0",
    "babel-plugin-module-resolver": "4.0.0",
    "babel-plugin-styled-components": "1.10.7",
    "lodash.get": "4.4.2",
    "lodash.uniq": "4.5.0",
    "microbundle": "0.11.0",
    "openapi-types": "1.3.5",
    "parcel-plugin-static-files-copy": "2.3.1",
    "pluralize": "^8.0.0"
  ,
  "alias": 
    "jsonld": "./node_modules/jsonld/dist/jsonld.js"
  ,
  "staticFiles": 
    "staticPath": "public",
    "watcherGlob": "**"
  

另外值得注意的是，只有 React 我遇到了这个问题。我所有其他重组后的导入工作都很好。

【问题讨论】：

使用命名导入与引用默认导出的成员完全不同。我的猜测是，在开发时，你有一些额外的加载器正在做一些恶作剧来解决模块加载器之间的遗留兼容性问题

你可以试试global 标志--globals react=React 并添加 React 作为对等依赖项 github.com/developit/microbundle/issues/537好像来自yarn

您能否尝试安装 microbundle@next 以查看该安装是否有效？只是为了检查它是否确实是当前的微包版本问题

如果您使用的是 TypeScript，您可能还想查看这个问题：github.com/developit/microbundle/issues/564

我猜这是因为使用microbundler 而不是react-scripts 进行生产构建，或者以一种糟糕的方式改变了捆绑器配置。我想提请您注意反应钩子名称应以use 开头，并且可能在import ue,useEffect as pe,useState as fefrom"react"; 这一行中，其中useEffect 导入为pe 反应出现问题。那么，您是否尝试过使用 create-react-app 和 react-scripts 构建？

【参考方案1】：

microbundler 似乎无法容忍 React。这个创建的包试图在全局范围内使用react，而不是真正暴露的React。

出于同样的原因，您使用React.useEffect 的解决方法可以按预期工作，想象一下它看起来像window.React.useEffect。

这是一个原始应用程序的示例：

import ReactDOM from 'react-dom';
import React,  useEffect, useState  from 'react';

/**
 * necessary workaround, microbundle use `h` pragma by default,
 * that undefined when use React
 * another option is to make build with option --jsx
 * @example microbundle --globals react=React --jsx React.createElement
 * yes, yet another workaround
*/
window.h = React.createElement;

const X = () => 
  const [A, B] = useState('world');

  useEffect(() => 
    B('MLyck');
  , [])

  return `Hello $A`;


ReactDOM.render(<X />, document.querySelector('react-app'));

仅与 microbundle 捆绑后，它完全损坏了，但是当您尝试捆绑时

microbundle --globals react=React

正如@Jee Mok 正确建议的那样，它将产生正确的捆绑包。 我希望 cmets 能解释发生了什么。

!function (e, t) 
  "object" == typeof exports && "undefined" != typeof module ?
    t(require("react-dom"), require("react")) :
    "function" == typeof define && define.amd ?
      define(["react-dom", "react"], t) :
      t(e.ReactDOM, e.React);
  /*
  String above is core of problem,
  in case you try to bundle without options `--globals react=React`
  it will looks like: `t(e.ReactDOM, e.react);`
  Obviously `react` is not defined in `e` e.g. `this` e.g. `window`
  due to react expose self as `React`
   */
(this, function (e, t) 
  e = e && e.hasOwnProperty("default") ? e.default : e, window.h = ("default" in t ? t.default : t).createElement, e.render(h(function () 
    var e = t.useState("world"), n = e[0], r = e[1];
    return t.useEffect(function () 
      r("MLyck");
    , []), "Hello " + n;
  , null), document.querySelector("react-app"));
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script>

    <react-app></react-app>

而且，顺便说一句，“重组进口”一点也不怪。

【讨论】：

我在使用 Webpack 而不是 Microbundle 时遇到了同样的问题。我认为问题是一样的：捆绑尝试从全局范围使用 react ，而不是 React 。知道如何使用 Webpack 解决这个问题吗？

【参考方案2】：

您可以通过以下方式修复它：

import React,  useState, useEffect  from "react";

【参考方案3】：

此答案并非针对提问者的确切情况，而是针对问题标题中的错误消息的可能（尽管不太可能）解决方案。由于此页面是 Google 上有关错误消息的唯一结果，因此我想添加此页面，以防万一它对某人有所帮助。

---

我也遇到了这个错误，但是我没有使用microbundle；我使用的是普通的旧create-react-app，没有任何修改或任何花哨的东西。该错误仅发生在生产版本中；本地开发运行良好。

头撞墙一个小时后，我终于注意到不知何故我的 IDE 错误地自动导入了 useEffect，如下所示：

import  useEffect  from "react/cjs/react.development";

而不是这个：

import  useEffect  from "react";

检查以确保您的导入都正确。

我通过获取我的浏览器抱怨的特定缩小代码来解决这个问题——在我的例子中，TypeError: (0 , m.useEffect) is not a function——在我的ctrl+f 文件中找到它，观察它附近的代码，然后将其追溯到 /src 中的原始源文件，在那里我发现了错误的导入。