'CKEditor 5 online builder is not working in React project

I use CKEditor 5 online builder to insert the CKEditor to a Gatsby site, after npm start, the CKEditor looks like all disabled status, like below image:

Screenshot for CKEditor in Gatsby

You also can use below sandbox to check my code: https://codesandbox.io/s/priceless-benz-wqjoj4?file=/src/components/Text.jsx

Can't I use CKEditor 5 online builder in Gatsby project? I just want to use most easiest way refer from: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html

Do I need config by myself or anything I missed?



Solution 1:[1]

OK, finally, our arch to help me fix this issue. Use "gatsby-plugin-babel-exclude", to exclude ckeditor from babel loader, the code will like below:

{
  resolve: 'gatsby-plugin-babel-exclude',
  options: {
    exclude: require.resolve('ckeditor5-custom-build'),
  },
},

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yan Dong