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

It seem that microbundler does not tolerate to React. This one create bundle that attempt to use react from global scope, instead React that really exposed.

For the same reason your workaround with React.useEffect works as expected, just imagine that it looks like window.React.useEffect.

Here is an example of a primitive application:

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

After bundling with just microbundle it completely broken, but when you try to bundle with

microbundle --globals react=React

as correctly suggest @Jee Mok, it will produce correct bundle. I hope comments will explain what happened.

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

And, by the way, "restructured import " not at all to blame.

You can fix it by doing:

import React, { useState, useEffect } from "react";

This answer is not for the exact circumstances of the asker, but a possible (albeit very unlikely) solution to the error message in the question title. Since this page is the only result on Google about the error message, I wanted to add this, just in case it helped someone.

I encountered this error too, but I am not using microbundle; I'm using plain old create-react-app with no modifications or anything fancy. The error was only happening in production builds; local development worked fine.

After bashing my head against the wall for an hour, I finally noticed that somehow my IDE had incorrectly auto-imported useEffect like this:

import { useEffect } from "react/cjs/react.development";

instead of this:

import { useEffect } from "react";

Check to make sure your imports are all correct.

I figured this out by taking the specific minified code my browser was complaining about -- in my case, TypeError: (0 , m.useEffect) is not a function -- finding it with ctrl+f in my /build/static/main.blah.js file, observing what code was near it, then tracing it back to the original source file in /src where I discovered the bad import.

i got this error message, but in my case was:

import React, {useEffect } from "react";

try this

useEffect( ()=>{} , []  )

instead of

useEffect=( ()=>{} , []  )