Invariant Violation for renderToString with hooks

[anteloe]

Do you want to request a feature or report a bug?

I want to report a Bug

What is the current behavior?

When a component uses hooks and I try to render it with renderToString() it fails with this error:

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
# stack trace hidden #

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

You can reproduce the problem by cloning this repo and executing the steps in the README.md: https://github.com/anteloe/react-hooks-rendertostring

What is the expected behavior?

renderToString should behave equally for components with hooks as for those without

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

• "react": "^16.8.6",
• "react-dom": "^16.8.6"
• environment: node v10.13.0
• OS: MacOS Mojave, Windows 10

[anteloe]

It was actually a webpack misconfiguration. I forgot to exclude React and ReactDOM from the build.

3. You might have more than one copy of React in the same app

was correct.

If someone should encounter this problem too, this is how you can exclude React and ReactDOM from your build in webpack [https://webpack.js.org/configuration/externals/)(https://webpack.js.org/configuration/externals/):

module.exports = {
// ...
  externals: {
    react: 'react',
    'react-dom': 'react-dom'
  },
// ...
}