Load monaco files from node_modules doesn't work

[vladtimss]

Hi! Thanks for your great job of this project.

I extremely need help to solve problem with load monaco from node modules.

Below you can see my usage of @monaco-editor/react via loader. My problem is not understanding how set correct paths a vs in loader.config({ paths: { vs: HERE } }). Please help to understand what's wrong from my side.

I tried to read carefully this discussion. But, import { monaco } from '@monaco-editor/react'; than monaco doesn't have method as config, urls etc. We only now can use loader.config.

if a set path by node_modules, than get SyntaxError: Unexpected token '<' (at loader.js:1:1)

Please help!

import React, { useLayoutEffect, useRef } from 'react';
import { loader } from '@monaco-editor/react';

const MonacoEditorWrapper = () => {
    const monacoRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        loader.config({
            paths: {
                // vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs', - **if i use this - it will be work correctly of course but i do not understand how replace cdn on node_modules load**
                vs: 'node_modules/monaco-editor/min-maps/vs',
            },
            'vs/nls': {
                availableLanguages: {
                    '*': 'de',
                },
            },
        });

        loader.init().then((monaco) => {
            if (!monacoRef.current) {
                return;
            }
            monacoRef.current.style.height = '100vh';
            const properties = {
                value: 'function hello() {\n\talert(\'Hello world!\');\n}',
                language: 'javascript',
            };
            monaco.editor.create(monacoRef.current, properties);
        });
    }, []);

    return <div ref={monacoRef} />;
};

export { MonacoEditorWrapper };

[suren-atoyan]

@vladtimss try this

[vladtimss]

@vladtimss try this

but if i use CRA, a don't understand how can add webpack plugin

[suren-atoyan]

@vladtimss do the following:

1. copy all of monaco-editor files into repo's /public directory

cp -R ./node_modules/monaco-editor/min/vs ./public

2. configure your loader

import { loader } from '@monaco-editor/react';

loader.config({ paths: { vs: '/vs' } });

[dmagunov]

I've made some research on this topic and have shared my findings in an article. Hopefully, it will be useful.

[Kaltsit163]

Hi! Thanks for your great job of this project.

I extremely need help to solve problem with load monaco from node modules.

Below you can see my usage of @monaco-editor/react via loader. My problem is not understanding how set correct paths a vs in loader.config({ paths: { vs: HERE } }). Please help to understand what's wrong from my side.

I tried to read carefully this discussion. But, import { monaco } from '@monaco-editor/react'; than monaco doesn't have method as config, urls etc. We only now can use loader.config.

if a set path by node_modules, than get SyntaxError: Unexpected token '<' (at loader.js:1:1)

Please help!

import React, { useLayoutEffect, useRef } from 'react';
import { loader } from '@monaco-editor/react';

const MonacoEditorWrapper = () => {
    const monacoRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        loader.config({
            paths: {
                // vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs', - **if i use this - it will be work correctly of course but i do not understand how replace cdn on node_modules load**
                vs: 'node_modules/monaco-editor/min-maps/vs',
            },
            'vs/nls': {
                availableLanguages: {
                    '*': 'de',
                },
            },
        });

        loader.init().then((monaco) => {
            if (!monacoRef.current) {
                return;
            }
            monacoRef.current.style.height = '100vh';
            const properties = {
                value: 'function hello() {\n\talert(\'Hello world!\');\n}',
                language: 'javascript',
            };
            monaco.editor.create(monacoRef.current, properties);
        });
    }, []);

    return <div ref={monacoRef} />;
};

export { MonacoEditorWrapper };

I gave up on load resouce from node_modules and chose the CDN address

Recently I encountered a similar problem. I searched on Google for a long time and tried many solutions. However, I found that loading monaco-editor from the local node_modules directory using a Loader does not work,I gave up on this method and chose to switch to a different CDN address to solve the slow loading problem.

❌ Writing like this will cause the loss of the highlighting

import Editor from "@monaco-editor/react";
import loader from '@monaco-editor/loader';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
loader.config({ monaco });

❌ Writing like this will cause some errors

import Editor from "@monaco-editor/react";
import loader from '@monaco-editor/loader';
import * as monaco from 'monaco-editor';
loader.config({ monaco });

✅ At last I have found a solution here. If you are a user in mainland China :

import Editor from "@monaco-editor/react";
import loader from '@monaco-editor/loader';
loader.config({ paths: { vs: 'https://g.alicdn.com/code/lib/monaco-editor/0.44.0/min/vs' } });

This is the CDN address provided by Alibaba, which has a great speed in mainland China.