react: [React Hooks] Webpack transpiled component throws invariant during SSR

What is the current behavior?

UnhandledPromiseRejectionWarning: Invariant Violation: Hooks can only be called inside the body of a function component.
        |     at invariant (webpack://%5Bname%5D_%5Bhash%5D/./node_modules/react/cjs/react.development.js?:125:15)
        |     at resolveDispatcher (webpack://%5Bname%5D_%5Bhash%5D/./node_modules/react/cjs/react.development.js?:1450:28)
        |     at useState (webpack://%5Bname%5D_%5Bhash%5D/./node_modules/react/cjs/react.development.js?:1473:20)

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:

function HookedComponent() {
    var _a = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])("Mary"), name = _a[0], setName = _a[1];
    return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
        react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("h1", null, name),
        react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { value: name, onChange: function (e) { return setName(e.target.value); } })));
}

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 28 (4 by maintainers)

Most upvoted comments

Your code works fine here. You sure you are using both react and react-dom’s latest alpha versions? I forgot to update react-dom initially which resulted in some oddish errors.

+27

hilkeheremans on Oct 25, 2018

It is still not working with latest versions 😦

+20

seeden on Dec 15, 2018

I am afraid, but hook would break any custom react-tree traversal:

apollo
react-hot-loader
loadable-components
async-component
and more and more and more.

theKashey on Oct 26, 2018

I’ve having this same issue but not using SSR. Literally copy/pasted the <Example /> counter component into my existing app. Here’s the transpiled code.

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-dom.development.js:55 Uncaught Error: Hooks can only be called inside the body of a function component.
    at invariant (react-dom.development.js:55)
    at resolveCurrentlyRenderingFiber (react-dom.development.js:11510)
    at useReducer (react-dom.development.js:11707)
    at Object.useState (react-dom.development.js:11701)
    at useState (react.development.js:1474)
    at Example (MyComponent.js:25)
    at ProxyComponent.hotComponentRender (react-hot-loader.development.js:618)
    at ProxyComponent.proxiedRender (react-hot-loader.development.js:635)
    at finishClassComponent (react-dom.development.js:14343)
    at updateClassComponent (react-dom.development.js:14306)

react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0 webpack@4.22 react-hot-loader@4.3.11

dadamssg on Oct 26, 2018

Hooks should work with renderToString. @pheuter are you using Babel with Webpack? If so, what plugins are you using?

aweary on Oct 26, 2018