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

本教程将介绍TypeError:(0,_react.useEffect)不是函数的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

TypeError:(0,_react.useEffect)不是函数 教程 第1张

问题描述

在开发环境中,我的应用程序工作正常。
在生产环境中时,它会崩溃,并显示错误:

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

它发生在我创建的文件中,我在该文件中导入、反应和使用Effect,如下所示:

import React, { useEffect } from 'react'

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

  ...
}

在此行下方添加console.log确认在生产时useEffect确实未定义,在开发时确实未定义预期函数。

我检查了我的Package.json、ya n.lock&node_module是否有任何低于16.8.0(引入了useEffect)的反应或反应-随机版本。但一切都是16.13.1,它们是主要依赖项,我确实尝试清理了我的纱线缓存,删除了node_module&ya n.lock,然后重新安装。

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

我进行了检查,以确保没有两个独立的Reaction版本在运行,但将window.React1 = React保存在库中,window.React2 = React保存在我的应用程序中,并检查

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

最后,我还尝试对node_module中的特定模块进行别名响应,但没有成功。

我发现唯一有效的解决方案是这样导入:

import React from 'react';

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

但这应该与使用非结构化导入完全相同?
如果我确实显式使用了React.useEffect,它还会强制我将所有其他useState和useEffect挂钩更改为React.useSateReact.useEffect

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

我希望解决问题,而不是实施解决办法。

我使用microbundle使用REACT捆绑我的库。
我使用parcel-bundler导入反应组件并在dev环境(直接从src)或prod(捆绑库)中呈现它

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

我还检查了最小化的.mjs包的输出,内部反应是这样导入的:

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": "**"
  }
}

同样值得注意的是,我遇到这个问题的唯一原因是反应。我所有其他结构调整的导入都工作正常。

推荐答案

似乎microbundler不能容忍反应。这将创建试图从全局范围使用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>

顺便说一句,"重组的导入"根本不能归咎于此。

好了关于TypeError:(0,_react.useEffect)不是函数的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。