html-to-draftjs icon indicating copy to clipboard operation
html-to-draftjs copied to clipboard

window is not defined in 1.5.0

Open ahoys opened this issue 4 years ago • 15 comments

All of our testing environments broke down because of the recent changes. This is the error that appears on launch:

    at Object.<anonymous> (/opt/webui/node_modules/html-to-draftjs/dist/html-to-draftjs.js:1:335)
    at Module._compile (module.js:570:32)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (/opt/webui/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)

The issue can be resolved by returning to version 1.4.0.

ahoys avatar Dec 09 '19 11:12 ahoys

@ahoys : error is not clear from above stack, can you plz add more details.

jpuri avatar Dec 09 '19 13:12 jpuri

Here's a snippet of the dist-code that is causing the crash:

c:\git\*****\dist\node_modules\html-to-draftjs\dist\html-to-draftjs.js:1 
(function (exports, require, module, __filename, __dirname) 
{ !function(e,t){"object"==typeof exports&&"object"==typeof module?
module.exports=t(require("immutable"),require("draft-js")):"function"==typeof define&&define.amd?
define(["immutable","draft-js"],t):"object"==typeof exports?
exports.htmlToDraftjs=t(require("immutable"),require("draft-
js")):e.htmlToDraftjs=t(e.immutable,e["draft-js"])}(window,function(n,r){return o={},i.m=a=[function(e,t)
{e.exports=n},function(e,t){e.exports=r},function(e,t,n){e.exports=n(3)},function(e,t,n){"use 
strict";n.r(t);var v=n(1),u=n(0),s=function(e){var t,n=null;return 
document.implementation&&document.implementation.createHTMLDocument&&
((t=document.implementation.createHTMLDocument("foo")).documentElement.innerHTML=e,n=t.get
ElementsByTagName("body")[0]),n},x=function(e,t,n){var r,i=e.textContent;return""===i.trim()?{chunk:
(r=n,{text:" ",inlines:[new u.OrderedSet],entities:[r],blocks:[]})}:{chun

This is how we use the package: const blocksFromHTML = htmlToDraft(value);, value being a string, but it actually crashes well before the package is even used, in compilation when the App is started.

Our app is isomorphic (SSR) which is probably related as the server doesn't have a window object.

Here are our other draft-js related versions, although I'm not sure how could these interfere html-to-draftjs:

    "draft-js": "0.10.5",
    "draft-js-export-html": "1.4.1",
    "draft-js-plugins-editor": "2.1.1",
    "draft-js-utils": "1.4.0",

And I'd like to emphasize that no changes were made to our code before the crash. Our testing environments simply updated the package to 1.5.0

If I'd have to guess, some of the updated dependencies in the new version caused this.

ahoys avatar Dec 09 '19 13:12 ahoys

Downgrading to 1.4 is a temporary fix for those wondering

pfftdammitchris avatar Dec 09 '19 20:12 pfftdammitchris

SSR mode broken.

Fi1osof avatar Dec 10 '19 08:12 Fi1osof

This lib requires document object check.

That is how it always worked, as I upgraded webpack its breaking the build. I am not sure how this worked with SSR previously.

jpuri avatar Dec 10 '19 12:12 jpuri

Having the same problem. Had to set explicit version for react-draft-wysiwyg as well.

sebastianoblom avatar Dec 16 '19 08:12 sebastianoblom

I have a same issue. Any solutions for this issue so far?

caobaloc12 avatar Jan 28 '20 15:01 caobaloc12

@locronaldo

Solutions include:

  • render the wysiwyg only in environments with access to window
  • downgrade to 1.4.0 as noted in the parent comment

imjared avatar Jan 28 '20 16:01 imjared

If you are using Next.js you can import it like this:

import dynamic from 'next/dynamic'
const htmlToDraft = dynamic(() => import('html-to-draftjs'), { ssr: false })

matiastucci avatar Aug 06 '20 14:08 matiastucci

dynamic(() => import('html-to-draftjs'), { ssr: false })

Hat tips to you sir!

Update: not working for me in TS with next.js :(

Removing node_modules and setting package.json to:

    "html-to-draftjs": "1.4.0",

Was the only thing that worked for me

mattpetters avatar Sep 11 '20 17:09 mattpetters

"html-to-draftjs": "1.4.0", is only way to go for NEXT.JS with typescript

you should also import normally not dynamic.

igunultas avatar Dec 25 '20 18:12 igunultas

"html-to-draftjs": "1.4.0", is only way to go for NEXT.JS with typescript

you should also import normally not dynamic.

Yup, but in this case it fails with the current react-draft-wysiwyg's version (1.14.7) which has html-to-draftjs version as a dependency.

adrianbona avatar Mar 02 '22 17:03 adrianbona

Since downgrading to 1.4.0 causes version incompatibilities I found this to be the only option working for me with Next.js and ts const htmlToDraft = typeof window === 'object' && require('html-to-draftjs').default;

lizooo avatar Jun 07 '22 10:06 lizooo

Since downgrading to 1.4.0 causes version incompatibilities I found this to be the only option working for me with Next.js and ts const htmlToDraft = typeof window === 'object' && require('html-to-draftjs').default;

This is the only thing that worked for me. Thanks!

Hatem902 avatar Feb 27 '23 15:02 Hatem902

Since downgrading to 1.4.0 causes version incompatibilities I found this to be the only option working for me with Next.js and ts const htmlToDraft = typeof window === 'object' && require('html-to-draftjs').default;

thank you very much...that worked for me 👍🏼

kordkheili avatar May 25 '23 14:05 kordkheili