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=( ()=>{} , [] )