TypeError: (0, _react.useEffect) bir işlev değil

geliştirme ortamında, benim app gayet iyi çalışıyor. Üretim ortamında hatayla kilitleniyor:

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

React ve useEffect'i içe aktardığım yerde oluşturduğum bir dosyada olur:

import React, { useEffect } from 'react'

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

  ...
}

Bu satırın hemen altına bir console.log eklemek, useEffect'in üretim sırasında gerçekten tanımsız olduğunu ve dev.

UseEffect'in tanıtıldığı 16.8.0'ın altında olabilecek herhangi bir tepki veya tepki sürümü için package.json, yarn.lock & node_modules'umu kontrol ettim. Ama her şey 16.13.1 ve ana bağımlılık ve iplik önbelleğimi temizlemeye, node_modules & yarn.lock'u silmeye ve yeniden kurmaya çalıştım.

peerDependenciesBaşarısız bir şekilde eklemeyi ve kaldırmayı denedim .

React'ın 2 ayrı sürümünün çalışmadığından emin olmak için bir kontrol yaptım, ancak window.React1 = Reactkütüphanenin window.React2 = Reactiçine ve uygulamama kaydetme ve kontrol etme

window.React1 === window.React2 doğruydu, o yüzden de öyle değil.

Son olarak, node_modules içindeki belirli bir React'i taklit etmeye çalıştım, ancak şanssızdı.

Ben işe yaradığını bulduğum tek çözüm, ben böyle ithal:

import React from 'react';

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

Ancak bu, yıkılmış bir içe aktarma kullanmakla tamamen aynı mı olmalıdır? React.useEffect'i açıkça kullanırsam, diğer tüm kullanımlarımı değiştirmem için beni zorlar ve Durum ve useEffect kancaları React.useSateveReact.useEffect

Sonraki hata sadece olur: TypeError: (0 , _react.useState) is not a functionReact kancaları kullandığım başka bir dosyada.

Ben bir çözüm uygulamak değil sorunu çözmek istiyorum.

Kullandığım microbundleTepki kullanarak Kitaplığımı paketlemek için. Kullandığım parcel-bundlerTepki bileşenli ithalat ve (doğrudan src itibaren) bir dev ortamında işlemek veya prod (paketlenmiş kütüphane) için

Kullandığım paket sürümü .mjs ile birlikte geliyor

Minimize edilmiş .mjs paketinin çıktısını da kontrol ettim ve React'ın içi şöyle ithal edildi:

import ue,{useEffect as pe,useState as fe}from"react";

Bu bana iyi geliyor.

Gerçekten anlamadığım şey, yeniden yapılandırılmış bir içe aktarmanın onu nasıl kıracağı, ancak sadece React.useEffect'i yapmak işe yarayacak mı?

İşte benim paketim.

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

Ayrıca kayda değer, bu sorunla karşılaştığım tek tepki. Diğer tüm yeniden yapılandırılmış ithalatlarım iyi çalışıyor.

microbundlerReaksiyona tolerans göstermiyor gibi görünüyor . Bu react, küresel kapsamdan kullanmaya çalışan bir paket oluşturur , bunun yerine Reactgerçekten ortaya çıkar.

Aynı nedenden ötürü geçici çözümünüz React.useEffectbeklendiği gibi çalışıyor, sadece bunun göründüğünü hayal edin window.React.useEffect.

İşte ilkel bir uygulama örneği:

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

Sadece microbundletamamen kırılmış olarak paketledikten sonra , ancak paketlemeye çalıştığınızda

microbundle --globals react=React

Doğru önerdi @Jee Mok, doğru paket üretecek. Umarım yorumlar neler olduğunu açıklar.

!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>

Ve bu arada, "yeniden yapılanma" hiç suçlanmıyor.