Got an error trying to use ketcher-react

[Sinkler521]

Made a sample according to other user's typescript code. Here is my App.js:
Require some advice because the editor doesn't being displayed on webpage. All what I receive is it's appearance for 0.3 second and then error state.editor is null

Please tell me how to solve. Thanks

import React from "react";
import "miew/dist/Miew.min.css";
import { StandaloneStructServiceProvider } from "ketcher-standalone";
import { Editor, Ketcher } from "ketcher-react";
import "ketcher-react/dist/index.css";
import Miew from "miew";

window.Miew = Miew;

const structServiceProvider = new StandaloneStructServiceProvider();

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleOnInit = this.handleOnInit.bind(this);
  }

  handleOnInit = async (ketcher) => {
    
    if (!ketcher) {
      console.error("Ketcher is not initialized.");
      return;
    }

    this.ketcher = ketcher;
    window.ketcher = ketcher;

    const initialData =
      "\n  Ketcher  9282116442D 1   1.00000     0.00000     0\n\n  6  6  0  0  0  0            999 V2000\n    9.5500  -11.7000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   10.4160  -12.2000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   10.4160  -13.2000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    9.5500  -13.7000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    8.6840  -13.2000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    8.6840  -12.2000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n  1  2  1  0     0  0\n  2  3  1  0     0  0\n  3  4  1  0     0  0\n  4  5  1  0     0  0\n  5  6  1  0     0    6  0\n  6  1  1  0     0  0\nM  END\n";
    this.ketcher.setMolecule(initialData);
  };

  render() {
    return (
      <Editor
        staticResourcesUrl={""}
        structServiceProvider={structServiceProvider}
        onInit={this.handleOnInit}
      />
    );
  }
}

export default App;

[Sinkler521]

[rrodionov91]

Hi @Sinkler521
Thank you for starting the conversation.
We are trying to reproduce now.

[rrodionov91]

Dear @Sinkler521
It would be great if you can provide complete example which we can run to reproduce issue.

[Sinkler521]

@rrodionov91 Thanks for your response. I've provided the App.js code in react project running which causes such problem. I can also add the whole project but not sure it's a proper way.

All what I did: I started new react app, installed such:
ketcher-react
miew
ketcher-standalone
and used that code above as App.js. That was an attempt to use ketcher-react Editor with less code

[rrodionov91]

Dear @Sinkler521
Yes if it is possible please attach the whole sandbox project to reproduce the problem. It will make investigation easier and faster.
We tried to reproduce on fresh react application however we did not face exact such error.
However the behaviour "All what I receive is it's appearance for 0.3 second" which you described is very similar to issue with ketcher and react strict mode which is turned on by default in react applications. Could you please try to remove these lines if they exist?

[rrodionov91]

Hi @Sinkler521
We fixed an issue in #5013
It will be published to npm in 2.24.0 version.
Please reopen if something else needed here.