reactjsmonaco-editorwebpack-plugin

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


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.


Solution

  • 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.