Open omniphx opened 1 year ago
hey 👋 @omniphx
This issue should be referred to the original repository - microsoft/monaco-editor
. In fact, there is an open issue related to this - check this.
Be aware that if you use it as npm package you should also use monaco-editor-webpack-plugin
Hello 👋 I faced the same problem the other day and I found a solution if still needed.
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
transpilePackages: ["monaco-editor"],
};
module.exports = nextConfig;
You must transpile the 'monaco-editor' module if you want to use it in Nextjs. If you're using any version of Nextjs above 13 you can use the code above. If not you need to use 'next-transpile-modules' package.
Hey @KiLLg0r! It doesn't work the way you described it. I'm dealing with Server Error ReferenceError: navigator is not defined
with the exact config on next@13.1.0
Hey @czescwojtek ! I'm sorry to hear that. I didn't had this specific error. Unfortunately, I forgot to mention, you to have downgrade the monaco-editor module, I used version @0.31.1. Some older versions work better. This can be a cause of the error.
oh, that's a bummer, I need the newer one. Thanks anyway! @KiLLg0r
I have the same problem, the load monaco-editor from CDN is prolonged significantly in China
Hey @KiLLg0r , I'm downgrading to version @0.31.1, But it doesn't work! I got ReferenceError: navigator is not defined.
too
any updates on this? i also got ReferenceError: navigator is not defined
too.
Hello @jeffreys-cat and @beadex. I have no update about it. The only way I managed to make it work was to downgrade @monaco-editor/react, which is not very worth and solves the problem only at the moment. If I will find a solution in which to work all l will come back with updates.
@KiLLg0r to which version did you downgrade in order to get rid of this issue? Thanks in advance :)
I too am getting navigator is not defined
Describe the bug
I'd like to initialize monaco from an npm package so I can write unit tests. Seems like this is a common problem since monaco is by default initialized remotely.
Unfortunately, it seems that inside a Next.js app I'm either implementing this incorrectly or it doesn't work:
I'm also importing this component with SSR turned off:
To Reproduce
Run this example: https://stackblitz.com/edit/nextjs-xye7xg?file=components/Code.tsx
Will see an console error :
Expected behavior