In the Next.js environment, the behavior changes with ketcher-react 2.4 or later.

[horiu]

Hi,

Many thanks for developing Ketcher!

I am developing an application in Next.js and kecher-react 2.3.3 worked with the following code.
However, it does not work with kecher-react 2.4 or later. I get "window is not defined".
I would love to use the very nice version 2.5, but I am still on 2.3.3.
If you know of a solution, I would be very happy to hear about it. 🙏

Thank you,

import dynamic from "next/dynamic";
import { StandaloneStructServiceProvider } from "ketcher-standalone";
import "ketcher-react/dist/index.css";

const Editor = dynamic(() => import("ketcher-react").then((mod) => mod.Editor), {
  ssr: false,
});

const structServiceProvider = new StandaloneStructServiceProvider();

export function KetcherEditor() {
  return (
    <Editor staticResourcesUrl="" structServiceProvider={structServiceProvider} />
  );
}

[horiu]

Self resolved.
By doing a named import as shown in the code below, we were able to display ketcher-react 2.5.1 in the Next.js app !

When I do import "ketcher-react/dist/index.css"; in components, it affects other styles in my app.
This is different from the first question, but if you know of a solution, please let me know.
→As a workaround, I imported in _app.js and overwrote with other CSS.

/components/ketcherEditor

import dynamic from "next/dynamic";

const KetcherEditorReact = dynamic(() => import("./ketcherEditorReact"), {
  ssr: false,
});

export function KetcherEditor() {
  return <KetcherEditorReact />;
}

/components/ketcherEditorReact

import { StandaloneStructServiceProvider } from "ketcher-standalone";
import { Editor } from "ketcher-react";
import "ketcher-react/dist/index.css";

const structServiceProvider = new StandaloneStructServiceProvider();

export default function KetcherEditorReact() {
  return <Editor staticResourcesUrl="" structServiceProvider={structServiceProvider} />;
}

[horiu]

I have successfully displayed ketcher2.5.1 on a Next.js application, but I cannot use the window function as in 2.3.3.
When I look for window.ketcher in the console, it does not exist.
If anyone knows how to solve this problem, I would be very happy to hear from you. 🙏

Test environment

"ketcher-core": "^1.5.0",
"ketcher-react": "2.5",
"ketcher-standalone": "^1.4.0",
"react": "17.0.2",
"next": "12.1.4",

Referenced Discussion : #1286 (comment)

Error on Next.js

Confirm the existence of window.ketcher in the console