useLayoutEffect does nothing on the server

[tavurth]

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

Bug report

What's the current behavior?

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.
    in Text
    in Text
    in Fragment
    in Children
    in div
    in CustomElement
    in Context.Provider
    in Element
    in Element
    in Fragment
    in Children
    in div
    in Context.Provider
    in Editable (at slate-text-area.js:23)

I see the information about a working JS fiddle, but since this is a Server Side Rendering issue, I'll not be able to do that easily. Basically run any test (jest) or run a next.js render against any of the new slate.js components and you'll get a lot of error spam in your console.

I've created a small gist, which can be found here.

What's the expected behavior?

That slate.js will render on Server Side Rendering

[tavurth]

For now I've fixed this by using the following snippet wherever I use slate.js:

// TODO: Remove @slate.js update
// Prevent annoying error messages because
// slate has not updated their library to be SSR ready
if (typeof process !== 'undefined' && process.browser !== true) {
  React.useLayoutEffect = React.useEffect;
}

process.browser here refers to next.js, if you're not using next.js then please be sure write your own browser test.

[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]

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.