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

[ashleydavis]

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Code

The sample browser-esm-parcel is not working.

Steps to reproduce:

git clone git@github.com: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 "marked@4.0.12"
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 # which has only a getter