Javascript TypeError:（0，_react.useffect）不是函数

在开发环境中，我的应用程序工作正常。 在生产环境中，它会崩溃，并出现以下错误：

未捕获类型错误：（0，\u react.useffect）不是函数

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

import React, { useEffect } from 'react'

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

  ...
}

import React from 'react';

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

在这一行下面添加一个console.log，可以确认在生产环境中useffect确实是未定义的，在开发环境中预期的函数也是未定义的

我检查了我的package.json、warn.lock和node_模块，查看是否有任何react或react dom版本，这些版本可能在16.8.0中引入了useEffect。但所有内容都是16.13.1，它们是主要的依赖项，我尝试清理我的Thread缓存，删除节点_模块&Thread.lock，然后重新安装

我尝试从

peerDependencies

中添加和删除它，但没有成功

我进行了检查，以确保没有两个独立版本的React正在运行，而是在库中保存

window.React1=React

，并在我的应用程序中保存

window.React2=React

，然后进行检查

window.React1===window.React2

这是真的，所以也不是真的

最后，我还尝试对node_模块中的特定别名做出反应，但没有任何运气

我发现唯一有效的解决方案是，如果我这样导入它：

import React, { useEffect } from 'react'

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

  ...
}

import React from 'react';

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

但这应该与使用非结构化导入完全相同？ 如果我确实显式地使用React.useffect，它还会迫使我将所有其他useState和useffect挂钩更改为

React.useffect

和

React.useffect

下一个错误变成：

TypeError:（0，\u react.useState）不是我使用react钩子的另一个文件中的函数

我想解决问题，而不是实施变通办法

我使用
microbundle
使用React绑定我的库。
我使用
packetbundler
导入React组件并在dev环境（直接从src）或prod（绑定库）中呈现它

我使用的捆绑版本与.mjs捆绑在一起

我还检查了minified.mjs bundle的输出，内部React是这样导入的：

import ue，{useffect作为pe，useState作为fe}来自“react”

我觉得很好

我真正不明白的是，经过重组的导入将如何破坏它，但只需执行React.useffect就可以了

这是我的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": "**"
  }
}


同样值得注意的是，这是我唯一的问题。我的所有其他重组导入都很好。
似乎
微bundler
无法容忍反应。这一个创建了试图从全局范围使用
react
的捆绑包，而不是真正公开的
react

出于同样的原因，您使用
React.useffect
的解决方案也能按预期工作，只需想象它看起来像
window.React.useffect

下面是一个基本应用程序的示例：

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'));

正如@Jee Mok正确建议的那样，它将生成正确的包。
我希望评论能解释发生了什么


！函数（e，t）{
“对象”==导出类型&“未定义”！=模块类型？
t（require（“react dom”）、require（“react”）：
“函数”==define&&define.amd的类型？
定义（[“react dom”、“react”]、t）：
t（e.ReactDOM，e.React）；
/*
上面的字符串是问题的核心，
如果您尝试绑定而没有选项“---globals react=react`
它看起来像：`t（e.ReactDOM，e.react）`
显然，`e`e.g.`this`e.g.`窗口中没有定义`react``
由于反应，将自己暴露为“反应”`
*/
}（这是函数（e，t）{
e=e&&e.hasOwnProperty（“默认”）？e.default:e，window.h=（t中的默认值）t.default:t.createElement，e.render（h（函数（）{
变量e=t.useState（“世界”），n=e[0]，r=e[1]；
返回t.useffect（函数（）{
r（“MLyck”）；
}，[]），“你好”+n；
}，null），document.querySelector（“react-app”）；
});
您可以通过以下操作进行修复：

import React, { useState, useEffect } from "react";

使用命名导入与引用默认导出的成员不同。我的猜测是，在开发阶段，你有一些额外的加载器，正在做一些恶作剧来解决模块加载器之间的遗留兼容性问题。你可以尝试
global
标志
--globals react=react
并添加react作为对等依赖项吗？你也可以尝试安装吗microbundle@next看看这个是否有效？只是为了检查它是否确实是当前的微绑定版本问题如果您使用的是TypeScript，您可能还想研究一下这个问题：我猜这是因为在生产构建中使用了
microbundler
而不是
react scripts
，或者某些东西以不好的方式改变了绑定器的配置。我想提请您注意，react hook名称应该以
use
开头，并且可能在这一行中
import ue，{useffect as pe，useState as fe}来自“react”
哪个useffect导入为
pe
react出现问题。那么，您是否尝试过使用
create-react-app
和
react-scripts
构建？