Uncaught Error: Invalid hook call.

[tavurth]

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

Bug report

What's the current behavior?

I have a simple functional editor and it throws an error:

react.development.js:1590 Uncaught Error: 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

You can find an example in this gist.

_app.js:7 Uncaught Error: 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.
    at resolveDispatcher (react.development.js:1590)
    at useState (react.development.js:1618)
    at Slate (index.es.js:1218)
    at renderWithHooks (react-dom.development.js:12938)
    at mountIndeterminateComponent (react-dom.development.js:15020)
    at beginWork (react-dom.development.js:15625)
    at performUnitOfWork (react-dom.development.js:19312)
    at workLoop (react-dom.development.js:19352)
    at renderRoot (react-dom.development.js:19435)
    at performWorkOnRoot (react-dom.development.js:20342)
    at performWork (react-dom.development.js:20254)
    at performSyncWork (react-dom.development.js:20228)
    at requestWork (react-dom.development.js:20097)
    at scheduleWork (react-dom.development.js:19911)
    at scheduleRootUpdate (react-dom.development.js:20572)
    at updateContainerAtExpirationTime (react-dom.development.js:20600)
    at updateContainer (react-dom.development.js:20657)
    at ReactRoot.dll_5439202ae7e819b36e92../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:20953)
    at react-dom.development.js:21090
    at unbatchedUpdates (react-dom.development.js:20459)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:21086)
    at Object.hydrate (react-dom.development.js:21148)
    at renderReactElement (index.js:31)
    at _callee4$ (index.js:35)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:5)
    at _next (asyncToGenerator.js:27)
    at asyncToGenerator.js:34
    at new Promise (<anonymous>)
    at new F (_export.js:36)
    at asyncToGenerator.js:23
    at _doRender (index.js:35)
    at doRender (index.js:31)
    at _callee2$ (index.js:23)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:5)
    at _next (asyncToGenerator.js:27)
    at asyncToGenerator.js:34
    at new Promise (<anonymous>)
    at new F (_export.js:36)
    at asyncToGenerator.js:23
    at _render (index.js:23)
    at render (index.js:20)
    at _callee$ (index.js:20)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)

What's the expected behavior?

Should not throw this error

[tavurth]

Note: This error occurs because I have a library which contains all of my components. My structure is something like this:

projects
├── library-of-components
└── main-project-directory

Then when I do:

import { MySlateComponent } from '@my-corp/library-of-components'

I get these hook errors, I do not get these errors when I move the file into my main project.

[tavurth]

The above error seems to have been caused because I was using yarn link @my-corp/library-of-components

[tavurth]

facebook/react#14257

Fixed by adding:

...
resolve: {
  alias: {
    react: require.resolve('react')
  } 
}
...

To my projects webpack configuration.
Sorry for the issue, this is my bug.

[dan-scale]

@tavurth Thank you this led me to figuring out my problem.
If anyone is using slatejs with next.js you can set this webpack config using config.resolve.alias.react = require.resolve('react'); inside next.config.js