How to import ace-builds for react-ace into NextJS

252 Views Asked by At

The situation is as follows. I want to use react-ace in the next component. But this lib swears that she doesn't see the window object. Then I imported this library using dynamic from next/dynamic. OK, the library is working. But it needs ace-builds, which I still can't import.

The question is, how do I import ace-builds so that react-ace sees them?

The way I import react-ace

`import dynamic from 'next/dynamic';
 const AceEditor = dynamic(() => import('react-ace'), {
  loading: () => <p>Loading...</p>,
  ssr: false,
});`

This is how I'm trying to import ace-builds import "ace-builds/src-noconflict/mode-javascript"; import "ace-builds/src-noconflict/theme-monokai";

An error follows from this enter image description here

That's how I insert the component

`<AceEditor
    placeholder="Placeholder Text"
    mode="javascript"
    theme="monokai"
    name="UNIQUE_ID_OF_DIV"
    onChange={onChange}
/>`

Installed packages: "ace-builds": "^1.23.4" "react-ace": "^10.1.0", "next": "13.4.12", "react": "18.2.0",

As I wrote above, I need help importing ace-builds

0

There are 0 best solutions below