title: TypeError: (0 , _react.useEffect) is not a function
body: <p>when in the development environment, my app works just fine.
  When in the production environment it crashes with the error:</p>
  
  <p><code>Uncaught TypeError: (0 , _react.useEffect) is not a function</code></p>
  
  <p>It happens in a file I created where I import React and useEffect like so:</p>
  
  <pre><code>import React, { useEffect } from 'react'
  
  const X = () =&gt; {
    useEffect(() =&gt; { ... })
  
    ...
  }
  
  </code></pre>
  
  <p>adding a console.log just below this line confirms that useEffect is indeed undefined when in production and the expected function when in dev.</p>
  
  <p>I checked my package.json, yarn.lock &amp; node_modules for any react or react-dom version that might be under 16.8.0 where useEffect was introduced. But everything is 16.13.1 and they are the main dependency and I did try to clean my yarn cache, delete node_modules &amp; yarn.lock, and re-install.</p>
  
  <p>I tried adding and removing it from <code>peerDependencies</code> without success.</p>
  
  <p>I put in a check to make sure there are not 2 separate versions of React running, but saving <code>window.React1 = React</code> inside the library and <code>window.React2 = React</code> inside my application and checking</p>
  
  <p><code>window.React1 === window.React2</code> it was true, so that's not it either.</p>
  
  <p>Lastly, I also tried to alias React to the specific one in node_modules, but without any luck.</p>
  
  <p>The only solution I've found that works are if I import it like so:</p>
  
  <pre><code>import React from 'react';
  
  const X = () =&gt; {
    React.useEffect(() =&gt; { ... })
    ...
  }
  </code></pre>
  
  <p>But this should be exactly the same as using a destructured import?
  If I do explicitly use React.useEffect it also forces me to change all of my other useState and useEffect hooks to <code>React.useSate</code> and <code>React.useEffect</code></p>
  
  <p>The next error just becomes: <code>TypeError: (0 , _react.useState) is not a function</code> in another file where I use React hooks.</p>
  
  <p>I want to solve the problem not implement a workaround.</p>
  
  <p>I use <code>microbundle</code> to bundle my library using React.
  I use <code>parcel-bundler</code> to import the React-component and render it in a dev environment (directly from src) or prod (the bundled library)</p>
  
  <p>The bundled version I use is bundled with .mjs</p>
  
  <p>I checked the output of the minified .mjs bundle as well and inside React is imported like this:</p>
  
  <p><code>import ue,{useEffect as pe,useState as fe}from"react";</code></p>
  
  <p>Which looks fine to me.</p>
  
  <p>What I really don't understand is how a restructured import would break it, but just doing React.useEffect would work just fine?</p>
  
  <p>Here's my package.json</p>
  
  <pre><code>{
    "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": "**"
    }
  }
  
  </code></pre>
  
  <p>Also worth noting, it's only React I'm having this problem with. All my other restructured imports work just fine.</p>