-
Notifications
You must be signed in to change notification settings - Fork 46.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[React Hooks] Webpack transpiled component throws invariant during SSR #13972
Comments
Could you paste your original (untranspiled) code here as well? |
import { useState } from "react";
function HookedComponent() {
const [name, setName] = useState("Mary");
return (
<div>
<h1>{name}</h1>
<input value={name} onChange={e => setName(e.target.value)} />
</div>
);
}
export default HookedComponent; |
Your code works fine here. You sure you are using both |
Both are on the alpha version. I suspect it might have something to do with how Webpack is transpiling it. |
Maybe -- I should note I'm also running Webpack, but more indirectly using CRA 2.0 after manually upgrading the react and react-dom versions.. |
Perhaps also worth noting on my end that this error occurs during a server-side render call from |
This is interesting because it works on the browser if I hot load the component in, but crashes the |
Well, that makes sense now... I can totally imagine that SSR support is not there yet. |
Hooks should work with |
I've having this same issue but not using SSR. Literally copy/pasted the function Example() {
var _useState = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(0),
_useState2 = Object(_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_0__["default"])(_useState, 2),
count = _useState2[0],
setCount = _useState2[1]; // Similar to componentDidMount and componentDidUpdate:
Object(react__WEBPACK_IMPORTED_MODULE_1__["useEffect"])(function () {
// Update the document title using the browser API
document.title = "You clicked ".concat(count, " times");
});
return react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("p", null, "You clicked ", count, " times"), react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("button", {
onClick: function onClick() {
return setCount(count + 1);
}
}, "Click me"));
}
react@16.7.0-alpha.0 |
@dadamssg do you get the same error if you remove |
I got the same issue as @dadamssg yesterday, narrowed it down to being something that |
Can't say anything to SSR, but hot loader definitely doesn't work. When I replace the |
@aweary @bkniffler Removed Edit: Not using Babel |
Might be, I'm also using typescript, but through babel, and I'm not having issues after removing hot loader. |
Switched over to using babel-loader, same invariant violation thrown when doing Should note that the same exact app works fine when I avoid rendering the function component on the server and only render it on the client. |
Looks like it has something to do with rendering the app tree during await getDataFromTree(<App />); |
I am afraid, but hook would break any custom react-tree traversal:
|
@pheuter Having the exact same issue. Everything works on client, breaks on server. Using Typescript, babel (after ts-loader), webpack, @theKashey Ah that would make so much sense! Would be |
Closing in favor of #14022. |
Hi @pheuter, |
@nassimbenkirane This issue was fixed earlier for me in a separate library that I was using, specifically getDataFromTree from |
Thanks for your answer :) I'm gonna have to find why it breaks |
It is still not working with latest versions :( |
For us was |
Those using Parcel will need to update react-hot-loader. |
For any react-hot-loader related issues please one an issue in RHL project. |
What is the current behavior?
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
16.7.0-alpha.0
This is what the component looks like after it's transpiled by Webpack:
The text was updated successfully, but these errors were encountered: