TypeError: (0, _react.useEffect) não é uma função

quando no ambiente de desenvolvimento, meu aplicativo funciona perfeitamente. Quando no ambiente de produção, ele falha com o erro:

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

Isso acontece em um arquivo que criei onde importo React e useEffect da seguinte maneira:

import React, { useEffect } from 'react'

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

  ...
}

adicionar um console.log logo abaixo desta linha confirma que useEffect é realmente indefinido quando em produção e a função esperada quando em desenvolvimento.

Eu verifiquei meu package.json, yarn.lock & node_modules em busca de qualquer versão react ou react-dom que possa estar sob 16.8.0 em que useEffect foi introduzido. Mas tudo é 16.13.1 e eles são a principal dependência e eu tentei limpar meu cache de fios, excluir node_modules & yarn.lock e reinstalar.

Tentei adicionar e removê-lo peerDependenciessem sucesso.

Fiz uma verificação para garantir que não haja duas versões separadas do React em execução, mas salvando window.React1 = Reactdentro da biblioteca e window.React2 = Reactdentro do meu aplicativo e verificando

window.React1 === window.React2 era verdade, então também não é.

Por fim, também tentei usar o alias React para o específico em node_modules, mas sem sorte.

A única solução que eu encontrei que funciona é se eu importá-lo assim:

import React from 'react';

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

Mas isso deve ser exatamente o mesmo que usar uma importação desestruturada? Se eu usar explicitamente React.useEffect, isso também me força a alterar todos os meus outros ganchos useState e useEffect para React.useSateeReact.useEffect

O próximo erro se torna: TypeError: (0 , _react.useState) is not a functionem outro arquivo onde eu uso os ganchos do React.

Quero resolver o problema e não implementar uma solução alternativa.

Eu uso microbundlepara agrupar minha biblioteca usando o React. Eu uso parcel-bundlerpara importar o componente React e renderizá-lo em um ambiente de desenvolvimento (diretamente do src) ou prod (a biblioteca empacotada)

A versão empacotada que eu uso é empacotada com .mjs

Verifiquei também a saída do pacote compactado .mj e o React é importado da seguinte maneira:

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

O que parece bom para mim.

O que realmente não entendo é como uma importação reestruturada a quebraria, mas apenas fazer React.useEffect funcionaria bem?

Aqui está o meu package.json

{
  "name": "xxx",
  "version": "1.1.4",
  "repository": "[email protected]: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": "**"
  }
}

Também digno de nota, é apenas o React que estou tendo esse problema. Todas as minhas outras importações reestruturadas funcionam muito bem.

Parece que microbundlernão tolera reagir. Este cria um pacote que tenta usar reactdo escopo global, em vez Reactdisso realmente exposto.

Pela mesma razão que sua solução alternativa React.useEffectfunciona conforme o esperado, imagine que ela se parece window.React.useEffect.

Aqui está um exemplo de um aplicativo primitivo:

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

Depois de empacotar com apenas microbundlecompletamente quebrado, mas quando você tenta empacotar com

microbundle --globals react=React

como sugere corretamente @Jee Mok, ele produzirá o pacote correto. Espero que os comentários expliquem o que aconteceu.

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

E, a propósito, "importação reestruturada" não tem culpa.