I'm facing an error in a project using monaco editor. Error: Cannot find module 'metadata.js'

Question

This is happening in a react project using webpack. The project is created using create-react-app

After a lot of debugging, I have found the cause of the error to be in the following file.

monaco-editor-webpack-plugin

It happens in the function below:

function getEditorMetadata(monacoEditorPath: string | undefined): EditorMetadata {
    const metadataPath = resolveMonacoPath('metadata.js', monacoEditorPath);
    return require(metadataPath);
}

Line no: 58

But I'm not sure from where that file should come from. I have googled it but seems like there are no traces of this error to be found.

Appreciate your help on this.

Answer 1

Finally, I was able to solve the issue. Firstly, I commented new MonacoEditorWebpackPlugin() in the webpack config plugins.

 plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src/index.html"), // index html file
    }),
    new MonacoEditorWebpackPlugin(), // code-view - monaco-editor
  ],

Then, the issue I got was that there was a module missing - monaco-editor

Though, I was already using - @monaco-editor/react

But I installed, monaco-editor and then it worked.