How to localize in esm?

[magicds]

monaco-editor version: 0.17.1 Browser:: Google Chrome 75.0.3770.142 OS: windows 10

I find an localization demo by using amd Monaco Editor Localization Sample, but how can I make localization by using esm ? Is here any example ?

[s97712]

+1

[s97712]

Have you found a solution?

[magicds]

@s97712 Just use the amd moudle to load the monaco-editor.

[PunKHS]

I also need some localize example.

[blutorange]

There is a "solution" which I described here: https://github.com/blutorange/primefaces-monaco/blob/master/ESM-I18N.md Though I'm not quite sure whether it ought to be called it "solution", "hack", or "workaround".

[wang12124468]

You can use monaco-editor-esm-webpack-plugin to localize in esm. Thanks to @blutorange's mind, I write a plugin to solute it.

[jevinpi]

How did you solve it，i use the amd moudle to load the monaco-editor，but still english。need i set ”availableLanguages“？thankyou！

[magicds]

@jevinpi For amd , You can refer to the official demo Monaco Editor Localization Sample, and also you can refer mine demo at line 96.

[jevinpi]

@jevinpi For amd , You can refer to the official demo Monaco Editor Localization Sample, and also you can refer mine demo at line 96.

i used it in React, can't use require.config to set vs/nls. thankyou anyway， i will try other methods.

[peachtang]

@wang12124468 I don't have any effect using this method （monaco-editor-esm-webpack-plugin）

[chanelnumberseven]

I find a way by using with esm copy-webpack-plugin demo it work for me

[zoubeihua]

问下vue-cli 项目怎么汉化

[izhangchao]

@jevinpi For amd , You can refer to the official demo Monaco Editor Localization Sample, and also you can refer mine demo at line 96.

i used it in React, can't use require.config to set vs/nls. thankyou anyway， i will try other methods.

请问你找到解决方法了吗？

[leonaii]

i used it in vite, can‘t useing , thank you anyway

[poerlang]

When you use vite + vue3 ，try this one：

https://www.npmjs.com/package/@monaco-editor/loader

it work for me.

config like below：

loader.config({ paths: { vs: 'monaco-editor/min/vs' } });  // copy monaco-editor from /node_modules to  /public 
loader.config({
    'vs/nls': {
        availableLanguages: { '*': 'de' }
        // availableLanguages: { '*': 'zh-cn' }
    }
})

@ailongfei @izhangchao

[Tnze]

When you use vite + vue3 ，try this one：

https://www.npmjs.com/package/@monaco-editor/loader

it work for me.

config like below：

loader.config({ paths: { vs: 'monaco-editor/min/vs' } });  // copy monaco-editor from /node_modules to  /public 
loader.config({
    'vs/nls': {
        availableLanguages: { '*': 'de' }
        // availableLanguages: { '*': 'zh-cn' }
    }
})

@ailongfei @izhangchao

It works because it doesn't use ESM at all. It loads monaco-editor from CDN by default.

It dose can load monaco from ESM, but in that case it doesn't support vs/nls. https://github.com/suren-atoyan/monaco-loader/issues/40

[Zasa-san]

monaco-editor version 0.45.0 still has this problem using ESM. Any updates?

[xiaoxiaohuayu]

monaco-editor 版本 0.45.0 在使用 ESM 时仍然存在此问题。有更新吗？

你目前解决了嘛？

[Tnze]

monaco-editor 版本 0.45.0 在使用 ESM 时仍然存在此问题。有更新吗？

你目前解决了嘛？

Just don't use ESM. You can import monaco editor as static resources.

[xiaoxiaohuayu]

monaco-editor 版本 0.45.0 在使用 ESM 时仍然存在此问题。有更新吗？

你目前解决了嘛？

只是不要使用 ESM。您可以将 monaco 编辑器导入为静态资源。

Do you have any examples?

[NateScarlet]

my recipe for load monaco-editor with amd:

const base = 'https://cdn.jsdelivr.net/npm/monaco-editor';

const lang = 'zh-cn';

const injectStyleOnLoad = false;

async function load() {
  // https://github.com/microsoft/monaco-editor/blob/9adbed19a9d5972104e6aff788f2e1ae71e91102/samples/browser-amd-shadow-dom/index.html
  await new Promise((resolve) => {
    const script = document.createElement("script");
    script.src = `${base}/min/vs/loader.js`;
    script.onload = resolve;
    document.head.appendChild(script);
  });
  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
  const monaco = await new Promise<typeof import("monaco-editor")>(
    (resolve) => {
      // spell-checker: word codicon codicons
      const style = document.createElement("style");
      style.innerHTML = `
@font-face {
  font-family: 'codicon';
  src: url('${base}/min/vs/base/browser/ui/codicons/codicon/codicon.ttf')
    format('truetype');
}
`;
      document.head.appendChild(style);

      Object.assign(window, { resolveMonacoEditor: resolve });
      const script = document.createElement("script");
      script.innerHTML = `
require.config(${JSON.stringify({
        paths: {
          vs: new URL(`${base}/min/vs`, window.location.origin),
        },
        "vs/nls": {
          availableLanguages: {
            "*": lang,
          },
        },
        "vs/css": { disabled: !injectStyleOnLoad },
      })});
require(['vs/editor/editor.main'], function () {
  resolveMonacoEditor(monaco);
  delete window.resolveMonacoEditor;
  delete window.monaco;
});      
`;
      document.head.appendChild(script);
    }
  );

  function createStyle() {
    const style = document.createElement("link");
    style.rel = "stylesheet";
    style.href = `${base}/min/vs/editor/editor.main.css`;
    return style;
  }

  function cloneColorsStyle() {
    return document.importNode(
      document.querySelector("style.monaco-colors")!,
      true
    );
  }

  return {
    monaco,
    createStyle,
    cloneColorsStyle,
  };
}

let loadOnce: ReturnType<typeof load> | undefined;

export default async function loadMonacoEditor() {
  if (!loadOnce) {
    loadOnce = load();
    loadOnce.catch(() => {
      loadOnce = undefined;
    });
  }
  return loadOnce;
}