monaco: dist/monaco.bundle.js not found

batchor commented 2 months ago

I couldn't setup the monaco demo due to 404 not found error of dist/monaco.bundle.js.

The editor area is not editable and I got the error in the console.

Screenshot:

Terminal log

npm start

> yjs-monaco-demo@1.0.0 start
> webpack serve --open monaco.html

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8081/
<i> [webpack-dev-server] On Your Network (IPv4): http://10.1.93.204:8081/
<i> [webpack-dev-server] Content not from webpack is served from '/webdata/yjs-demos/monaco' directory
<i> [webpack-dev-middleware] wait until bundle finished: /monaco.html
assets by chunk 611 KiB (id hint: vendors)
  asset vendors-node_modules_monaco-editor_esm_vs_language_json_jsonMode_js.bundle.js 84.5 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_language_html_htmlMode_js.bundle.js 70.9 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_language_css_cssMode_js.bundle.js 69.7 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_language_typescript_tsMode_js.bundle.js 43.8 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_basic-languages_solidity_solidity_js.bundle.js 26.2 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_basic-languages_freemarker2_freemarker2_js.bundle.js 25.9 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_basic-languages_powerquery_powerquery_js.bundle.js 22.4 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_basic-languages_abap_abap_js.bundle.js 21.6 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_basic-languages_pgsql_pgsql_js.bundle.js 18.7 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_basic-languages_redshift_redshift_js.bundle.js 16.9 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_basic-languages_mysql_mysql_js.bundle.js 16.7 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_basic-languages_sql_sql_js.bundle.js 15.5 KiB [emitted] (id hint: vendors) 1 related asset
  + 14 assets
+ 65 assets
runtime modules 29.7 KiB 16 modules
modules by path ./node_modules/monaco-editor/esm/vs/ 9.08 MiB (javascript) 71.9 KiB (asset) 1040 modules
modules by path ./node_modules/lib0/*.js 110 KiB 33 modules
modules by path ../node_modules/ 172 KiB 26 modules
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.84 KiB 6 modules
modules by path ./node_modules/y-protocols/*.js 14.8 KiB
  ./node_modules/y-protocols/sync.js 4.54 KiB [built] [code generated]
  + 2 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.33 KiB
  ./node_modules/css-loader/dist/runtime/sourceMaps.js 505 bytes [built] [code generated]
  + 2 modules
modules by mime type image/svg+xml 3.17 KiB
  data:image/svg+xml;base64,PHN2ZyB3aWR0aD0i.. 1.59 KiB [built] [code generated]
  data:image/svg+xml;base64,PHN2ZyB3aWR0aD0i.. 1.59 KiB [built] [code generated]
+ 5 modules
webpack 5.91.0 compiled successfully in 11946 ms

Steps to reproduce:

fresh clone of this repo,
go to the root directory and install deps: cd yjs-demos && npm i
go to the monaco subdirectory and install deps: cd monaco && npm i
start the server via npm run start and then go to browser.

Environment to reproduce

I tried two different environments with the same error:

Ubuntu 20


uname -a
Linux Dell-Precision-5820-Tower 6.5.0-35-generic #35~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Tue May  7 09:00:52 UTC 2 x86_64 x86_64 x86_64 GNU/Linux

node --version v20.5.1


2. OSX

uname -a Darwin macstudio 23.1.0 Darwin Kernel Version 23.1.0: Mon Oct 9 21:28:45 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6020 arm64

node --version v21.7.3



## Expected behaviour:

I am suppose to see a working example of monaco editor.

suurkivi commented 2 months ago

@batchor npm run dist fixed this for me

batchor commented 2 months ago

@suurkivi Oh, that worked! Thanks for the fix.

@dmonad Can we also add this into README.md?

dmonad commented 2 months ago

I wonder if there is a better way to bundle monaco. The production bundle is above 3MB, and there are all these weird issues.. If anyone knows, please let me know. I'd be happy to use another bundler if that's what people do.

I fixed the start script by checking if the monaco.bundle.js exists.

yjs / yjs-demos