Gatsby: production build causing errors with draft-js

[MunifTanjim]

Test Repository

• Gatsby with draft-js: https://github.com/MunifTanjim/draft-js-tests/tree/gatsby
• CRA with draft-js: https://github.com/MunifTanjim/draft-js-tests/tree/raw

Description

The development server build (yarn start) is working alright.
But on the production build (yarn build), writing on the Editor is causing error.

This is a strange issue. I'm not actually sure why it's happening.

Steps to reproduce

• Clone the test repository: https://github.com/MunifTanjim/draft-js-tests
• Checkout gatsby branch
• Install dependencies: yarn
• Build: yarn build
• Serve: yarn serve
• Visit the site and try to write something on the editor.
• Errors will be logged on console.

Note: These errors doesn't appear on development server build (yarn start)

Expected result

Everything should work alright? :sweat_smile:

Actual result

Something's wrong... :thinking:

Environment

Just like the test repository.

Notes

To ensure that it's a bug with Gatsby and not with draft-js, I've also created a branch named raw (https://github.com/MunifTanjim/draft-js-tests/tree/raw). It contains the same DraftEditor component, but is built with Create React App instead of Gatsby.

It works alright on both development server build and production build.

DraftEditor component:

• https://github.com/MunifTanjim/draft-js-tests/blob/raw/src/DraftEditor.js
• https://github.com/MunifTanjim/draft-js-tests/blob/gatsby/src/components/DraftEditor.js

Live Demo:

• CRA: https://raw--draft-js-tests.netlify.com/
• Gatsby: https://gatsby--draft-js-tests.netlify.com/

[jonniebigodes]

@MunifTanjim i'm cloning the repo as we "speak". I'm going to see if i can help you with a solution for your issue. Do you mind waiting a bit?

Edit: I think i have a solution for your issue, going to run some more tests tomorrow as it's 1am where i'm at and i'll post a detailed answer. Sounds good?

[MunifTanjim]

@jonniebigodes Thanks so much for looking into it... I'll be waiting to hear about your findings... :smiley:

[freiksenet]

Thank you for jumping in @jonniebigodes!

[jonniebigodes]

@MunifTanjim just finished going over it again and below are the steps i took to solve your issue.

• Cloned your repo
• Switched to the gatsby branch and installed the dependencies
• Issued gatsby build && gatsby serve to get a production build and serve it emulating a live version.
• Opened a new browser window to http://localhost:9000 and as soon as i focus in the editor i'm presented with the following.
  

• Started typing and the problem persists as you can see below
  

• Did a bit of "detective work"(pardon the bad pun) and it seems that the package is not server side rendering friendly. Other server side rendering frameworks like for instance next.js suffered from the same issue. Tried a couple of things to get it to work, but no avail.

• Then it hit me, why not move it to "client side rendering".

• With that in mind i've then installed react-loadable and modified index.js to the following.

import React from "react"

import Loadable from 'react-loadable';
import Layout from "../components/layout"
import SEO from "../components/seo"

const LoadableEditor = Loadable({
  loader: () => import('../components/DraftEditor'),
  loading() {
    return <div>Loading...</div>
  }
});
const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
      <LoadableEditor />
  </Layout>
)

export default IndexPage

• Issued gatsby clean to purge the .cache and public folder so that i could get a clean build.
• Issued gatsby build && gatsby serve once again to get a production build.

• Opened a new browser window to http://localhost:9000 and when i focus the component i'm presented with the following:
  

• Started typing and i'm presented with the following:

As you can see the errors have disappeared.

Feel free to provide feedback so that we can close this issue or continue to work on it till we find a solution.

[MunifTanjim]

Thanks for the "detective work"!!! :joy: I absolutely forgot about the SSR part of Gatsby :sweat_smile:

So, the problem actually lies with draft-js after all. I'll probably be opening an issue on facebook/draft-js with your findings....

Thanks so much for suggesting the workaround. I think we can close this issue as it's not actually any bug with Gatsby....

[jonniebigodes]

@MunifTanjim no need to thank, glad i was able to help you solve the issue. Feel free to share the information with them. Probably more people are struggling with this and with this workaround they can solve it and continue to work. Thanks for using Gatsby 👍

[claudiopro]

Thanks for your investigation @MunifTanjim and @jonniebigodes, I'd love to enable Gatsby users. I'll track this on the Draft.js issue opened by Munif

[jonniebigodes]

@claudiopro no need to thank, glad i was able to help out.

[claudiopro]

@jonniebigodes I'm curious about your statement:

the package is not server side rendering friendly. Other server side rendering frameworks like for instance next.js suffered from the same issue

I'll take a look at the commit history of Next.js, but please share any other information you may have on the subject.

[MunifTanjim]

@claudiopro

I'll take a look at the commit history of Next.js,

I think he meant that "Other server side rendering frameworks like for instance next.js suffered from the same issue" on his tests. So, you'll probably find nothing looking at Next.js commit history.

Anyway, Iooked at their issues and found these:

• According to https://github.com/zeit/next.js/issues/1722#issuecomment-354601779, https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/universal/editor.js works. I just tried it with Gatsby and it does!
• I also tested https://github.com/zeit/next.js/issues/1722#issuecomment-296451797 with Gatsby and it works too!

[jonniebigodes]

That was what i meant. Probably not the best choice of words and for that i apologize.

[claudiopro]

Great, thank you both for the investigation! No need to apologize @jonniebigodes, I learned something new 😄