Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

loader.config({monaco}) still stuck on 'loading...'

See original GitHub issue

Describe the bug Following the instructions on the README for loading monaco-editor as an npm module (not using CDN) in Vite, it does not work. https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package

It used to work! I am not sure when this stopped working - sometime in the last few weeks. I was using 4.4.1 locally before, and had recently updated to React 18. I created a fresh sandbox repro.

To Reproduce

Run the example: https://stackblitz.com/edit/vitejs-vite-tf4tif?file=src/App.tsx
Observe that the editor never gets past loading
If you comment out line 36 (loader.config({monaco})) it works fine

Expected behavior It should load and show “HELLO” in the monaco editor

Screenshots Broken:

Comment out 9-40 (loader code) works fine:

Issue Analytics

State:
Created a year ago
Comments:9 (4 by maintainers)

Top GitHub Comments

1reaction

tarngerinecommented, May 11, 2022

Amazing, it’s working! thank you

1reaction

imguolaocommented, May 11, 2022

@tarngerine @imguolao @miaawong could you please check the latest version?

Yes, it is working. Great! (:

Top Results From Across the Web

Monaco Editor Stuck At Loading Screen !!! #58 - GitHub

But the problem is I don't have a public file in my config !!

Monaco editor react electron stuck on loading - Stack Overflow

Got it working. Here is the code: import "devextreme/dist/css/dx.common.css"; import "devextreme/dist/css/dx.light.css"; import React, ...

Building a code editor with Monaco - Expo Blog

The Monaco editor package on NPM is transpiled and published as JavaScript. However, using the Monaco package requires that we use Webpack as...

@monaco-editor/loader - npm

Download process fails or if you use @monaco-editor/react You see loading screen stuck Usually, it's because your environment doesn't allow you ...

How To Add Monaco Editor to a Next.js app

Next.js doesn't want any dependencies importing CSS from within node_modules , as this assumes a bundler and loader setup (e.g. webpack) and can ......