Open chengtie opened 1 year ago
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.
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.
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?
@chengtie Can you edit your last message, and put the text, in addition of the screen capture?
@chengtie Can you edit your last message, and put the text, in addition of the screen capture?
I added the messages.
@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 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.
After git-cloning the project on my machine (node: 14.21.3), I did
yarn
to install the packages. Thenyarn build
returned me the following error: