Skip to content

Localize with react-monaco-editor and webpack #4096

Closed

Description

@chengtie

Context

  • This issue is not a bug report. (please use a different template for reporting a bug)
  • This issue is not a duplicate of an existing issue. (please use the search to find existing issues)

Description

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:

enter image description here

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

enter image description here

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}
    />

PS 2: Here is the current webpack.config.js in my code, which is simpler than webpack.config.js in the above sample.

const WEBPACK = require('webpack');
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"
            }
        }
    ]
}
};

PS 3: I tried to open the same issue on wang12124468/monaco-editor-esm-webpack-plugin#23, but it was closed.

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

No response

Activity

  1. locked and limited conversation to collaborators on Aug 3, 2023
  2. converted this issue into a discussion #4112 on Aug 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    feature-requestRequest for new features or functionality

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions