SSR support #1869
Replies: 27 comments 2 replies
-
|
Hello Noah. Could you connect editor js to nextjs ? Im trying the cdn as you said but im not able to make it work. If you can give a little insight, maybe at this time you already make it work on next. |
Beta Was this translation helpful? Give feedback.
-
|
@noahniuwa you need to wrap the editor as a component as make it ssr false through dynamic import method provided by Next.js. I got the same problem before. you may follow like this Now in the editor you can start adding configs and tool options as per your requirements. |
Beta Was this translation helpful? Give feedback.
-
|
There is a similar problem in importing in the GatsbyJs project. It works fine in localhost with normal importing. But, at gatsby build it occurs an ssr issue. I solved it for my gatsby js project like this: import the EditorJs component by for more details, check gatsby js official documentation |
Beta Was this translation helpful? Give feedback.
-
|
I believe the problem is that the distributed editor.js package module ( A simple fix is to import editor.js dynamically. Here is a simple wrapper we use for React: import * as React from "react";
import { EditorConfig } from "@editorjs/editorjs";
interface EditorJsWrapperProps extends React.ComponentProps<"div"> {
config?: EditorConfig;
}
export default function EditorJsWrapper({
config = {},
...restProps
}: EditorJsWrapperProps): JSX.Element {
const elmtRef = React.useRef<HTMLDivElement>();
React.useEffect(() => {
if (!elmtRef.current) {
return;
}
let editorJs;
(async () => {
const { default: EditorJS } = await import("@editorjs/editorjs");
editorJs = new EditorJS({
...config,
holder: elmtRef.current,
});
})().catch((error): void => console.error(error));
return (): void => {
editorJs.destroy();
};
}, [config]);
return (
<div
{...restProps}
ref={(elmt): void => {
elmtRef.current = elmt;
}}
/>
);
}A proper fix would be to check if editor.js never access |
Beta Was this translation helpful? Give feedback.
-
|
@neSpecc, @tkesgar mentions that we need a check on Editor.js itself if |
Beta Was this translation helpful? Give feedback.
-
|
@tkesgar I am using the Editor in Angular, I have the same issue when building for SSR. Because it fails even when the window object is under the globals; |
Beta Was this translation helpful? Give feedback.
-
|
I don't remember the exact part of code that causes the issue, but I looked for editor.js/src/components/utils.ts Lines 166 to 174 in 33be205 |
Beta Was this translation helpful? Give feedback.
-
|
Ran into this problem when building a statically rendered SvelteKit app. The build process fails because the package is trying to load |
Beta Was this translation helpful? Give feedback.
-
|
I am using Angular 11, and I get the window error during ssr only when define |
Beta Was this translation helpful? Give feedback.
-
|
Hello, I have integrated editor.js in my Angular SSR. when I was trying to load the editor route, the node server encountered an error saying The complete log goes here... ERROR Error: Uncaught (in promise): ReferenceError: self is not defined
ReferenceError: self is not defined
at Object.8941 (C:\home\site\wwwroot\vendors-node_modules_editorjs_code_dist_bundle_js-node_modules_editorjs_editorjs_dist_editor_-77895d.js:1:492565)
at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
at Object.9353 (C:\home\site\wwwroot\src_app_shared_fluent-ui_editorjs_editorjs_component_ts-src_app_shared_fluent-ui_editorjs_edi-493a3d.js:1:2836)
at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
at Module.2913 (C:\home\site\wwwroot\src_app_questions_qsingle_qsingle_module_ts.js:1:6433)
at Function.__webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976150)
at Object.onInvoke (C:\home\site\wwwroot\main.js:1:470317)
at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976046)
at Zone.run (C:\home\site\wwwroot\main.js:1:1968989)
at resolvePromise (C:\home\site\wwwroot\main.js:1:1990849)
at resolvePromise (C:\home\site\wwwroot\main.js:1:1989864)
at C:\home\site\wwwroot\main.js:1:1992718
at ZoneDelegate.invokeTask (C:\home\site\wwwroot\main.js:1:1976992)
at Object.onInvokeTask (C:\home\site\wwwroot\main.js:1:469995)
at ZoneDelegate.invokeTask (C:\home\site\wwwroot\main.js:1:1976882)
at Zone.runTask (C:\home\site\wwwroot\main.js:1:1970002)
at drainMicroTaskQueue (C:\home\site\wwwroot\main.js:1:1980199) {
rejection: ReferenceError: self is not defined
at Object.8941 (C:\home\site\wwwroot\vendors-node_modules_editorjs_code_dist_bundle_js-node_modules_editorjs_editorjs_dist_editor_-77895d.js:1:492565)
at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
at Object.9353 (C:\home\site\wwwroot\src_app_shared_fluent-ui_editorjs_editorjs_component_ts-src_app_shared_fluent-ui_editorjs_edi-493a3d.js:1:2836)
at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
at Module.2913 (C:\home\site\wwwroot\src_app_questions_qsingle_qsingle_module_ts.js:1:6433)
at Function.__webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976150)
at Object.onInvoke (C:\home\site\wwwroot\main.js:1:470317)
at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976046)
at Zone.run (C:\home\site\wwwroot\main.js:1:1968989),
promise: ZoneAwarePromise [Promise] {
__zone_symbol__state: 0,
__zone_symbol__value: ReferenceError: self is not defined
at Object.8941 (C:\home\site\wwwroot\vendors-node_modules_editorjs_code_dist_bundle_js-node_modules_editorjs_editorjs_dist_editor_-77895d.js:1:492565)
at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
at Object.9353 (C:\home\site\wwwroot\src_app_shared_fluent-ui_editorjs_editorjs_component_ts-src_app_shared_fluent-ui_editorjs_edi-493a3d.js:1:2836)
at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
at Module.2913 (C:\home\site\wwwroot\src_app_questions_qsingle_qsingle_module_ts.js:1:6433)
at Function.__webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976150)
at Object.onInvoke (C:\home\site\wwwroot\main.js:1:470317)
at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976046)
at Zone.run (C:\home\site\wwwroot\main.js:1:1968989)
},
zone: Zone {
_parent: Zone {
_parent: null,
_name: '<root>',
_properties: {},
_zoneDelegate: [ZoneDelegate]
},
_name: 'angular',
_properties: { isAngularZone: true },
_zoneDelegate: ZoneDelegate {
_taskCounts: [Object],
zone: [Circular],
_parentDelegate: [ZoneDelegate],
_forkZS: null,
_forkDlgt: null,
_forkCurrZone: null,
_interceptZS: null,
_interceptDlgt: null,
_interceptCurrZone: null,
_invokeZS: [Object],
_invokeDlgt: [ZoneDelegate],
_invokeCurrZone: [Circular],
_handleErrorZS: [Object],
_handleErrorDlgt: [ZoneDelegate],
_handleErrorCurrZone: [Circular],
_scheduleTaskZS: [Object],
_scheduleTaskDlgt: [ZoneDelegate],
_scheduleTaskCurrZone: [Circular],
_invokeTaskZS: [Object],
_invokeTaskDlgt: [ZoneDelegate],
_invokeTaskCurrZone: [Circular],
_cancelTaskZS: [Object],
_cancelTaskDlgt: [ZoneDelegate],
_cancelTaskCurrZone: [Circular],
_hasTaskZS: [Object],
_hasTaskDlgt: [ZoneDelegate],
_hasTaskDlgtOwner: [Circular],
_hasTaskCurrZone: [Circular]
}
},
task: ZoneTask {
_zone: Zone {
_parent: [Zone],
_name: 'angular',
_properties: [Object],
_zoneDelegate: [ZoneDelegate]
},
runCount: 0,
_zoneDelegates: null,
_state: 'notScheduled',
type: 'microTask',
source: 'Promise.then',
data: ZoneAwarePromise [Promise] {
__zone_symbol__state: 0,
__zone_symbol__value: ReferenceError: self is not defined
at Object.8941 (C:\home\site\wwwroot\vendors-node_modules_editorjs_code_dist_bundle_js-node_modules_editorjs_editorjs_dist_editor_-77895d.js:1:492565)
at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
at Object.9353 (C:\home\site\wwwroot\src_app_shared_fluent-ui_editorjs_editorjs_component_ts-src_app_shared_fluent-ui_editorjs_edi-493a3d.js:1:2836)
at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
at Module.2913 (C:\home\site\wwwroot\src_app_questions_qsingle_qsingle_module_ts.js:1:6433)
at Function.__webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976150)
at Object.onInvoke (C:\home\site\wwwroot\main.js:1:470317)
at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976046)
at Zone.run (C:\home\site\wwwroot\main.js:1:1968989)
},
scheduleFn: undefined,
cancelFn: undefined,
callback: [Function],
invoke: [Function]
}
}If there is a Solution, Please Suggest. |
Beta Was this translation helpful? Give feedback.
-
|
For those who still encounter this issue, the problem is that the package's code references browser-specific APIs when executed on server, which does not provide browser-specific APIs. This is an issue with most browser-intensive packages that interact and manipulate browser DOM, since adding a special check for SSR is just not worth it (leads to a lot of To work around the issue, you need to ensure that EditorJS code is not executed on SSR. You can refer to your framework documentation on how to achieve this:
For example, here is how to import it in Next.js: // ComponentThatUseEditorJS.jsx
import EditorJS from "@editorjs/editor"
export default function ComponentThatUseEditorJS() {
return /* your code here */
}
// MyPage.jsx
import dynamic from "next/dynamic"
const ComponentThatUseEditorJs = dynamic(() => import("./ComponentThatUseEditorJs"))
export default function MyPage() {
return (
<div>
<ComponentThatUseEditorJs />
</div>
)
}If you use third-party EditorJS wrappers such as react-editor-js or vue-editor-js, the fix still applies: use your framework's tools to exclude it from SSR. This technique also works with other non-SSR-compatible packages (not only EditorJS). I propose to close this issue since the problem is not on EditorJS side and the workaround is platform-specific. |
Beta Was this translation helpful? Give feedback.
-
+1 |
Beta Was this translation helpful? Give feedback.
-
|
@Chaitanya-yash if you have domino installed, try |
Beta Was this translation helpful? Give feedback.
-
|
@Teebo Yeah man. I did try domino. Ediotr.js still throws an exception about the window. Had the same problem with Localstorage but that is gone now. This one has been haunting me for a couple of days now. |
Beta Was this translation helpful? Give feedback.
-
|
@Chaitanya-yash so you've also tried? |
Beta Was this translation helpful? Give feedback.
-
|
@Teebo Yeah, I am getting the window error right now upon multiple builds. Self is not coming up |
Beta Was this translation helpful? Give feedback.
-
|
@Chaitanya-yash can you share you |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
@Chaitanya-yash let's start by trying to move the below Move it underneath |
Beta Was this translation helpful? Give feedback.
-
|
@Chaitanya-yash the below works for me, I talk it from somewhere online, I still need to make sense of it all. Because some lines use |
Beta Was this translation helpful? Give feedback.
-
|
I spun up a new Angular universal project, added EditorJS to it, initialised it |
Beta Was this translation helpful? Give feedback.
-
|
@Teebo Can you share your the versions for Angular and EditorJS that you are using? |
Beta Was this translation helpful? Give feedback.
-
|
Can you please use the discussion forums of this repo to sort this out? Thanks. |
Beta Was this translation helpful? Give feedback.
-
|
This is how I fixed it:
|
Beta Was this translation helpful? Give feedback.
-
I am having the same issue. Did you find a solution for svelte-kit? |
Beta Was this translation helpful? Give feedback.
-
|
Got this working in svelte kit as follows: <script>
import { browser } from '$app/env';
import { onMount } from 'svelte';
onMount(async () => {
if (browser) {
const EditorJS = (await import('@editorjs/editorjs')).default;
var editor = new EditorJS('editorjs');
}
});
</script>
<div id="editorjs" /> |
Beta Was this translation helpful? Give feedback.
-
|
Do I understand correctly that at the moment it is impossible to prepare rendered editorjs on the server side? |
Beta Was this translation helpful? Give feedback.
-
|
@novikov1337danil I also wanted to display a rendered content for my Next.js app, and I created a simple custom // renderer.tsx
import { cn } from '@/lib/utils'
import { OutputData } from '@editorjs/editorjs'
import slugify from '@sindresorhus/slugify'
import { Separator } from '@ui/index'
const Header = ({ level, text }: { level: number; text: string }) => {
const Tag = `h${level}` as keyof JSX.IntrinsicElements
return (
<Tag id={slugify(text)} className="scroll-m-20">
{text}
</Tag>
)
}
const Paragraph = ({ text }: { text: string }) => {
// we need to do this because editorjs doesn't separate link tags
return <p dangerouslySetInnerHTML={{ __html: text }}></p>
}
const List = ({ items, style }: { items: string[]; style: 'unordered' | 'ordered' }) => {
const ListTag = style === 'unordered' ? 'ul' : 'ol'
return (
<ListTag>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ListTag>
)
}
const Image = ({
url,
caption,
stretched,
withBorder,
withBackground,
}: {
url: string
caption: string
stretched: boolean
withBorder: boolean
withBackground: boolean
}) => {
return (
<figure className="relative">
<img
src={url}
alt={caption}
className={cn(
'object-contain',
{ 'w-full': stretched },
{ 'rounded-md': !stretched },
{ border: withBorder },
{ 'bg-muted': withBackground }
)}
sizes="(max-width: 768px) 100vw, 33vw"
/>
{caption && <figcaption>{caption}</figcaption>}
</figure>
)
}
const Renderer = ({ blocks }: { blocks: OutputData['blocks'] }) => {
return (
<div>
{blocks.map((block) => {
switch (block.type) {
case 'header':
return <Header key={block.id} level={block.data.level} text={block.data.text} />
case 'paragraph':
return <Paragraph key={block.id} text={block.data.text} />
case 'list':
return <List key={block.id} items={block.data.items} style={block.data.style} />
case 'divider':
return <Separator />
case 'image':
return (
<Image
key={block.id}
url={block.data.file.url}
caption={block.data.caption}
stretched={block.data.stretched}
withBorder={block.data.withBorder}
withBackground={block.data.withBackground}
/>
)
default:
return (
<p className="text-destructive" key={block.id}>
Unsupported block type: {block.type}
</p>
)
}
})}
</div>
)
}
export default RendererHere's how I use it // blog/[slug]/page.tsx
import Renderer from '@/components/renderer'
import { cn } from '@/lib/utils'
import { OutputData } from '@editorjs/editorjs'
type BlogProps = {
params: { slug: string }
}
export default async function BlogPage({ params }: BlogProps) {
const { slug } = params
// your fetch logic to get the editor contents
const blog = await getBlog(slug)
// assume your editorjs data is stored inside blog.body
const body = blog.body as any
// get the blocks
const blocks: OutputData['blocks'] = body.blocks
return (
<div className="prose dark:prose-invert">
<Renderer blocks={blocks} />
</div>
)
} |
Beta Was this translation helpful? Give feedback.
-
|
Im feeling the same, I feels like it will be good idea to create a
editorjs-nextjs compatible library for this.
There are options but none of them work properly for v14, only few of them
work(sometimes) in v13/12
…On Thu, Jan 18, 2024 at 7:42 AM novikov1337danil ***@***.***> wrote:
Do I understand correctly that at the moment it is impossible to prepare
rendered editorjs on the server side?
I'm interested in displaying it in readOnly mode
—
Reply to this email directly, view it on GitHub
<#1869 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AMZL3BRAV6Z2RYXUSP6E2ALYPERFRAVCNFSM5T2VHNG2U5DIOJSWCZC7NNSXTOKENFZWG5LTONUW63SDN5WW2ZLOOQ5TQMJWHE2DMNQ>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***
com>
|
Beta Was this translation helpful? Give feedback.
-
When I try to use by way of a Node.js import, I get an "ReferenceError: window is not defined" error in the browser and can't use it at all.
It works fine when I load it by CDN in the head.
Beta Was this translation helpful? Give feedback.
All reactions