TypeError: (0, _react.useEffect) ไม่ใช่ฟังก์ชัน

เมื่ออยู่ในสภาพแวดล้อมการพัฒนาแอพของฉันทำงานได้ดี เมื่ออยู่ในสภาพแวดล้อมการผลิตจะเกิดข้อผิดพลาด:

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

มันเกิดขึ้นในไฟล์ที่ฉันสร้างขึ้นที่ฉันนำเข้า React และ useEffect ดังนี้:

import React, { useEffect } from 'react'

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

  ...
}

เพิ่ม console.log ด้านล่างบรรทัดนี้ยืนยันว่า useEffect ไม่ได้กำหนดแน่นอนเมื่ออยู่ในการผลิตและฟังก์ชั่นที่คาดหวังเมื่ออยู่ใน dev

ฉันตรวจสอบ package.json, yarn.lock & node_modules ของฉันสำหรับรุ่น react หรือ react-dom ใด ๆ ที่อาจต่ำกว่า 16.8.0 ซึ่งมีการใช้ useEffect แต่ทุกอย่างคือ 16.13.1 และพวกเขาเป็นผู้อ้างอิงหลักและฉันพยายามทำความสะอาดแคชเส้นด้ายของฉันลบ node_modules & yarn.lock และติดตั้งใหม่

ฉันพยายามเพิ่มและลบออกpeerDependenciesโดยไม่ประสบความสำเร็จ

ฉันทำการตรวจสอบเพื่อให้แน่ใจว่าไม่มี React ที่ทำงานอยู่ 2 เวอร์ชันแยกกัน แต่บันทึกwindow.React1 = Reactในไลบรารีและwindow.React2 = Reactในแอปพลิเคชันและการตรวจสอบของฉัน

window.React1 === window.React2 มันเป็นความจริงดังนั้นมันจึงไม่ใช่อย่างนั้น

สุดท้ายฉันก็พยายามใช้นามแฝงทำปฏิกิริยากับสิ่งที่ระบุใน node_modules แต่ไม่มีโชคใด ๆ

ทางออกเดียวที่ฉันพบว่าใช้งานได้ถ้าฉันนำเข้ามันอย่างนั้น:

import React from 'react';

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

แต่สิ่งนี้ควรตรงกับการใช้การนำเข้าที่ถูกทำลายหรือไม่ ถ้าฉันใช้ React.useEffect อย่างชัดเจนมันก็บังคับให้ฉันเปลี่ยน useState อื่น ๆ ของฉันทั้งหมดและ useEffect hooks ไปที่React.useSateและReact.useEffect

ข้อผิดพลาดต่อไปจะกลายเป็น: TypeError: (0 , _react.useState) is not a functionในไฟล์อื่นที่ฉันใช้ React hooks

ฉันต้องการแก้ปัญหาที่ไม่ได้ใช้วิธีการแก้ปัญหา

ฉันใช้microbundleเพื่อรวมห้องสมุดของฉันโดยใช้ React ฉันใช้parcel-bundlerเพื่อนำเข้าส่วนประกอบ React และแสดงมันในสภาพแวดล้อม dev (โดยตรงจาก 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": "**"
  }
}

นอกจากนี้ยังมีข้อควรระวังมันเป็นเพียงการตอบสนองฉันมีปัญหานี้ด้วย การนำเข้าที่ปรับโครงสร้างแล้วอื่น ๆ ทั้งหมดของฉันทำงานได้ดี

ดูเหมือนว่าmicrobundlerจะไม่ทนต่อการตอบสนอง อันนี้สร้างชุดที่พยายามใช้reactจากขอบเขตส่วนกลางแทนที่Reactเปิดเผยจริง ๆ

ด้วยเหตุผลเดียวกันการแก้ปัญหาของคุณด้วยการทำงานตามที่คาดไว้เพียงแค่คิดว่ามันดูเหมือนว่าReact.useEffectwindow.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>

และโดยวิธีการ "นำเข้าที่ปรับโครงสร้างใหม่" ไม่ได้เลยที่จะตำหนิ