Integrate monaco editor into ember octane

Question

I try to integrate the monaco code editor into my ember octane application. Currently I'm using the ESM import style and confirming to the manual, I installed the webpack loader plugin and integrated it into my ember-cli-build.js

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    autoImport: {
      webpack: {
        plugins: [
          new MonacoWebpackPlugin()
        ]
      }
    }
  });

  // Use `app.import` to add additional libraries to the generated
  // output files.
  //
  // If you need to use different assets in different
  // environments, specify an object as the first parameter. That
  // object's keys should be the environment name and the values
  // should be the asset to use in that environment.
  //
  // If the library that you are including contains AMD or ES6
  // modules that you would like to import into your application
  // please specify an object with the list of modules as keys
  // along with the exports of each module as its value.

  return app.toTree();
};

But when building my application, I always get the error messages:

Module parse failed: Unexpected token (8:0) You may need an appropriate loader to handle this file type.

And

(node:7993) UnhandledPromiseRejectionWarning: Error: webpack returned errors to ember-auto-import

Can anyone help me and tell me how to integrate monaco correctly into my ember application? Thank you very much!

Answer 1

I strongly recommend using ember-monaco instead of monaco-editor, unless the following are all true: you are already successfully using Embroider, ember-monaco is missing a key feature that is impossible to add to that package, and you can dedicate significant effort to setting it up by hand in the Ember app (weeks).

In order to use Webpack plugins in an Ember app, you would also need to install and use Embroider. Regular ember-cli builds do not use Webpack at all, so the Webpack plugin will not work.

If you are committed to using monaco-editor directly, you must:

• use Embroider
• have monaco-editor installed
• have the Webpack plugin monaco-editor-webpack-plugin installed,
• install a polyfill (@cardstack/requirejs-monaco-ember-polyfill), and follow the readme to register
• register the webpack plugin and import the css files

Here's a sample ember-cli-build.js file:

'use strict';

process.env.BROCCOLI_ENABLED_MEMOIZE = 'true';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    prember: {
      // we're not pre-rendering any URLs yet, but we still need prember because
      // our deployment infrastructure already expects `_empty.html` to exist
      // for handling unknown URLs.
      urls: [],
    },
  });

  app.import('node_modules/monaco-editor/dev/vs/editor/editor.main.css');

  return (function() {
    const Webpack = require('@embroider/webpack').Webpack;
    const { join } = require('path');
    const { writeFileSync } = require('fs');

    return require('@embroider/compat').compatBuild(app, Webpack, {
      staticAddonTestSupportTrees: true,
      staticAddonTrees: true,
      staticHelpers: true,
      staticComponents: true,
      onOutputPath(outputPath) {
        writeFileSync(join(__dirname, '.embroider-app-path'), outputPath, 'utf8');
      },
      packagerOptions: {
        webpackConfig: {
          plugins: [new MonacoWebpackPlugin()],
        },
      },
// ...