slate-html-serializer + nextjs issue with server side rendering

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

Report a bug

What’s the current behavior?

Step to reproduce the bug: Create a nextJS project

 npx create-next-app

Install slate

npm install -save slate
npm install -save slate-html-serializer
# for some reason immutable is required
npm install -save immutable

Create a component using slate-html-serialize based on that tutoriel: https://docs.slatejs.org/walkthroughs/saving-and-loading-html-content

Get this error

Error: The native `DOMParser` global which the `Html` serializer uses by default is not present in this environment. You must supply the `options.parseHtml` function instead.

Then import jsdom as explained in the documentation

npm install -save jsdom

Use it

const html = new Html({ rules,parseHtml: JSDOM.fragment })

Get this error (I guess it’s related to server-side rendering)

compiling ...
[ error ] ./node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js
Module not found: Can't resolve 'child_process' in '/home/venom/w/slate-nextjs/node_modules/jsdom/lib/jsdom/living'
ModuleNotFoundError: Module not found: Error: Can't resolve 'child_process' in '/home/venom/w/slate-nextjs/node_modules/jsdom/lib/jsdom/living'
    at factory.create (/home/venom/w/slate-nextjs/node_modules/webpack/lib/Compilation.js:888:10)
    at factory (/home/venom/w/slate-nextjs/node_modules/webpack/lib/NormalModuleFactory.js:401:22)
    at resolver (/home/venom/w/slate-nextjs/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/home/venom/w/slate-nextjs/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /home/venom/w/slate-nextjs/node_modules/neo-async/async.js:2830:7
    at /home/venom/w/slate-nextjs/node_modules/neo-async/async.js:6877:13
    at normalResolver.resolve (/home/venom/w/slate-nextjs/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
    at doResolve (/home/venom/w/slate-nextjs/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
    at hook.callAsync (/home/venom/w/slate-nextjs/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/home/venom/w/slate-nextjs/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at resolver.doResolve (/home/venom/w/slate-nextjs/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (/home/venom/w/slate-nextjs/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/home/venom/w/slate-nextjs/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at hook.callAsync (/home/venom/w/slate-nextjs/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/home/venom/w/slate-nextjs/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at resolver.doResolve (/home/venom/w/slate-nextjs/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)

Side note

I built a simple public repository so you guys can have a look at the code: https://github.com/we-are-venom/slate-nextjs/

The editor: https://github.com/we-are-venom/slate-nextjs/blob/master/components/rich-editor.js

[minimaluminium]

Happened to me recently. I ended up loading the component only on the client side.

const Editor = dynamic(() => import('../../components/Editor'), {
  ssr: false
})

[ianstormtaylor]

As of https://github.com/ianstormtaylor/slate/pull/3093 (which was just merged), I believe this issue is no longer applicable, because a lot has changed. I’m going through and closing out any potential issues that are not out of date with the overhaul. Thanks for understanding.