Launch the project

[chengtie]

After git-cloning the project on my machine (node: 14.21.3), I did yarn to install the packages. Then yarn build returned me the following error:

$ yarn build
yarn run v1.22.18
warning package.json: No license field
$ webpack --config webpack.config.js --mode development
[webpack-cli] Failed to load '/Users/20230619/localize-react-monaco-editor/webpack.config.js' config
[webpack-cli] Error: Cannot find module 'metadata.js'
Require stack:
- /Users/20230619/localize-react-monaco-editor/node_modules/monaco-editor-webpack-plugin/out/index.js
- /Users/20230619/localize-react-monaco-editor/node_modules/monaco-editor-esm-webpack-plugin/src/core.js
- /Users/20230619/localize-react-monaco-editor/node_modules/monaco-editor-esm-webpack-plugin/index.js
- /Users/20230619/localize-react-monaco-editor/webpack.config.js
- /Users/20230619/localize-react-monaco-editor/node_modules/webpack-cli/lib/webpack-cli.js
- /Users/20230619/localize-react-monaco-editor/node_modules/webpack-cli/lib/bootstrap.js
- /Users/20230619/localize-react-monaco-editor/node_modules/webpack-cli/bin/cli.js
- /Users/20230619/localize-react-monaco-editor/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:931:15)
    at Function.resolve (internal/modules/cjs/helpers.js:113:19)
    at resolveMonacoPath (/Users/20230619/localize-react-monaco-editor/node_modules/monaco-editor-webpack-plugin/out/index.js:30:20)
    at getEditorMetadata (/Users/20230619/localize-react-monaco-editor/node_modules/monaco-editor-webpack-plugin/out/index.js:41:26)
    at new MonacoEditorWebpackPlugin (/Users/20230619/localize-react-monaco-editor/node_modules/monaco-editor-webpack-plugin/out/index.js:74:26)
    at new MonacoEditorEsmWebpackPlugin (/Users/20230619/localize-react-monaco-editor/node_modules/monaco-editor-esm-webpack-plugin/src/core.js:7:24)
    at Object.<anonymous> (/Users/20230619/localize-react-monaco-editor/webpack.config.js:44:13)
    at Module._compile (internal/modules/cjs/loader.js:1114:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
    at Module.load (internal/modules/cjs/loader.js:979:32) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/20230619/localize-react-monaco-editor/node_modules/monaco-editor-webpack-plugin/out/index.js',
    '/Users/20230619/localize-react-monaco-editor/node_modules/monaco-editor-esm-webpack-plugin/src/core.js',
    '/Users/20230619/localize-react-monaco-editor/node_modules/monaco-editor-esm-webpack-plugin/index.js',
    '/Users/20230619/localize-react-monaco-editor/webpack.config.js',
    '/Users/20230619/localize-react-monaco-editor/node_modules/webpack-cli/lib/webpack-cli.js',
    '/Users/20230619/localize-react-monaco-editor/node_modules/webpack-cli/lib/bootstrap.js',
    '/Users/20230619/localize-react-monaco-editor/node_modules/webpack-cli/bin/cli.js',
    '/Users/20230619/localize-react-monaco-editor/node_modules/webpack/bin/webpack.js'
  ]
}
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[VonC]

The webpack plugin monaco-editor-webpack-plugin does not seem being able to locate the metadata.js file from the monaco-editor package.

So check first the installation of the package**: If the package was not installed correctly, the metadata.js file might not exist at all. To verify, navigate to the node_modules/monaco-editor directory in your project and see if metadata.js is there.

If you cannot find metadata.js, or if there seem to be other missing files, try reinstalling the package. You can do this by first deleting your node_modules directory and your yarn.lock file, and then running yarn install again.

Check also the monaco-editor version: If you are using a version of monaco-editor that is not compatible with monaco-editor-webpack-plugin, the metadata.js file might be located in a different directory, or it might not exist at all. You might need to downgrade or upgrade your monaco-editor version.

If you are using monaco-editor-webpack-plugin in an incorrect way, it might be looking for metadata.js in the wrong place. Make sure you are using the plugin correctly according to its documentation.

Finally, check if monaco-editor-esm-webpack-plugin is a dependency**: The error seems to originate from monaco-editor-esm-webpack-plugin. If you are not using this package, you might be able to resolve the issue by removing it.

[VonC]

Based on the error message you have shared, it seems like the 'monaco-editor-webpack-plugin' is trying to locate 'metadata.js' from the 'monaco-editor' package which is not present in your 'package.json'. That is likely the cause of the issue here.

So, you need to install 'monaco-editor'.

yarn add monaco-editor

After that, try running the 'yarn build' command again.

Also, it is worth mentioning that you are using both 'monaco-editor-esm-webpack-plugin' and 'monaco-editor-webpack-plugin'. It is advisable to use just one of them, 'monaco-editor-esm-webpack-plugin' is a fork of 'monaco-editor-webpack-plugin' with additional ESM support and should work fine on its own.

[chengtie]

Based on the error message you have shared, it seems like the 'monaco-editor-webpack-plugin' is trying to locate 'metadata.js' from the 'monaco-editor' package which is not present in your 'package.json'. That is likely the cause of the issue here.

So, you need to install 'monaco-editor'.

yarn add monaco-editor

After that, try running the 'yarn build' command again.

Also, it is worth mentioning that you are using both 'monaco-editor-esm-webpack-plugin' and 'monaco-editor-webpack-plugin'. It is advisable to use just one of them, 'monaco-editor-esm-webpack-plugin' is a fork of 'monaco-editor-webpack-plugin' with additional ESM support and should work fine on its own.

I did yarn add monaco-editor, then yarn build could indeed generate files under dist/ including main.js.

Now, when I run yarn start, I see the follows:

yarn run v1.22.18
warning package.json: No license field
$ http-server .
Starting up http-server, serving .

http-server version: 14.1.1

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:8080
  http://192.168.1.103:8080
  http://198.18.0.1:8080
  http://10.211.55.2:8080
  http://10.37.129.2:8080
Hit CTRL-C to stop the server

[2023-07-30T18:45:22.794Z]  "GET /" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
(node:20415) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
(Use `node --trace-deprecation ...` to show where the warning was created)
[2023-07-30T18:45:25.107Z]  "GET /" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
[2023-07-30T18:45:27.491Z]  "GET /" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
[2023-07-30T18:45:29.364Z]  "GET /" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"

Oddly, unlike in CodeSandbox, in the browser, http://127.0.0.1:8080 shows the page but there is no Monaco Editor.

DevTools failed to load source map: Could not load content for webpack://webpack-react-working/node_modules/react-monaco-editor/lib/index.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for webpack://webpack-react-working/node_modules/react-monaco-editor/lib/diff.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for webpack://webpack-react-working/node_modules/react-monaco-editor/lib/utils.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for webpack://webpack-react-working/node_modules/react-monaco-editor/lib/editor.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Do you have any idea?

[VonC]

@chengtie Can you edit your last message, and put the text, in addition of the screen capture?

[chengtie]

@chengtie Can you edit your last message, and put the text, in addition of the screen capture?

I added the messages.

[VonC]

@chengtie The messages you are seeing in the DevTools console are related to source maps. Source maps are files that browsers can use to map the minified/compiled code back to its original source, which can make debugging easier. These warnings do not affect the functionality of your app but indicate that the browser is trying to load source maps for react-monaco-editor and cannot find them.

Your app should be able to run correctly even if the source maps are not found. If the Monaco Editor is not showing up, there must be a different issue.

You have mentioned DevTools warnings, but make sure there are no actual errors. Errors would be displayed in red and might give you more information about why the editor is not displaying.

And use the browser's inspect tool to look at the HTML being generated. If the Monaco Editor is being initialized correctly, there should be some Monaco-specific markup on the page.

Check also the Network tab in the DevTools: That can show you if there are any network requests failing, such as trying to load a script or other resource and getting a 404.
Make sure the dist/ folder is being served correctly. The HTTP server should serve the compiled JavaScript and other resources. Check the paths in the Network tab to see if they match where the resources are being served from.

[chengtie]

@chengtie The messages you are seeing in the DevTools console are related to source maps. Source maps are files that browsers can use to map the minified/compiled code back to its original source, which can make debugging easier. These warnings do not affect the functionality of your app but indicate that the browser is trying to load source maps for react-monaco-editor and cannot find them.

Your app should be able to run correctly even if the source maps are not found. If the Monaco Editor is not showing up, there must be a different issue.

You have mentioned DevTools warnings, but make sure there are no actual errors. Errors would be displayed in red and might give you more information about why the editor is not displaying.

And use the browser's inspect tool to look at the HTML being generated. If the Monaco Editor is being initialized correctly, there should be some Monaco-specific markup on the page.

Check also the Network tab in the DevTools: That can show you if there are any network requests failing, such as trying to load a script or other resource and getting a 404. Make sure the dist/ folder is being served correctly. The HTTP server should serve the compiled JavaScript and other resources. Check the paths in the Network tab to see if they match where the resources are being served from.

I don't see errors in the console or in the DevTools.