html-to-draftjs

html-to-draftjs copied to clipboard

1. So if I import htmlToDraft like this import htmlToDraft from "html-to-draftjs";

2. I am getting error Window is not defined So I did const htmlToDraft = dynamic( () => import("draftjs-to-html").then((mod) => mod.htmlToDraft), { ssr: false } );

3. Then error is not coming but when I use it like `useEffect(() => { props.getDescription().then((res) => { // console.log(res.data); const blocksFromHtml = htmlToDraft(res.data); const { contentBlocks, entityMap } = blocksFromHtml; const contentState = ContentState.createFromBlockArray( contentBlocks, entityMap ); setEditor(EditorState.createWithContent(contentState));

   }); }, []);`

Error is coming: TypeError: htmlToDraft is not a function

@jpuri Can you help me?

Same problem in [email protected]

any solution? I have the same problem

I have the same problem too :-(

One alternative is using JSON format instead of HTML. And that JSON data can then be converted to HTML whenever required.

What I did was use version 1.4.0 and directly import with import htmlToDraft from "html-to-draftjs";

I have the same problem with Next.js (apparently so does everyone else). Neither direct import works, nor using the Dynamic import.

@OssiPesonen Switching to version 1.4.0 worked for me

@OssiPesonen Switching to version 1.4.0 worked for me

Yes, downgrading back from 1.5.0 to 1.4.0 worked. Thanks!

Downgrading worked. Can confirm. Use 1.4.0.

1.4.0 worked without dynamic import in development. Throwing "window is not defined" in production.

You can load as below:

useEffect(() => {
    htmlToDraft = require('html-to-draftjs').default
  }, [])

I use version 1.5.0. package.json has this "html-to-draftjs": "^1.5.0",

I use like this in nextjs and its working (Note: nextjs dynamic didn't work for me)

Top of the page, just below imports

let htmlToDraft = null;
if (typeof window === 'object') {
  htmlToDraft = require('html-to-draftjs').default;
}

Nextjs 12* with TS

I downgraded to v1.4.0 and directly imported with import htmlToDraft from "html-to-draftjs;

and after

const EditorComponent = () => {
...

let contentBlock: any;

if(process.browser){

   if(typeof window !== "undefined"){
       contentBlock = htmlToDraft(html);
   }
   
}

...
}

export default EditorComponent;

The draft-js package has convertFromHTML method which can be used instead of htmlToDraft.

import { convertFromHTML } from 'draft-js';

...

const blocksFromHTML = convertFromHTML(content);

import { convertFromHTML } from 'draft-js';

omg Thanks man! 😭 Can't believe I've been wasting my time on this