[FEEDBACK] Issue using with @monaco-editor/react in NextJS

[burtek]

Not sure if bug or feature request... 🤔

Right now I'm unable to use monaco-editor-auto-typings with @monaco-editor/react because it makes some global CSS get imported from node_modules which is what NextJS doesn't like.

More precisely, monaco-editor-auto-typings imports monaco-editor in AutoTypings.ts which in turn indirectly imports global css in monaco-editor\esm\vs\base\browser\ui\actionbar\actionViewItems.js.

The solution would be to not import monaco-editor but that would break the fallback. Another solution would be to have another export (i.e. monaco-editor-auto-typings/nextjs) that doesn't auto-import monaco-editor but requires monaco instance to be passed in options.

Is there any chance to get monaco-editor-auto-typings working with NextJS ?

[lukasbach]

Can you try again in v0.3.1 when passing in your own monaco instance in the options? I just updated the import in v0.3.1 to only dynamically import monaco if it is not passed through, so hopefully this should fix it.

Edit: Please try with v0.3.2, there was an issue with 0.3.1.

[burtek]

Tried 0.3.2, for some reason it still doesn't work. I've been trying to find the cause for this for a few hours now... And yes, I'm passing the monaco instance from onMount.

EDIT: import 'monaco-editor-auto-typings' is enough to trigger this error, so it's still something about imports...? 🤔

[burtek]

Okey, got it. Was looking in the wrong places all along...

Dynamic imports won't work, as those are still compiled (just might not get used in runtime) and the global css check happens at compile time.

[burtek]

Got it working with the hack of using next-remove-imports for now, would prefer an out-of-box solution rather than hacks, though :/

[lukasbach]

Huh, interesting, would not have thought that. I'll look into alternatives for that in the coming week. Out of curiosity, how do you import monaco on your side to be passed through to this package such that the css files are not imported?

[burtek]

I use @monaco-editor/react wrapper rather than monaco-editor directly, as it has the added advantage of being NextJs compatible. monaco instance comes then from it's onMount prop

[softmarshmallow]

Having same issue here.
First of all, you may want to add monaco-editor as a peerDependencies not dependencies in this package.json

ref: https://github.com/suren-atoyan/monaco-react/blob/master/package.json

[softmarshmallow]

Also pinging this new issue, will open a new issue once confirmed.

After hacking with @burtek 's solution, i got it to compile & run, but then i get this message. (using same next12 configuration)

Unhandled Runtime Error
TypeError: path.dirname is not a function

Call Stack
AutoTypings.eval
../node_modules/monaco-editor-auto-typings/lib/AutoTypings.js (213:111)
step
../node_modules/monaco-editor-auto-typings/lib/AutoTypings.js (67:22)
Object.eval [as next]
../node_modules/monaco-editor-auto-typings/lib/AutoTypings.js (48:52)
eval
../node_modules/monaco-editor-auto-typings/lib/AutoTypings.js (42:70)
new Promise
<anonymous>
__awaiter
../node_modules/monaco-editor-auto-typings/lib/AutoTypings.js (38:11)
AutoTypings.resolveContents
../node_modules/monaco-editor-auto-typings/lib/AutoTypings.js (196:15)
new AutoTypings
../node_modules/monaco-editor-auto-typings/lib/AutoTypings.js (102:13)
Function.eval
../node_modules/monaco-editor-auto-typings/lib/AutoTypings.js (129:46)
step
../node_modules/monaco-editor-auto-typings/lib/AutoTypings.js (67:22)
Object.eval [as next]
../node_modules/monaco-editor-auto-typings/lib/AutoTypings.js (48:52)
fulfilled
../node_modules/monaco-editor-auto-typings/lib/AutoTypings.js (39:57)

[burtek]

Having same issue here. First of all, you may want to add monaco-editor as a peerDependencies not dependencies in this package.json

ref: https://github.com/suren-atoyan/monaco-react/blob/master/package.json

True, but that won't solve this issue.

got it to compile & run, but then i get this message. (using same next12 configuration)

@softmarshmallow happy to help if you share your Next config file ;)

[softmarshmallow]

Here is my repo. but i dropped the changes yesterday and decided to wait until this issue is solved.
Will try to add a reproducible code on sub branch later
https://github.com/gridaco/designto-code

Thanks anyway!

[softmarshmallow]

Hi. here's the commit that captures the issue
https://github.com/gridaco/designto-code/tree/snapshot-of-bug-monaco-autotype-next12

You may see the latest commit

[softmarshmallow]

This seems to be a @monaco-editor/react' issue.

I had a same issue when exported a logic to a different file (addCommand) and the same issue occurred.
(Don't know why.)

[lukasbach]

I now moved monaco-editor to the peerDependencies, and added a new entrypoint. You can try to import from "monaco-editor-auto-typings/customeditor" instead of "monaco-editor-auto-typings". It should export the same symbols, but have no imports of monaco-editor at all except for type imports. This fix is available in version v0.4.0.

[burtek]

Works great now! Thanks you very much! :)

[FreePhoenix888]

For those who do now want to read all the comments of this issue.

Solution

Import from monaco-editor-auto-typings/custom-editor instead of monaco-editor-auto-typings

Before

import { AutoTypings, LocalStorageCache } from "monaco-editor-auto-typings";

After

import { AutoTypings, LocalStorageCache } from "monaco-editor-auto-typings/custom-editor";