-
Notifications
You must be signed in to change notification settings - Fork 77
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support for SSR #58
Comments
Update: While this is being patched you can add the following to your exports.onCreateWebpackConfig = ({ stage, actions, loaders }) => {
if (stage === 'build-html') {
actions.setWebpackConfig({
module: {
rules: [
{
test: /react-editor-js/,
use: loaders.null(),
},
{
test: /@editorjs/,
use: loaders.null(),
},
],
},
});
}
}; You can read more about this code here: https://www.gatsbyjs.org/docs/debugging-html-builds/#fixing-third-party-modules |
I've been using NextJS and SSR with Editor JS and this works for me
|
Hey @Moikapy, Can you please share the code? I copied your above snippet in an
Thanks |
I use example :
|
This is an open issue with @editorjs codex-team/editor.js#1036 |
NextJS has a function to ensure that React components work properly with dynamic imports. Something like this should work in theory: import dynamic from "next/dynamic";
const EditorJs = dynamic(() => import("react-editor-js"));
// Use EditorJs as component |
This should work: const EditorJs = dynamic(() => import("react-editor-js"), {
ssr: false,
loading: () => <p>loading editor.js ...</p>,
}); |
This will work @nithinkashyapn |
Hi guys, question, editor is ok now, but, when i try to load a plugin, app crashes, asking for "window" again |
Make editor in another component and import it in your main page as a dynamic component this is working fine while ssr and without any type error because importing react-editor-js as a dynamic component it loses its type definitions eg: my Editor component ( RTE.tsx ) import EditorJs from "react-editor-js";
import { EDITOR_JS_TOOLS } from "./constants";
export default function RTE_Component() {
return (
<EditorJs
tools={EDITOR_JS_TOOLS}
data={[
time: 1556098174501,
blocks: [{ type: "header", data: { text: "Guides", level: 2 } }],
version: "2.12.4",
]}
inlineToolbar={true}
hideToolbar={true}
/>
);
} my index.tsx import dynamic from "next/dynamic";
import Head from "next/head";
const RTE_Component = dynamic(() => import("components/RTE"), { ssr: false });
export default function Home() {
return (
<>
<Head>Localhost - Home</Head>
<form action="http://localhost:3000/api/post" method="post">
<RTE_Component />
</form>
</>
);
} |
@bilordigor the solution by @zakiAzfar helps with the plugins as well: plugins have to be imported and configured in the component imported dynamically with ssr disabled. |
Using the require statement in the import {useEffect} from 'react'
export default function editor() {
useEffect(() => {
const Editorjs = require('@editorjs/editorjs')
new Editorjs('editorjs')
}, [])
return(
<div id='editorjs'></div>
)
} |
Make the editorJS a child component, then you just need to import dynamically in your pages. |
I am also running into issues in running nextJs with this editorComponent.
and it should work, but it doesn't which is weird ... RE:EDIT: Actually it works now. I have downgraded to version 1.9.0. I was running in version 2. So maybe there is something wrong with version 2. Error is something like
|
This worked for me using the newest version. Editor.tsx import { useCallback, useRef } from "react";
import { createReactEditorJS } from "react-editor-js";
const Editor = () => {
const ReactEditorJS = createReactEditorJS();
const editorJS = useRef(null);
const handleInitialize = useCallback((instance) => {
editorJS.current = instance;
}, []);
const handleSave = useCallback(async () => {
const savedData = await editorJS.current.save();
}, []);
return <ReactEditorJS onInitialize={handleInitialize} />;
};
export default Editor; index.tsx import React from "react";
import dynamic from "next/dynamic";
const EditorJs = dynamic(() => import("./Editor"), {
ssr: false,
});
const index = () => {
return <EditorJs />;
};
export default index; |
If I need initial data on ssr ? |
react-editor-js is support SSR partially.
|
|
How to do dynamic import in nextjs 13 beta version?
|
Anyone tried rendering multiple holders with dynamic divs/holder ids? - If I disable SSR I get TypeError:EditorJS is not a constructor. |
@Chiranjeev-droid If anyone else knows better approach for Next 13-14, please share and tag me
P.S. Don't forget to set position of holder to relative |
Hello.
This module doesn't support server side rendering.
When building on Netlify or on local production, I get an error that says "'window' is not available during server side rendering", and a bunch of code that is returned from the EditorJS plugin(s).
This is how I currently fixed this:
Even though this works, it's very 'hacky'. Please fix this.
I'm using GatsbyJS version 2.23.12.
The text was updated successfully, but these errors were encountered: