Support for module.js or commonjs?

[trstringer]

It looks like this isn't the case, as with Node.js and webpack I'm unable to require('.../editor.main'). Is that correct that there is no support for modulejs or common.js?

[joeskeen]

I'm not sure whether you are talking about TypeScript or JavaScript here, and this may not fully answer your question, but I was able to get TS imports kind of working in my Monaco plugin for Reveal.JS: https://github.com/joeskeen/reveal.js-monaco/blob/master/plugin/monaco/monaco.js#L23 So far though, I haven't found out how to load files into the inmemory:// 'model' so I haven't gotten relative path imports to work, but I can import things from ambient modules. Also, it seems that you have to load the references before loading the editor or it won't recognize them. A lot of what I have found has been trial/error as I haven't found much documentation or examples to help me. If you come up with a better way please let me know :)

[trstringer]

@joeskeen good info thanks for that. I'm using JavaScript and basically what I'm trying to do is wrap the monaco editor in a React component. It's turning out to be quite painful, it not simply impossible. AMD is a monster to work with (in my experience) and webpack isn't liking any of it, even with my attempts to just get a component module working and abstracted so I can just forget about it. Even with the requires, webpack is throwing a bunch of internal ref errors and not able to work with it.

Hopefully somebody from the monaco team can shed a little light on the best way we can go about this. Monaco editor is just downright awesome. Simply amazing. But for more complex scenarios (i.e. component-izing the editor in React) it's proving to be tricky.

[alexdima]

I don't think wrapping the editor in a React component would pose any issues, I think you run into issues with webpack + the editor.

I am not an expert in webpack, I haven't used it in any project, do they have a guide on how to load bundled AMD code (the bundled is the magic keyword here that I think is not to webpack's liking).

Issue #18 might be related

[trstringer]

@alexandrudima Thanks for the quick reply! I'm not figuring out the way to wrap it in React, or do you mean just putting all of that markup in a single component and being done with it? I guess I could just create the <script /> tag with document.createElement() before the component mounts. That seems to be the only way, as attempting to require() any of these monaco scripts is proving to be fruitless.

[qballer]

@tstringer did you ever work out a solution for this?

[trstringer]

@qballer nope unfortunately I have not yet.

[bvaughn]

Based on my own experiments and this comment in another issue thread, I think the only way for it work currently requires you to

1. Use a plugin like CopyWebpackPlugin to copy 'node_modules/monaco-editor/min/vs' to 'vs' (to resolve module dependencies inside the loaded Monaco code).
2. Use AMD require syntax (eg require(['vs/...js'], () => {...})) for loading vs/loader.js and vs/editor/editor.main.js.

The 2nd is distasteful but the first is kind of a deal-breaker in our current project.

ES6 module support would be really nice. 😦

[qballer]

@bvaughn yep, did just that based on this.

[bvaughn]

Yeah. It works if you're willing to break your Webpack bundle up for the special vs addition. Doesn't seem worth it, when there's brace and react-codemirror.

To be clear, Monaco itself looks hot and I was pretty excited about giving it a try.

[trstringer]

@qballer That looks like a relatively elegant solution. Any "gotchas"?

@bvaughn What'd you end up going with?

[bvaughn]

Sticking with Ace (Brace) for the time being. Don't like it very much but my initial experimentation with CodeMirror hasn't been that much better and Monaco's awkwardness in this area makes it unappealing. :/

[qballer]

@tstringer monaco-editor build isn't suitable for all cases. Need to use monaco plugins with editor-core directly. In other words, there is nothing elegant about it :). Common is needed.

[marxo]

Are there plans to support or existing support for ES2015 module? We're using it with Meteor and require syntax causes problems loading other modules.

[yesvods]

@bvaughn @qballer Good Job.

[jtheoof]

The monaco-editor seems promising in many areas, but the lack of proper es2015 modules make it very difficuly to use in a modern build (webpack in my case). Improvements in that aspect would be greatly appreciated 😄

[muffadalis]

Was anyone able to make it work with AngularJs 1.6.3 & Webpack 2.2? I have tried everything mentioned in this thread and this thread. We are not in a position to change to Angular 2.0 or React as of this moment

Can anyone shed some light on this? Thanks.

[rohmanhm]

the monaco-editor is tough enough to implement.

[scniro]

Is this going to properly addressed?

[corbinu]

I just wanted to add this is a huge issue for me also. It would be super beneficial to be able to load this as an ES2015 module.

[DAddYE]

Same here. Is it planned?

[TyOverby]

Lack of support is a dealbreaker.

[RobertBColton]

+1 I'm really having a hard time trying to statically bundle monaco-editor in a Rollup+ Vue.js app.

[danielo515]

I want to sum to this issue. I don't see why monaco-editor can not be provided as any other JS library. Codemirror has far worst performance and less functionality, but at least I can include it in my workflow

[egamma]

Please see these explanation https://github.com/Microsoft/monaco-editor/issues/18#issuecomment-324592395 from @alexandrudima for an in depth explanation on the challenges.

[alexdima]

Done with #18.