[Bug] The sample browser-esm-parcel is not working

[ashleydavis]

Reproducible in vscode.dev or in VS Code Desktop?

• [X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• [X] Not reproducible in the monaco editor playground

Monaco Editor Playground Code

The sample browser-esm-parcel is not working.

Steps to reproduce:

git clone [email protected]:microsoft/monaco-editor.git
cd monaco-editor
cd samples/browser-esm-parcel
npm install
npm start

Open browser to http://localhost:1234/ to view the web page served Parcel's dev server.

Open the dev console.

Actual Behavior

An empty box appears in the web page where the Monaco Editor should be rendered.

The following error is output to the dev console:

Uncaught TypeError: Cannot set property marked of #<Object> which has only a getter
    at index.975ef6c8.js:117651:24
    at index.975ef6c8.js:115678:72
    at index.975ef6c8.js:115682:7
    at Object.jVSjm.@parcel/transformer-js/src/esmodule-helpers.js (index.975ef6c8.js:117664:3)
    at newRequire (index.975ef6c8.js:71:24)
    at localRequire (index.975ef6c8.js:84:35)
    at Object.5JIxC../dom.js (index.975ef6c8.js:113756:17)
    at newRequire (index.975ef6c8.js:71:24)
    at localRequire (index.975ef6c8.js:84:35)
    at Object.6TtqN.../../../../base/browser/markdownRenderer.js (index.975ef6c8.js:113600:27)

Expected Behavior

I expect to see Monaco Editor working in the web page and no errors in the dev console.

Additional Context

No response

[ashleydavis]

Updating the example to the latest Parcel (2.3.2) doesn't fix the problem.

Updating to the latest monaco-editor (0.32.1) doesn't fix it either.

[ashleydavis]

Here's the stack trace for the error with source map applied:

Uncaught TypeError: Cannot set property marked of #<Object> which has only a getter
    at marked.js:2934:17
    at marked.js:22:66
    at marked.js:25:2
    at Object.jVSjm.@parcel/transformer-js/src/esmodule-helpers.js (marked.js:2947:2)
    at newRequire (index.975ef6c8.js:71:24)
    at localRequire (index.975ef6c8.js:84:35)
    at Object.5JIxC../dom.js (markdownRenderer.js:19:7)
    at newRequire (index.975ef6c8.js:71:24)
    at localRequire (index.975ef6c8.js:84:35)
    at Object.6TtqN.../../../../base/browser/markdownRenderer.js (markdownRenderer.js:24:7)

[jeffawang]

I had a similar issue when trying to use monaco-editor in another project. I was able to get it working by specifying monaco-editor version 0.31.0. Likewise, this sample works after specifying monaco-editor version 0.31.0 in the sample's package.json.

One difference I notice is that the latest monaco-editor uses version 4.0.12 of marked, while the older monaco-editor that works uses version 3.0.8 version of marked.

I think it's a transitive dependency, and I haven't dug deeper into it.

$ git rev-parse --short HEAD
db5039b7
$ yarn why marked
yarn why v1.22.17
...
=> Found "[email protected]"
info Reasons this module exists
   - "typedoc" depends on it
   - Hoisted from "typedoc#marked"
...

[NO-MAP]

same error.

i am using monaco-editor with vite.

got this error

Uncaught TypeError: Cannot set property marked of #<Object> which has only a getter
    at marked.js:2934

the error code is

exports.marked = marked;

temporary fix:

// exports.marked = marked;
Object.defineProperty(exports, 'marked', marked)

there should be some better solutions.

this might be related to esbuild. Cannot set property of #<Object> which has only a getter

[graphemecluster]

Related: https://github.com/parcel-bundler/parcel/issues/5011

I am using the editor with React and Parcel and encounter the same problem.

Unfortunately with @NO-MAP's temporary fix, the source code compiles successfully but then the error same as #3035 occurs. Remove everything between // ESM-uncomment-begin and // ESM-uncomment-end is the correct workaround to fix both this issue and #3035, at least for my case:

@@ -8,17 +8,8 @@
  * DO NOT EDIT THIS FILE
  * The code in this file is generated from files in ./src/
  */
 
- // ESM-uncomment-begin
- let __marked_exports = {};
- (function() {
-   function define(deps, factory) {
-     factory(__marked_exports);
-   }
-   define.amd = true;
- // ESM-uncomment-end
- 
  (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.marked = {}));
@@ -2942,9 +2933,4 @@
 
   Object.defineProperty(exports, '__esModule', { value: true });
 }));
 
- // ESM-uncomment-begin
- })();
- export var marked = (__marked_exports || exports);
- // ESM-uncomment-end
- 

[graphemecluster]

Info: the change was introduced in https://github.com/microsoft/vscode/pull/141429. Better opening a issue in the VSCode repo.

[PredokMiF]

I got same issue. Version downgrade was helped me:

[email protected]
@monaco-editor/[email protected]
@monaco-editor/[email protected]```

[hediet]

Is someone up for a PR to fix this?

[maxburs]

@hediet Created a PR here: https://github.com/microsoft/vscode/pull/178179

[bibek-stripe]

Looks like that PR was merged, is this issue resolved in monaco-editor now?

[Mai-Lapyst]

Can confirm that the example browser-esm-parcel works when upgrading to aleast 0.37.1 (only tested it with the latest parcel version of 2.9.3). Also works in the most recent version of 0.43.0.

[sabberworm]

FWIW, versions 0.38.0 through 0.45.0 were all working fine for me when bundling with parcel. Starting with 0.46.0, the build fails again, due to the way parcel shims the process global. It seems the maintainers noticed this (see 8617a8af9e1d30366e8bea7063382b43fc62a589 and 9488e7e078b8252e0e5401759be3b025384e1119) but otherwise didn’t do anything about it.

[maxburs]

@sabberworm We worked around this by patching Monaco. You can see the patch here: https://github.com/Azure/monaco-kusto/blob/110f6ea65ca3e52e079622951472a21d79fdf7bc/.yarn/patches/monaco-editor-npm-0.46.0-fb69b10c11.patch

I haven't tried opening a PR with that patch because it seems more like a Parcel issue than a Monaco one, but, the patch also seems fairly innocuous if anyone else wants to give it a shot.