TypeError: (0 , _react.useEffect) is not a function
TypeError: (0 , _react.useEffect) is not a function
在开发环境中，我的应用程序运行良好。
在生产环境中它崩溃并出现错误：
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 是否有任何 react 或 react-dom 版本可能低于引入了 useEffect 的 16.8.0。但是一切都是 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 hooks 的另一个文件中。
我想解决问题而不是实施解决方法。
我使用 microbundle 通过 React 捆绑我的库。
我使用 parcel-bundler 导入 React 组件并在开发环境（直接来自 src）或 prod（捆绑库）中呈现它
我使用的捆绑版本是捆绑了.mjs
我也检查了缩小后的 .mjs 包的输出，React 是这样导入的：
import ue,{useEffect as pe,useState as fe}from"react";
我觉得不错。
我真的不明白重组后的导入会如何破坏它，但只做 React.useEffect 就可以了吗？
这是我的 package.json
{
"name": "xxx",
"version": "1.1.4",
"repository": "git@github.com: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。我所有其他重组的进口工作都很好。
看来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 的正确建议，它将生成正确的包。
我希望评论能解释发生了什么。
!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>
而且，顺便说一下，"restructured import " 一点也不应该受到责备。
您可以通过以下方式修复它：
import React, { useState, useEffect } from "react";
这个答案不是针对提问者的具体情况，而是针对问题标题中错误信息的一种可能（尽管可能性很小）的解决方案。由于此页面是 Google 上关于错误消息的唯一结果，因此我想添加它，以防它对某人有所帮助。
我也遇到这个错误，但我没有使用microbundle；我使用的是普通的旧 create-react-app，没有任何修改或任何花哨的东西。该错误仅发生在生产构建中；本地开发工作正常。
在用头撞墙一个小时后，我终于注意到我的 IDE 不知何故 auto-imported useEffect 是这样的：
import { useEffect } from "react/cjs/react.development";
而不是这个：
import { useEffect } from "react";
检查以确保您的导入都是正确的。
我通过使用我的浏览器抱怨的特定缩小代码来解决这个问题——在我的例子中，TypeError: (0 , m.useEffect) is not a function——在我的 /build/static/main.blah.js 文件中用 ctrl+f 找到它，观察它附近的代码，然后将其追溯到 /src 中的原始源文件，在那里我发现了错误的导入。
就我而言，这是句法。这是在错误地将 useEffect 函数调用到 DOM 时：
错误的方式加倍戴牙套:
onInput={{inputHandler}}
正确方法：
onInput={inputHandler}
import React, {useEffect } from "react";
试试这个
useEffect( ()=>{} , [] )
而不是
useEffect=( ()=>{} , [] )
在开发环境中，我的应用程序运行良好。 在生产环境中它崩溃并出现错误：
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 是否有任何 react 或 react-dom 版本可能低于引入了 useEffect 的 16.8.0。但是一切都是 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 hooks 的另一个文件中。
我想解决问题而不是实施解决方法。
我使用 microbundle 通过 React 捆绑我的库。
我使用 parcel-bundler 导入 React 组件并在开发环境（直接来自 src）或 prod（捆绑库）中呈现它
我使用的捆绑版本是捆绑了.mjs
我也检查了缩小后的 .mjs 包的输出，React 是这样导入的：
import ue,{useEffect as pe,useState as fe}from"react";
我觉得不错。
我真的不明白重组后的导入会如何破坏它，但只做 React.useEffect 就可以了吗？
这是我的 package.json
{
"name": "xxx",
"version": "1.1.4",
"repository": "git@github.com: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。我所有其他重组的进口工作都很好。
看来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 的正确建议，它将生成正确的包。 我希望评论能解释发生了什么。
!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>
而且，顺便说一下，"restructured import " 一点也不应该受到责备。
您可以通过以下方式修复它：
import React, { useState, useEffect } from "react";
这个答案不是针对提问者的具体情况，而是针对问题标题中错误信息的一种可能（尽管可能性很小）的解决方案。由于此页面是 Google 上关于错误消息的唯一结果，因此我想添加它，以防它对某人有所帮助。
我也遇到这个错误，但我没有使用microbundle；我使用的是普通的旧 create-react-app，没有任何修改或任何花哨的东西。该错误仅发生在生产构建中；本地开发工作正常。
在用头撞墙一个小时后，我终于注意到我的 IDE 不知何故 auto-imported useEffect 是这样的：
import { useEffect } from "react/cjs/react.development";
而不是这个：
import { useEffect } from "react";
检查以确保您的导入都是正确的。
我通过使用我的浏览器抱怨的特定缩小代码来解决这个问题——在我的例子中，TypeError: (0 , m.useEffect) is not a function——在我的 /build/static/main.blah.js 文件中用 ctrl+f 找到它，观察它附近的代码，然后将其追溯到 /src 中的原始源文件，在那里我发现了错误的导入。
就我而言，这是句法。这是在错误地将 useEffect 函数调用到 DOM 时：
错误的方式加倍戴牙套:
onInput={{inputHandler}}
正确方法：
onInput={inputHandler}
import React, {useEffect } from "react";
试试这个
useEffect( ()=>{} , [] )
而不是
useEffect=( ()=>{} , [] )