Localize react-monaco-editor and set up monaco-editor-esm-webpack-plugin

Question

I have a web application built with ReactJS, react-scripts (webpack), Monaco Editor, and react-monaco-editor. By default, the context menu is in English:

In the hover window, View Problem, Quick Fix, etc. are also in English.

Now, I would like to localize these keywords to Chinese, does anyone know how to do it?

PS 0: I have searched similar issues such as https://github.com/microsoft/monaco-editor/blob/main/samples/browser-amd-localized/index.html, but I don't know how to configure (e.g., require.config) in a project with webpack and react-monaco-editor.

PS 1: Here is a working sample with react-monaco-editor: https://codesandbox.io/p/sandbox/goofy-rgb-q525mq?file=%2Fsrc%2FApp.js%3A16%2C20. The code calling react-monaco-editor is as follows, which is similar to the way of calling react-monaco-editor in my code.

    <MonacoEditor
        width="800"
        height="600"
        language="javascript"
        value={code}
        options={options}
        onChange={this.onChange}
        editorDidMount={this.editorDidMount}
    />

Edit 1: Thanks to @blutorange and @VonC, the demo of blutorange in codesandbox does work. I tried to make it work in my code. I put import AAA in my files before the import of monaco-editor and react-monaco-editor. I can see that After setLocaleData is printed in the console, but the keywords of the editor are still in English. Additionally, I use dva in the project. The follows is src/index.tsx:

import './AAA';
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

import dva from 'dva';
import './index.css';
import router from './router';
import AuthModel from './models/auth';
import SubscribtionModel from './models/subscription';
import AppModel from './models/app';
import SpreadsheetModel from './models/spreadsheet';
import UsageModel from './models/usage';
import AiModel from './models/ai';
import SettingsModel from './models/settings';
import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import zh from './i18n/locales/zh.json';
import en from './i18n/locales/en.json';

function patchOfficeExtension() {
    // https://stackoverflow.com/questions/53327711/how-to-add-a-polyfill-to-support-finally-in-edge
    //@ts-ignore
    OfficeExtension.Promise.prototype.finally = /* Promise.prototype.finally || */ {
        finally(fn: any): any {
            const onFinally = (cb: any) => OfficeExtension.Promise.resolve(fn()).then(cb);
            // @ts-ignore
            return this.then(
                (result: any) => onFinally(() => result),
                (reason: any) => onFinally(() => OfficeExtension.Promise.reject(reason)),
            );
        },
    }.finally;
    // tslint:enable
}

// https://chat.openai.com/c/06d8c247-6107-463f-80a9-6b571ee23f88
i18n.use(initReactI18next).init({
    lng: 'zh',
    // lng: 'en',
    resources: {
        en: { translation: en },
        zh: { translation: zh },
    },
    fallbackLng: 'en',
    // interpolation: { escapeValue: false }
});

//@ts-ignore
//import createLoading from 'dva-loading';

initializeIcons();

// 1. Initialize
const app = dva();
//app.use(createLoading());

// 2. Plugins
// app.use({});

// 3. Model
//@ts-ignore
app.model(AuthModel);
app.model(SubscribtionModel)
app.model(AppModel);
app.model(SpreadsheetModel);
app.model(UsageModel);
app.model(AiModel);
app.model(SettingsModel);
// 4. Router
//@ts-ignore
app.router(router);

// 5. Start
app.start('#root');

Here is the updated webpack.config.js:

const WEBPACK = require('webpack');
const PATH = require('path');
const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');

module.exports = {
resolve: {
    extensions: ['.js', '.jsx']
},
context: __dirname,
entry: {
    app: ['./src/index.jsx'] // app: ['./MY_FOLDER_INPUT/MY_FILE_INDEX.jsx']
},
output: {
    path: PATH.join(__dirname, '/MY_FOLDER_OUTPUT'),
    filename: 'index.js'
},
module: {
    rules: [
        {
            test: /\.js/,
            enforce: 'pre',
            include: /node_modules[\\\/]monaco-editor[\\\/]esm/,
            use: MonacoWebpackPlugin.loader
        },
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        }
    ]
},
plugins: [
    new MonacoWebpackPlugin()
]
};

Could you tell how I could detect precisely the order of imports? I tried to use source-map-explorer, it gives a map as follows, but i cannot even find AAA:

Answer 1

Check first if a webpack's plugin for monaco editor like monaco-editor-nls would be enough for your use case.

You would need modify the editorDidMount function in your React component to also set the locale data.

Following its "Using" section example, that would be for you:

import React, { useEffect } from 'react';
import MonacoEditor from 'react-monaco-editor';
import { setLocaleData } from 'monaco-editor-nls';
import zh_CN from 'monaco-editor-nls/locale/zh-hans';

const App = () => {
  const code = "// Add your code here";
  const options = {
    selectOnLineNumbers: true
  };

  const editorDidMount = (editor, monaco) => {
    console.log('editorDidMount', editor);
    editor.focus();

    // After mounting the editor, set the locale data
    setLocaleData(zh_CN);

    // You may then use the `monaco` instance as necessary
    // Note that you already have an editor instance,
    // so there's no need to call `monaco.editor.create` unless you're creating another editor instance
  };

  const onChange = (newValue, e) => {
    console.log('onChange', newValue, e);
  };

  return (
    <MonacoEditor
      width="800"
      height="600"
      language="javascript"
      theme="vs-dark"
      value={code}
      options={options}
      onChange={onChange}
      editorDidMount={editorDidMount}
    />
  );
};

export default App;

The setLocaleData is called in the editorDidMount function to set the locale data after the Monaco Editor instance has been created. In your case, as you are using react-monaco-editor, the editor instance is created automatically by the MonacoEditor component, and you get that instance in the editorDidMount function.

---

As commented, it is not enough on its own.
Try adding monaco-editor-esm-webpack-plugin (npm install monaco-editor-esm-webpack-plugin)

And update your webpack.config.js:

const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');
const PATH = require('path');

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx']
  },
  context: __dirname,
  entry: {
    app: ['./src/index.jsx'] // app: ['./MY_FOLDER_INPUT/MY_FILE_INDEX.jsx']
  },
  output: {
    path: PATH.join(__dirname, '/MY_FOLDER_OUTPUT'),
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
    new MonacoWebpackPlugin({
      // available options are documented at https://github.com/microsoft/monaco-editor-webpack-plugin#options
      languages: ['json'], 
      features: ['coreCommands', 'find']
    })
  ]
};

In the plugins array, you see now new MonacoWebpackPlugin() with some options. In the languages array, you should list the languages you want to use in your editor. In the features array, you can enable additional editor features.

In your main script file, you should be able to import the locale data from monaco-editor-nls and set the locale data using the setLocaleData function.

import { setLocaleData } from 'monaco-editor-nls';
import zh_CN from 'monaco-editor-nls/locale/zh-hans';

setLocaleData(zh_CN);

---

blutorange adds in the comments:

From what I remember working on monaco editor, it eagerly reads and caches translations, so I suspect that when you call setLocateData when the component is mounted, it might already be too late, as monaco editor will have already loaded the English translations.

There's also this note in the webpack plugin: You must import/require [monaco-editor] after setLocaleData.

That means, to ensure setLocaleData is called before the Monaco Editor loads, you might want to try calling it in a higher level component or as early as possible in your application's entry point file.

Your entry point file should include:

// index.jsx or index.js

import { setLocaleData } from 'monaco-editor-nls';
import zh_CN from 'monaco-editor-nls/locale/zh-hans';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';  // adjust this path to point to your App component

setLocaleData(zh_CN);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Here, setLocaleData would be called before your App component (which presumably contains the MonacoEditor component) is imported and used. The Monaco Editor is likely to be imported for the first time in your App component or in a component within App, ensuring setLocaleData is called before any Monaco related imports.

Do update your webpack configuration to use the monaco-editor-esm-webpack-plugin as outlined previously.

---

blutorange adds in the comments:

I can see 3 potential issues, though there might be more.

1. First of all, the dependencies in that sandbox project are pretty old.
2. Secondly, you're importing your App (which imports monaco-editor) before you call setLocaleData... but webpack does not care anyways.
3. I changed the import order in the sandbox, but if you take a look at the generated bundle, you can see the following:
   
   All imports are moved to the top, and the actual code is executed afterwards.
   And if you debug into the bundled code, it also does not seem to ever execute the replaced localize-nls code.

That means: make sure all your packages are up-to-date:

npm install react-monaco-editor@latest
npm install monaco-editor-nls@latest
npm install monaco-editor-esm-webpack-plugin@latest

Then try and modify how you import monaco-editor and react-monaco-editor and where you call setLocaleData. That is tricky because you cannot control how react-monaco-editor imports monaco-editor internally.

Instead of using setLocaleData in editorDidMount or the entry point file, try using it in a separate module that you import before you import monaco-editor. That would ensure setLocaleData is called before monaco-editor is imported.

Define a separate module (let's call it set-locale.js):

// set-locale.js

import { setLocaleData } from 'monaco-editor-nls';
import zh_CN from 'monaco-editor-nls/locale/zh-hans';

setLocaleData(zh_CN);

And use it in your component file:

import './set-locale';
import * as monaco from 'monaco-editor';

// rest of your component code

That approach attempts to ensure setLocaleData is called before monaco-editor is imported.

---

blutorange also points out in the comments:

• a working setup
• monaco-editor/react which completely sidesteps the issue by not bundling monaco editor whatsoever but just loads it from a CDN at runtime.
  npm install @monaco-editor/react

That is a good point. @monaco-editor/react is indeed another wrapper for Monaco Editor that might suit your needs better.

That means, on that last point, you would not have to deal with webpack configurations for bundling the editor yourself.

import Editor from "@monaco-editor/react";

function App() {
  const handleEditorDidMount = (editor, monaco) => {
    // here you can access the monaco instance
    // you could apply a language change here
  }

  return (
    <Editor
      height="90vh"
      defaultLanguage="javascript"
      defaultValue="// some comment"
      onMount={handleEditorDidMount}
    />
  );
}

To localize the editor with this package, you would have to find a way to load the locale data after the editor is loaded from the CDN.
See loader-config

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

// you can change the source of the monaco files
loader.config({ paths: { vs: '...' } });

// you can configure the locales
loader.config({ 'vs/nls': { availableLanguages: { '*': 'de' } } });

// or
loader.config({
  paths: {
    vs: '...',
  },
  'vs/nls': {
    availableLanguages: {
      '*': 'zh-cn',
    },
  },
});