microsoft / monaco-editor-webpack-plugin Goto Github PK

View Code? Open in Web Editor NEW

483.0 483.0 100.0 706 KB

Moved to https://github.com/microsoft/monaco-editor

monaco-editor-webpack-plugin's Introduction

This repository has been merged into https://github.com/microsoft/monaco-editor

monaco-editor-webpack-plugin's People

Contributors

Stargazers

Watchers

Forkers

stefan-lacatus hanjingboo dmitriylyner adam4lexander fatelei timkendrick yesmeck steve8708 kfcoding bosmo mikegreiling liyann budlion brijeshb42 dgeibi yaosha nicoabie chrisdakin kandl lolleko 493636333 waterfoul dturcotte kube devpodio reboxjs linecode pimterry 3l3n01 dalavancloud veeramarni masad-frost cyriacbr hakanaku1234 taaqif jostinsu domoritz brokun uzxmx ozonep mdesrosiers frstio sunqiang25 uzty loomesoftware pipedreamhq keiki zhixzhan danilotorrisi dlannoye teamo-dj jimmydief andrewsverdrup shynome brentbaum wandb caohuilin kevleong gdamron buremba bcourtes mikolalysenko pwinston crossskyli bhaskers-blu-org2 aringlai nolanpro myywlc cshaver taffywrinkle claudiusgonzo gavinxgu davinov niaoshuai yyl1123456 wangwenjie1314 chalp sangmokh rob-opsi yazansalhi jxh150535011 jsonwangz cirosantilli replit six-ponies dlapianosipos silverwind thchan384 billdestein megaputer chaseknowlden

monaco-editor-webpack-plugin's Issues

typescriptServices.js compiled despite language not included in languages array

I noticed that with monaco-editor-webpack-plugin, the build took significantly longer than with the config I had before. I noticed this logline:

[BABEL] Note: The code generator has deoptimised the styling of "/buildkite/builds/buildkite-agent-dd84f899d-lss4w/sourcegraph/.golang/sourcegraph/src/github.com/sourcegraph/sourcegraph/web/node_modules/monaco-editor/esm/vs/language/typescript/lib/typescriptServices.js" as it exceeds the max of "500KB".

Which means the (huge) file typescriptServices.js (and probably all other languages too) was being piped through Babel and chunks generated from it, despite my config only specifying json as a language:

new MonacoWebpackPlugin({
            languages: ['json'],
            features: [
                'clipboard',
                'comment',
                'contextmenu',
                'coreCommands',
                'cursorUndo',
                'dnd',
                'find',
                'format',
                'hover',
                'inPlaceReplace',
                'iPadShowKeyboard',
                'linesOperations',
                'links',
                'parameterHints',
                'quickCommand',
                'quickFixCommands',
                'smartSelect',
                'suggest',
                'wordHighlighter',
                'wordOperations',
            ],
        }),

On Windows, I got this error:

ERROR in ./node_modules/monaco-editor/esm/vs/language/typescript/lib/typescriptServices.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\felix\src\github.com\sourcegraph\sourcegraph\web\node_modules\monaco-editor\esm\vs\language\typescript\lib'

Again, despite typescript not being specified as a language.

I would expect the plugin to include only the files needed for the given languages and not compile all the languages into chunks that are never loaded.

@types/webpack should be DevDependency

Any reason why "@types/webpack": "^4.4.19" is a Dependency and not a Dev-Dependency?

Failed to generate smaller editor bundle by selecting certain languages or editor features

Even I set the languages and features options, the generated bundle will still include all languages & features:

new MonacoWebpackPlugin({
  languages: ['java', 'json'],
  features: ['find'],
})

Possible Causes

webpack will use the module field of package.json as module entry:

"module": "./esm/vs/editor/editor.main.js",

When we deal it with our include.js loader:

https://github.com/Microsoft/monaco-editor-webpack-plugin/blob/ff60cf8b84ad4895cddca612814b4228560ddfa6/loaders/include.js#L17

it will generate:

module.exports = require('editor.main.js');

But the editor.main.js file will include all languages & features.

So I think we should replace it with editor.api.js, something like:

`module.exports = require(${loaderUtils.stringifyRequest(
  this,
  `!!${remainingRequest.replace('editor.main.js', 'editor.api.js')}`
)});`,

TypeScript: need module declaration for use in TypeScript webpack config

We use TypeScript even for webpack configs, but unfortunately this plugin doesn't have any type definitions:

webpack.config.ts(3,33): error TS7016: Could not find a declaration file for module 'monaco-editor-webpack-plugin'. '/[path]/node_modules/monaco-editor-webpack-plugin/index.js' implicitly has an 'any' type.

Even something as simple as declare module 'monaco-editor-webpack-plugin'; would be helpful. I could imagine you going as far as checking all options like the language list, if you were so inclined, but that wouldn't be blocking.

Any chance of getting at least the module definition in place? Thanks!

'.apply()' is missing from the typescript definition

File: monaco-editor-webpack-plugin\index.d.ts

The exported plugin type does not implement the plugin type from @types/webpack properly, which leads to such errors:

        Type 'MonacoEditorWebpackPlugin' is not assignable to type 'Plugin'.
          Property 'apply' is missing in type 'MonacoEditorWebpackPlugin'.

monaco-editor-webpack-plugin work with electron error

When I use monaco-editor-webpack-plugin in electron project, I got 2 errors. It takes me a few days to investigate, but still cannot figure it out.

First error is in the command line.

warning  in ./node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js
Critical dependency: the request of a dependency is an expression

Second error is in the "Developer Tools->Console"

errors.js?fdcc:58 Uncaught Error: Cannot find module 'vs/language/typescript/tsWorker'

Error: Cannot find module 'vs/language/typescript/tsWorker'
    at webpackEmptyContext (eval at ./node_modules/monaco-editor/esm/vs/editor/common/services sync recursive (

You can reproduce the bug use the code in https://github.com/wenbinke/monaco-editor-electron.

yarn
yarn serve:electron

======================================================================

https://github.com/wenbinke/monaco-editor-electron/blob/master/vue.config.ts

import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';

export default {
  configureWebpack: {
    plugins: [
      new MonacoWebpackPlugin(),
    ],
  },
};

https://github.com/wenbinke/monaco-editor-electron/blob/master/src/views/Home.vue

import { Component, Vue } from "vue-property-decorator";
import * as monaco from "monaco-editor";

@Component
export default class Home extends Vue {
  public $refs!: {
    container: HTMLElement;
  }
  public mounted() {
    monaco.editor.create(this.$refs.container, {
      value: 'console.log("Hello, world")',
      language: "javascript"
    });
  }
}

Node must have a real position for this operation

Hello,

I'm currently running into an issue where I'm not sure what to do. Monaco is loading fine, giving language support for HTML and CSS but for JS I'm getting this exception from the typescript worker as soon as I type in the editor or hover over any keywords:

Uncaught Error: Debug Failure. False expression: Node must have a real position for this operation

Error: Debug Failure. False expression: Node must have a real position for this operation

which stems from this check

return t.prototype.assertHasRealPosition = function(n) {
    e.Debug.assert(!e.positionIsSynthesized(this.pos) && !e.positionIsSynthesized(this.end), n || "Node must have a real position for this operation")
}

Added via the plugins in the webpack config - like this new MonacoWebpackPlugin() - without specifying any languages (which should give me support for all of them if I read it correctly). I'm not doing anything fancy otherwise - just importing and creating, pretty much as shown in the docs.

Version:

"monaco-editor": "0.18.1",
"monaco-editor-webpack-plugin": "1.7.0",

Has anyone encountered this error before?

Thanks

Bundled size is always 4MB larger even with API

Using Webpack 4.17, webpack-dev-server 3.1.7, react.

No matter what I do, when I include the editor via import, it adds at least 4 MB to my bundle size. All I need is JSON Editor with Hover Error Hinting.

Tried copying setup from https://github.com/Microsoft/monaco-editor-samples/blob/master/browser-esm-webpack-small

webpack.config.js

entry: {
      main: "./src/index.js",
      "editor.worker": "monaco-editor/esm/vs/editor/editor.worker.js",
      "json.worker": "monaco-editor/esm/vs/language/json/json.worker"
    },
...
plugins: [
      htmlPlugin,
      new MonacoWebpackPlugin({
        languages: ["json"],
        features: ["find"]
      })
  ]

In my React Component

...
import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';
import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
import 'monaco-editor/esm/vs/language/json/monaco.contribution';
...

initMonaco() {
  // workers is an object that has the file names for all the workers
  let workers = {
    json: "/json.worker.HASH.bundle.js",
    editor: "/editor.worker.HASH.js"
  }

   window.MonacoEnvironment = {
      getWorkerUrl: function(moduleId, label) {
        if (label === "json") {
          // return "/json.worker.bundle.js";
          return workers.json;
        }
        return workers.editor;
      }
    };

  monaco.editor.create(this.containerElement, {
      language: "json"
    });
}

Ignoring 'fs' breaks electron

In order to use monaco in electron, we need the fs module. We noticed that this module is being ignored by monaco-editor-webpack-plugin in https://github.com/Microsoft/monaco-editor-webpack-plugin/blob/v1.1.0/index.js#L8. How do we not ignore fs in our webpack builds?

See react-monaco-editor/react-monaco-editor#111

cause AngularCompilerPlugin throws error

node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:509
if (this.done && (request.request.endsWith('.ts')
TypeError: Cannot read property 'request' of null

Module not found: Error: Can't resolve 'css-loader'

Hi, gays:

When building my angular-monaco-editor-component and using webpack to integrate the monaco editor(Angular + webpack + monaco-editor-webpack-plugin), I face a "Can't resolve 'css-loader'" error.
Here is the compile context:
Angular CLI: 1.7.4 (e)
Node: 8.9.0
OS: win32 x64
Angular: 5.2.11
typescript: 2.5.3
webpack-dev-server: 2.11.3
webpack: 3.11.0
"monaco-editor": "^0.14.3"
"monaco-editor-webpack-plugin": "^1.5.2"
The webpack compile-failed message is:
-- ERROR in ./node_modules/monaco-editor/esm/vs/base/parts/quickopen/browser/quickOpenWidget.js
Module not found: Error: Can't resolve 'css-loader' in 'D:\Git\Angular-Monaco-Editor'
@ ./node_modules/monaco-editor/esm/vs/base/parts/quickopen/browser/quickOpenWidget.js 16:0-25
@ ./node_modules/monaco-editor/esm/vs/editor/standalone/browser/quickOpen/quickOpenEditorWidget.js
@ ./node_modules/monaco-editor/esm/vs/editor/standalone/browser/quickOpen/editorQuickOpen.js
@ ./node_modules/monaco-editor/esm/vs/editor/standalone/browser/quickOpen/gotoLine.js
@ ./node_modules/monaco-editor/esm/vs/editor/edcore.main.js
@ ./node_modules/monaco-editor/esm/vs/editor/editor.main.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:4200 ./src/main.ts
-- ERROR in multi (webpack)-dev-server/client?http://localhost:4200 ./src/styles.css
Module not found: Error: Can't resolve 'css-loader' in 'D:\Git\Angular-Monaco-Editor'
@ multi (webpack)-dev-server/client?http://localhost:4200 ./src/styles.css

Generated chunks contain ES6 arrow functions: load fails on IE11

In createLoaderRules, the MonacoEnvironment global variable is defined as a string which uses an ES6 arrow function:

const globals = {
    'MonacoEnvironment': `((paths) => ({ getWorkerUrl: (moduleId, label) => paths[label] }))(${
      JSON.stringify(workerPaths, null, 2)
    })`,
 };

https://github.com/Microsoft/monaco-editor-webpack-plugin/blob/ff60cf8b84ad4895cddca612814b4228560ddfa6/index.js#L97-L101

That arrow function is then written to the generated chunk, which causes the loader to fail on IE 11.

I manually modified the plugin to generate ES5 compatible code, but is there any other solution?

editorSimpleWorker.js: "the request of a dependency is an expression"

i have multiple times this warning when building. any idea what causes this?

388:12-397:17 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js
 @ ./node_modules/monaco-editor/esm/vs/editor/common/services/editorWorkerServiceImpl.js
 @ ./node_modules/monaco-editor/esm/vs/editor/common/services/webWorker.js
 @ ./node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneEditor.js
 @ ./node_modules/monaco-editor/esm/vs/editor/editor.api.js
 @ include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.api.js
 @ ./node_modules/monaco-editor/esm/vs/language/typescript/monaco.contribution.js
 @ include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.main.js
 @ ./node_modules/react-monaco-editor/lib/editor.js
 @ ./node_modules/react-monaco-editor/lib/index.js
 @ ./Scripts/network/NetworkEditorServices.tsx
 @ ./Scripts/network/networkadmin.tsx
 @ multi (webpack)-dev-server/client?http://localhost:35280 webpack/hot/dev-server ./Scripts/network/networkadmin.tsx```

Slow compile time

The compile time of my React project increases significantly after adding Monaco editor. Sometimes taking up to 1 min 30 s when it originally took max 30 s.

It's not a surprise since Monaco is a huge library, but I'm mainly wondering about these huge worker files in my optimized build. Have I misconfigured my project somehow, should these really be in the build?

build/typescript.worker.js
build/css.worker.js
build/html.worker.js
build/json.worker.js

I'm using a non-ejected create-react-app

    "dependencies": {
        "monaco-editor": "^0.18.1",
        "monaco-editor-webpack-plugin": "^1.7.0",
        "react-scripts": "^3.2.0",
        ...
    },
    "devDependencies": {
        "react-app-rewired": "^2.1.1",
        "typescript": "3.6.4",
        ...
  }

After npm run build I'm seeing

File sizes after gzip:

  782.03 KB  build/static/js/3.ce211eac.chunk.js
  771.31 KB  build/typescript.worker.js
  380.22 KB  build/static/js/4.bf8b073d.chunk.js
  141.66 KB  build/css.worker.js
  74.64 KB   build/html.worker.js
  62.11 KB   build/static/js/main.ccd17313.chunk.js
  50.58 KB   build/json.worker.js
  36.02 KB   build/static/css/3.d24b89e0.chunk.css
  27.35 KB   build/editor.worker.js
  7.53 KB    build/static/js/55.4ef47588.chunk.js
  6.4 KB     build/static/js/46.a7f63dcf.chunk.js
  6.18 KB    build/static/js/28.37eb30d6.chunk.js
  5.89 KB    build/static/js/53.f16faf7a.chunk.js
  5.44 KB    build/static/js/54.075b7483.chunk.js
  5.01 KB    build/static/js/25.8b8df476.chunk.js
  4.78 KB    build/static/js/31.35341305.chunk.js
  4.35 KB    build/static/js/45.f4b0a646.chunk.js
  4.24 KB    build/static/js/38.73ce43ba.chunk.js
  3.93 KB    build/static/js/56.a8645251.chunk.js
  3.46 KB    build/static/js/9.b03e1a9c.chunk.js
  3.06 KB    build/static/js/27.bcdf4d57.chunk.js
  2.72 KB    build/static/css/main.e91fbd6d.chunk.css
  2.39 KB    build/static/js/30.9b97ef65.chunk.js
  2.35 KB    build/static/js/39.b91312bd.chunk.js
  2.08 KB    build/static/js/36.6066c54c.chunk.js
  2.05 KB    build/static/js/5.a7d380cb.chunk.js
  2.04 KB    build/static/js/29.bdf41560.chunk.js
  2.03 KB    build/static/js/47.160c9222.chunk.js
  2.02 KB    build/static/js/0.8c14b08e.chunk.js
  2.01 KB    build/static/js/50.d8b3a839.chunk.js
  1.93 KB    build/static/js/24.de9281d7.chunk.js
  1.92 KB    build/static/js/49.57275bf1.chunk.js
  1.75 KB    build/static/js/6.85dbafd9.chunk.js
  1.75 KB    build/static/js/40.7be8b49c.chunk.js
  1.73 KB    build/static/js/43.fefb7384.chunk.js
  1.72 KB    build/static/js/11.484d1951.chunk.js
  1.64 KB    build/static/js/33.06e31445.chunk.js
  1.6 KB     build/static/js/48.1b72796f.chunk.js
  1.6 KB     build/static/js/runtime-main.5eb37952.js
  1.47 KB    build/static/js/37.409baca6.chunk.js
  1.41 KB    build/static/js/21.c5a2b14f.chunk.js
  1.37 KB    build/static/js/34.169baa6f.chunk.js
  1.37 KB    build/static/js/13.e44d95c5.chunk.js
  1.37 KB    build/static/js/32.4d9d0e5a.chunk.js
  1.33 KB    build/static/js/20.5ddcbacd.chunk.js
  1.33 KB    build/static/js/17.26b338e3.chunk.js
  1.31 KB    build/static/js/15.aa20b655.chunk.js
  1.31 KB    build/static/js/10.b8df5b16.chunk.js
  1.26 KB    build/static/js/23.6cc16668.chunk.js
  1.23 KB    build/static/js/52.7b5d5fb4.chunk.js
  1.19 KB    build/static/js/18.5445ab65.chunk.js
  1.18 KB    build/static/js/35.f05e0278.chunk.js
  1.16 KB    build/static/js/44.87f2eb91.chunk.js
  1.15 KB    build/static/js/16.aa3ebfcd.chunk.js
  1.07 KB    build/static/js/26.f75f89d2.chunk.js
  958 B      build/static/js/22.3251516f.chunk.js
  899 B      build/static/js/8.a46278cb.chunk.js
  862 B      build/static/js/41.117b1368.chunk.js
  853 B      build/static/js/42.b4e37f22.chunk.js
  739 B      build/static/js/14.251b34d3.chunk.js
  659 B      build/static/js/51.5e30f329.chunk.js
  570 B      build/static/js/19.8d9f6df8.chunk.js
  563 B      build/static/js/12.e019bf22.chunk.js
  361 B      build/static/js/7.e811826d.chunk.js

The project was built assuming it is hosted at /{redacted}/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://bit.ly/CRA-deploy

Monaco editor webpack find shortcut is CTRL+F on MacOS

Environment

"monaco-editor": "^0.14.2",
"monaco-editor-webpack-plugin": "^1.5.1"

Failed to construct 'Worker' in cross origin case

I'm trying to add the Monaco Editor, but when I add the plugin and run webpack dev-server, I get

Could not create web worker(s). Falling back to loading web worker code in main thread, which might cause UI freezes.

simpleWorker.js:32 Failed to construct 'Worker': Script at 'http://localhost:3020/my-app/js/typescript.worker.js' cannot be accessed from origin 'http://www.local.app.com'

VM2033:37 Error: Unexpected usage
    at EditorSimpleWorkerImpl.BaseEditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:391)
    at webWorker.js:38
    at ShallowCancelThenPromise.CompletePromise_then [as then] (winjs.base.js:1587)
    at MonacoWebWorkerImpl._getForeignProxy (webWorker.js:37)
    at MonacoWebWorkerImpl.getProxy (webWorker.js:61)
    at WorkerManager.webpackJsonp.1711.WorkerManager._getClient (workerManager.js:53)
    at WorkerManager.webpackJsonp.1711.WorkerManager.getLanguageServiceWorker (workerManager.js:72)
    at DiagnostcsAdapter.worker [as _worker] (tsMode.js:39)
    at DiagnostcsAdapter.webpackJsonp.1712.DiagnostcsAdapter._doValidate (languageFeatures.js:144)
    at onModelAdd (languageFeatures.js:103)
    at Array.forEach (<anonymous>)
    at new DiagnostcsAdapter (languageFeatures.js:135)
    at setupMode (tsMode.js:50)
    at Object.setupJavaScript (tsMode.js:14)
    at monaco.contribution.js:154
    at Object.notifySuccess [as _notify] (winjs.base.js:1191)

Then if I use the Editor I get

FATAL - Uncaught Error: Unexpected usage
Error: Unexpected usage
    at EditorSimpleWorkerImpl.BaseEditorSimpleWorker.loadForeignModule (http://localhost:3020/my-app/my-app.js:188462:103)
    at http://localhost:3020/my-app/my-app.js:192459:30
    at ShallowCancelThenPromise.CompletePromise_then [as then] (http://localhost:3020/my-app/my-app.js:5624:49)
    at MonacoWebWorkerImpl._getForeignProxy (http://localhost:3020/my-app/my-app.js:192458:143)
    at MonacoWebWorkerImpl.getProxy (http://localhost:3020/my-app/my-app.js:192482:21)
    at WorkerManager.webpackJsonp.1711.WorkerManager._getClient (http://localhost:3020/my-app/4.js:127:34)
    at WorkerManager.webpackJsonp.1711.WorkerManager.getLanguageServiceWorker (http://localhost:3020/my-app/4.js:146:44)
    at DiagnostcsAdapter.worker [as _worker] (http://localhost:3020/my-app/4.js:52:48)
    at DiagnostcsAdapter.webpackJsonp.1712.DiagnostcsAdapter._doValidate (http://localhost:3020/my-app/4.js:329:14)
    at onModelAdd (http://localhost:3020/my-app/4.js:288:19)
    at Array.forEach (<anonymous>)
    at new DiagnostcsAdapter (http://localhost:3020/my-app/4.js:320:35)
    at setupMode (http://localhost:3020/my-app/4.js:63:5)
    at Object.setupJavaScript (http://localhost:3020/my-app/4.js:27:24)
    at http://localhost:3020/my-app/my-app.js:69160:57
    at Object.notifySuccess [as _notify] (http://localhost:3020/my-app/my-app.js:5228:59) in:
 http://localhost:3020/my-app/my-app.js:3657 col:27

My webpack configuration is:

{  
   "entry":{  
      "my-app":[  
         "webpack-dev-server/client?http://localhost:3020",
         "webpack/hot/only-dev-server",
         "./src/ts/index.tsx"
      ]
   },
   "output":{  
      "path":"/path/to/dist/js",
      "filename":"[name].js",
      "publicPath":"http://localhost:3020/my-app/js/"
   },
   "module":{  
      "rules":[  
           // giant rules for Tyepscript, JSON, CSS, LESS, and Monaco that the plugin adds
      ]
   },
   "resolve":{  
      "extensions":[  
         ".js",
         ".jsx",
         ".json",
         ".less",
         ".css",
         ".ts",
         ".tsx",
      ],
   },
   "plugins":[  
      {  
         "definitions":{  
            "ENV_DEV":"true",
            "ENV_PROD":"false",
            "process.env.NODE_ENV":"\"development\""
         }
      },
      /* Monaco Plugin is loaded -- not showing it cause it's giant */
   ],
   "devtool":"#source-map",
   "devServer":{  
      "headers":{  
         "Access-Control-Allow-Origin":"*"
      },
      "host":"localhost",
      "port":3020,
      "publicPath":"http://localhost:3020/my-app/js/",
      "hot":true,
      "inline":true,
      "contentBase":"/path/to/base"
   }
}

Webpack 3 support

It would be nice if there was support for webpack 3 as well. This is a requirement for me as I am using create-react-app. The below comment also mentions that vue uses webpack 3 as well.

This comment mentions the problem code. I made the fix as per timkendrick's following comment but ran into issues with webpack.webworker being undefined. I changed the way that the SingleEntryPlugin, LoaderTargetPlugin and WebWorkerTemplatePlugin get required and this fix works for me locally. It would be great if this could make it into the repo somehow.

Below is my working local version of AddWorkerEntryPointPlugin.js

const singleEntry = require('webpack/lib/SingleEntryPlugin');
const loaderTarget = require('webpack/lib/LoaderTargetPlugin');
const webworker = require('webpack/lib/webworker/WebWorkerTemplatePlugin');

class AddWorkerEntryPointPlugin {
  constructor({
    id,
    entry,
    filename,
    chunkFilename = undefined,
    plugins = undefined,
  }) {
    this.options = { id, entry, filename, chunkFilename, plugins };
  }

  apply(compiler) {
    const { id, entry, filename, chunkFilename, plugins } = this.options;
    compiler.plugin('make', (compilation, callback) => {
      const outputOptions = {
        filename,
        chunkFilename,
        publicPath: compilation.outputOptions.publicPath,
        // HACK: globalObject is necessary to fix https://github.com/webpack/webpack/issues/6642
        globalObject: 'this',
      };
      const childCompiler = compilation.createChildCompiler(id, outputOptions, [
        new webworker(),
        new loaderTarget('webworker'),
        new singleEntry(compiler.context, entry, 'main'),
      ]);
      plugins.forEach((plugin) => plugin.apply(childCompiler));
      childCompiler.runAsChild(callback);
    });
  }
}

module.exports = AddWorkerEntryPointPlugin;

Monaco-editor-webpack-plugin, language configuration lacks graphql

Monaco-editor-webpack-plugin, language configuration lacks graphql, file is located in monaco-editor-webpack-plugin/languages.js

Add custom language worker

Hello,
I want to add a custom language worker, I don't want to use the existing ones for ts,js, html...,I want to create a new worker for my own language which will communicate with my language service, also I don't want to use monaco-languageclient because it uses an old version of monaco.
### any help will be appreciated!
Thanks!

how to load custom language feature

With the amd method, I can use require to load vue language feature as below:

amdRequire(
                ['vs/editor/editor.main'],
                () => {
                    // Load Vue language extension
                    amdRequire(['vs/language/vue/monaco.contribution'], () => {
                        resolve(window.monaco);
                    });
                });

how I can use esm method to load my language feature(vue)?

monaco-editor generates a webpack bundle for each language

Hello everyone,

I am using react-monaco-editor with the monaco-editor-webpack-plugin to load the editor with webpack 4.20.2.
When I compile my code, each language generates its own bundle even though I passed as options of the plugin the array ["javascript", "typescript"].

How can I prevent this and only create bundles for the languages I want to use?

Thank you very much

Reference Search does not appear

import editor.api
include all features

vs/editor/contrib/referenceSearch/referenceSearch is not imported, which makes it that Reference Search is not in the context menu.

Consider prepare script in package.json?

Now that the project is converted to typescript, installing from git source no longer works (the out dir is not built).

Side note: when are you planning on cutting the next release? I mostly am interested in the graphql language support which I see landed in master 2 days ago (and to see if CORS improvements allow us to delete some code).

Getting "Unexpected usage" in console

After creating a new project:
npm init
npm install --save webpack monaco-editor monaco-editor-webpack-plugin style-loader css-loader

+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]

If I run the example code from the main page, I get the following in the browser console:

Error: Unexpected usage
    at EditorSimpleWorkerImpl.BaseEditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:407)
    at eval (webWorker.js:42)
    at ShallowCancelThenPromise.CompletePromise_then [as then] (winjs.base.js:1591)
    at MonacoWebWorkerImpl._getForeignProxy (webWorker.js:41)
    at MonacoWebWorkerImpl.getProxy (webWorker.js:65)
    at WorkerManager._getClient (workerManager.js:55)
    at WorkerManager.getLanguageServiceWorker (workerManager.js:74)
    at DiagnostcsAdapter.worker [as _worker] (tsMode.js:46)
    at DiagnostcsAdapter._doValidate (languageFeatures.js:158)
    at onModelAdd (languageFeatures.js:117)

the editor appears, and typing works, but after every keypress I get:

Error: Unexpected usage
    at EditorSimpleWorkerImpl.BaseEditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:407)
    at eval (webWorker.js:42)
    at ShallowCancelThenPromise.CompletePromise_then [as then] (winjs.base.js:1591)
    at MonacoWebWorkerImpl._getForeignProxy (webWorker.js:41)
    at MonacoWebWorkerImpl.getProxy (webWorker.js:65)
    at WorkerManager._getClient (workerManager.js:55)
    at WorkerManager.getLanguageServiceWorker (workerManager.js:74)
    at SuggestAdapter.worker [as _worker] (tsMode.js:46)
    at SuggestAdapter.provideCompletionItems (languageFeatures.js:216)
    at SuggestAdapter.provideCompletionItems (standaloneLanguages.js:482)
    at EditorSimpleWorkerImpl.BaseEditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:407)
    at eval (webWorker.js:42)
    at ShallowCancelThenPromise.CompletePromise_then [as then] (winjs.base.js:1591)
    at MonacoWebWorkerImpl._getForeignProxy (webWorker.js:41)
    at MonacoWebWorkerImpl.getProxy (webWorker.js:65)
    at WorkerManager._getClient (workerManager.js:55)
    at WorkerManager.getLanguageServiceWorker (workerManager.js:74)
    at SuggestAdapter.worker [as _worker] (tsMode.js:46)
    at SuggestAdapter.provideCompletionItems (languageFeatures.js:216)
    at SuggestAdapter.provideCompletionItems (standaloneLanguages.js:482)

If I change language: 'javascript' to c, java, there are no errors on console (and coloring works). json, javascript, typescript gives the error (coloring kind of works. some keywords are colored).

In webpack.config.js it is new MonacoWebpackPlugin()

compiler object doesn't have options attribute when using webpack.config.js from create react app

https://github.com/Microsoft/monaco-editor-webpack-plugin/blob/master/index.js#L89 should check if compiler object has a defined options attribute.

Generated bundle names and loading bundle

I have set up the plugin using webpack.config.js:

"use strict";

// Required packages
const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

// Variables
const rootOutputDir = "wwwroot/js";

module.exports = {

    entry: "./Scripts/Build/Pages/Home/Index.js",

    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, rootOutputDir)
    },

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },

    resolve: {
        alias: {
            'monaco-editor': 'monaco-editor/esm/vs/editor/editor.api.js'
        }
    },

    plugins: [
        new CleanWebpackPlugin([rootOutputDir]),
        new MonacoWebpackPlugin({
            languages: ["xml"],
            features: ['wordHighlighter']
            })
    ]
};

This generated the following files in 'wwwroot/js':

0.js
editor.worker.js
main.js

I thought the point of this plugin and webpack in general was to bundle all the required modules into a single file. I have attempted to just load 'main.js' but it gives the following console errors:

GET https://localhost:44303/0.js net::ERR_ABORTED 404

It seems to be looking for the file in the root directory of my server rather than the place where it is generated which would be https://localhost:44303/js/0.js.

If I include all 3 scripts in my page everything is fine. So I have the following questions:

Why is my js file named '0.js'?
Do I need to include all files in my HTML page or is just including main.js supposed to work?
Why is the main.js looking for 0.js in the root of my webserver? Is there a path setting to modify this?

Set "language" to "razor" throws "Unexpected token <" and "Unexpected usage" error in the console

monaco-editor version: 0.15.5
monaco-editor-webpack-plugin version: 1.6.0
monaco-languages version: 1.6.0
webpack version: 4.25.1
vue version: 2.5.17
Browser: Chrome
OS: Windows 10

Steps to reproduce the issue:
Setup monaco-editor as described below and set the language to "razor":
I did it as simple as descriped here with "Option 1".

/*Initialistation in my ts-file*/
this.monacoEditor = monaco.editor.create(this.monacoEditorContainer, {
                    value: "",
                    language: "razor",
                    wordWrap: "on",
                    autoIndent: true,
                    formatOnPaste: true,
                    formatOnType: true,
                    scrollBeyondLastLine: true
                });
...

/* vue.config.ts */
...
module.exports = {
...
    configureWebpack: {
        node: {
            process: true,
        },
        performance: {
            maxEntrypointSize: 5242880,
            maxAssetSize: 1048576
        },        
        devtool: process.env.NODE_ENV === 'production' ? '' : 'source-map',
        output: {
            devtoolModuleFilenameTemplate: info => {
                var $filename = 'sources://' + info.resourcePath;
                if (info.resourcePath.match(/\.vue$/) && !info.allLoaders.match(/type=script/)) {
                    $filename = 'webpack-generated:///' + info.resourcePath + '?' + info.hash;
                }
                return $filename;
            },
            devtoolFallbackModuleFilenameTemplate: 'webpack:///[resource-path]?[hash]'    
        },
        module: {
            rules: [...]
        },
        plugins: [
            new MonacoWebpackPlugin()
        ]
    }
}
...

Result
The editor works and the highlighting for "razor" looks good, but I get instantly those error messages which I don't understand where they are from:

I believe the worker could not be created, because the third error is in the file "undefined" which looks like some broken bootstrapping html from webpack. If I look into the origin where the file is from it is close to "json.worker.js" and "css.worker.js" - just an idea.

Also thought it has to do with #32, too - but none of the solutions have worked for me.

Any help would be great. If I missed any information don't hesitate to ask.

Thank you in advance

Lucas

Update monaco-editor-webpack-plugin to support monaco-editor 0.17.0

Hello there!

The current version of the monaco-editor-webpack-plugin supports monaco-editor of version 0.15.1. However, the latest version of the monaco editor is 0.17.0.

Could you please update the monaco-editor-webpack-plugin to support the latest version monaco editor?

Thank you very much!

Using with CRA crashes the compilation because of Webpack thread-loader

Hello everybody !

While using monaco-editor-webpack-plugin with create-react-app we can see the following error below.

This seems to be because of an incompatibility in the Webpack configuration with thread-loader

ERROR in ./node_modules/monaco-editor/esm/vs/editor/editor.main.js
Module build failed: Thread Loader (Worker 4)
Cannot read property 'userRequest' of undefined

    at Object.pitch (C:\Repos\project-ui\node_modules\monaco-editor-webpack-plugin\loaders\include.js:9:61)
 @ ./src/index.js 3:0-40
 @ multi ./node_modules/project-devutils/config/polyfills.js ./node_modules/react-dev-utils/webpackHotDevClient.js ./src/index.js

What does this plugin offer over direct import?

How is it different from importing the monaco editor directly?

Does the direct import include everything unconditionally and this plugin lets you pick and choose?

Plugin depends on 'loader-utils' but it is not listed in package.json

The plugin requires 'loader-utils' from '/loaders/include.js' but 'loader-utils' is not listed as a dependency in the package json. This phantom dependency causes issues with package managers such as pnpm that do not create a flat node_modules structure.

[Question]How to disable default language feature and languageservice.

This is about two requestion.

1、I want use monaco-editor-textmate replace built-in monaco-editor languages features, for better syntaxic coloring using Textmate grammars. In documentation of monaco-editor-textmate:

To get monaco-editor-textmate working with monaco-editor, you're advised to use Webpack with monaco-editor-webpack-plugin which allows you to control which of "built-in" languages should monaco-editor use/bundle, leaving the rest. With that control you must exclude any/all languages for which you'd like to use TextMate grammars based tokenization instead.

I'm try to delete 'typescript' 'css' 'json' 'html' 'javascript' 'scss' 'less' 'handlebars' in languages array

new MonacoWebpackPlugin({
languages: ['bat', 'coffee', 'cpp', 'csharp', 'csp', 'dockerfile', 'fsharp', 'go', 'ini', 'java', 'lua', 'markdown', 'msdax', 'mysql', 'objective', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'ruby', 'rust', 'sb', 'scheme', 'shell', 'solidity', 'sql', 'st', 'swift', 'vb', 'xml', 'yaml']
})

but when i was open javascript/typescript file, i get some error :

It's look like still load default language features, maybe my understanding is wrong.

2、I successfully let TypeScript LSP work for my editor，but in some event, like hover, it's will render two hover tips，one contains the documentation, another one just simple type of hint, some part is same. so i want know how to disabled default typescriptLanguageServices of tsWorker.

maybe it's same requestion, i hope get some answers, thanks very much.

The generated worker files should support chunkhash

Right now, after webpack build, the worker files have names like <language>.worker.js even thought chunkhash has been passed in webpack options. This won't help in cache busting. I think this plugin should use the output option provided in webpack config to build the worker and language files too.

Allow specifying public path for worker files

We use Webpack's dynamic public path feature to set the URL from which we fetch our static resources at runtime. This allows us to programmatically enable/disable use of our CDN. Unfortunately, loading cross-origin workers is not allowed for security reasons so it's important that we continue to load worker files from the page origin even when the CDN is enabled.

In order to make this possible, a publicPath option could be introduced that overrides the normal Webpack dynamic/compilation public paths if specified. This option is already supported by worker-loader, mini-css-extract-plugin, and other similar tools.

Webpack plugin causes issues when using MonacoDiffEditor

When using MonacoDiffEditor, it doesn't highlight the differences (red, green color).

monaco-editor: 0.17.1
monaco-editor-webpack-plugin: 1.7.0
react-monaco-editor: 0.30.1

webpack plugin:
new MonacoWebpackPlugin()

TypeScript code:
import { MonacoDiffEditor } from 'react-monaco-editor';
<MonacoDiffEditor
original="a"
value="b"
options={{
renderSideBySide: true,
readOnly: false, //true,
glyphMargin: true,
ariaLabel: 'ribbonDiffMonacoEditor'
}}
width="100%"
/>

Add support for using webpack process:'mock'

Does the paste command not work in any way for anyone else? I'm using this plugin with vue cli and a very vanilla example with 0.13.1 or 0.13.0 and paste does not work in any way?

Uncaught TypeError: Cannot read property 'jsonDefaults' of undefined

I am maintaining the react bindings for Monaco and I'm having some issues with my demo and the latest Monaco. If I update the demo, I get an error Uncaught TypeError: Cannot read property 'jsonDefaults' of undefined.

To reproduce this issue, clone https://github.com/react-monaco-editor/react-monaco-editor.

Then run yarn && yarn build before going into example. yarn && yarn start will work fine but if you update monaco-editor to ^0.17.1 and then run yarn && yarn start, you will see the error.

Do you have any suggestions for what I need to change to update Monaco? Thanks!

Feature request: Exclude features

Hi,

First of all thanks for this great plugin. I was testing different features combinations and it ocurred to me to provide a way of excluding default features.

Example:

{features: ['!codelens']}

Prefixing them with a ! will exlude that feature.

It would make no sense to include and exclude so in that case only the exclusions would be computed.
I'd make a pull request with the change if needed.

Thanks

angular-cli ejected webpack.config.js throw exception

I get the webpack.config.js by using angular-cli command ng eject --force, and add this plugin into the plugins section, but when I run npm start it throws the following exception, how could I solve this.

TypeError: Cannot read property 'make' of undefined
at AddWorkerEntryPointPlugin.apply (E:\user\vscprojects\monaco-editor\node_modules\monaco-editor-webpack-plugin\plugins\AddWorkerEntryPointPlugin.js:16:20)
at plugins.forEach (E:\user\vscprojects\monaco-editor\node_modules\monaco-editor-webpack-plugin\index.js:82:12)
at Array.forEach ()
at addCompilerPlugins (E:\user\vscprojects\monaco-editor\node_modules\monaco-editor-webpack-plugin\index.js:80:11)
at MonacoWebpackPlugin.apply (E:\user\vscprojects\monaco-editor\node_modules\monaco-editor-webpack-plugin\index.js:67:5)
at Compiler.apply (E:\user\vscprojects\monaco-editor\node_modules\tapable\lib\Tapable.js:375:16)
at webpack (E:\user\vscprojects\monaco-editor\node_modules\webpack\lib\webpack.js:33:19)
at startDevServer (E:\user\vscprojects\monaco-editor\node_modules\webpack-dev-server\bin\webpack-dev-server.js:367:16)
at processOptions (E:\user\vscprojects\monaco-editor\node_modules\webpack-dev-server\bin\webpack-dev-server.js:350:5)
at Object. (E:\user\vscprojects\monaco-editor\node_modules\webpack-dev-server\bin\webpack-dev-server.js:495:1)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Function.Module.runMain (module.js:676:10)

worker files are bundled during webpack build but still referred to as /*.worker.js

The plugin builds everything fine, but when using with an ejected CRA application, bundles are built but the webworkers are still referring to their actual filename. My knowledge of webpack internals is pretty limited, so I imagine I am just doing something wrong.

The main.js file is still looking for a relative work path i.e. localhost:1234/editor.worker.js

I tweaked the
compiler.hooks.make.tapAsync('AddWorkerEntryPointPlugin', (compilation, callback) => {
to
compiler.plugin('make', (compilation, callback) => {

so it would actually run on webpack 3.8

Any insight into what I can do to get this going?

EDIT: Did some further research, and managed to get a bit further, but now I get
No dependency factory available for this dependency type: SingleEntryDependency

I haven't found any references to this issue, I am assuming I still am doing something that doesn't work in webpack 3, but I am not entirely sure.

Locale

Hi, is it possible to specify a locale/language (for instance french) ? I'd like to use the editor in french, but the only example of localization I've found is an AMD loading using requirejs (https://github.com/Microsoft/monaco-editor-samples/blob/master/browser-amd-localized/index.html)

Many thanks !

Error due to call to Promise.wrap in *.contribution.js files?

Setup overview:

AngularJS ^1.7.7
TypeScript ^3.3.3
Webpack ^4.29.5
monaco-editor ^0.15.6
monaco-editor-webpack-plugin ^1.7.0

I'm getting the following errors when running webpack:

ERROR in ./node_modules/monaco-editor/esm/vs/basic-languages/html/html.contribution.js 14:54
Module parse failed: Unexpected token (14:54)
You may need an appropriate loader to handle this file type.
|     aliases: ['HTML', 'htm', 'html', 'xhtml'],
|     mimetypes: ['text/html', 'text/x-jshtm', 'text/template', 'text/ng-template'],
>     loader: function () { return _monaco.Promise.wrap(import('./html.js')); }
| });
| 
 @ ./node_modules/monaco-editor/esm/vs/editor/editor.api.js (include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.api.js) 61:0-55
 @ ./app/portal/modules/admin/onlineForms/editor/OnlineFormEditor.ts
 @ ./app/portal/modules/admin/onlineForms/editor/onlineFormEditor.module.ts
 @ ./app/portal/modules/admin/onlineForms/onlineForms.module.ts
 @ ./app/portal/modules/admin/admin.module.ts
 @ ./app/portal/portal.module.ts
 @ multi angular ./app/portal/portal.module.ts

ERROR in ./node_modules/monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js 16:54
Module parse failed: Unexpected token (16:54)
You may need an appropriate loader to handle this file type.
|     aliases: ['JavaScript', 'javascript', 'js'],
|     mimetypes: ['text/javascript'],
>     loader: function () { return _monaco.Promise.wrap(import('./javascript.js')); }
| });
| 
 @ ./node_modules/monaco-editor/esm/vs/editor/editor.api.js (include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.api.js) 64:0-67
 @ ./app/portal/modules/admin/onlineForms/editor/OnlineFormEditor.ts
 @ ./app/portal/modules/admin/onlineForms/editor/onlineFormEditor.module.ts
 @ ./app/portal/modules/admin/onlineForms/onlineForms.module.ts
 @ ./app/portal/modules/admin/admin.module.ts
 @ ./app/portal/portal.module.ts
 @ multi angular ./app/portal/portal.module.ts

ERROR in ./node_modules/monaco-editor/esm/vs/language/json/monaco.contribution.js 59:31
Module parse failed: Unexpected token (59:31)
You may need an appropriate loader to handle this file type.
| // --- Registration to monaco editor ---
| function getMode() {
>     return monaco.Promise.wrap(import('./jsonMode.js'));
| }
| monaco.languages.register({
 @ ./node_modules/monaco-editor/esm/vs/editor/editor.api.js (include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.api.js) 63:0-50
 @ ./app/portal/modules/admin/onlineForms/editor/OnlineFormEditor.ts
 @ ./app/portal/modules/admin/onlineForms/editor/onlineFormEditor.module.ts
 @ ./app/portal/modules/admin/onlineForms/onlineForms.module.ts
 @ ./app/portal/modules/admin/admin.module.ts
 @ ./app/portal/portal.module.ts
 @ multi angular ./app/portal/portal.module.ts

ERROR in ./node_modules/monaco-editor/esm/vs/language/html/monaco.contribution.js 86:31
Module parse failed: Unexpected token (86:31)
You may need an appropriate loader to handle this file type.
| // --- Registration to monaco editor ---
| function getMode() {
>     return monaco.Promise.wrap(import('./htmlMode.js'));
| }
| monaco.languages.onLanguage(htmlLanguageId, function () {
 @ ./node_modules/monaco-editor/esm/vs/editor/editor.api.js (include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.api.js) 62:0-50
 @ ./app/portal/modules/admin/onlineForms/editor/OnlineFormEditor.ts
 @ ./app/portal/modules/admin/onlineForms/editor/onlineFormEditor.module.ts
 @ ./app/portal/modules/admin/onlineForms/onlineForms.module.ts
 @ ./app/portal/modules/admin/admin.module.ts
 @ ./app/portal/portal.module.ts
 @ multi angular ./app/portal/portal.module.ts

My webpack.config.js file:

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebpackOnBuildPlugin = require('on-build-webpack');
const fs = require('fs');
const StringReplacePlugin = require('string-replace-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

var ExclusionRegexs = [
    /node_modules/
];

const config = function (env, argv) {
    console.log("mode", argv.mode);
    return {
        entry: {
            portal: [
                'angular',
                './app/portal/portal.module.ts'
            ],
            onlineform: [
                'angular',
                './app/online-form/onlineForm.module.ts'
            ]
        },
        output: {
            path: path.join(__dirname, './wwwroot'),
            filename: "[name].js"
        },
        resolve: {
            modules: ["node_modules"],
            extensions: [".ts", ".tsx", ".js", ".html", ".css", ".scss", ".svg", ".ttf", ".png", ".json"]
        },
        devtool: 'source-map',
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    use: [
                        {
                            loader: "ng-annotate-loader"
                        },
                        {
                            loader: "ts-loader",
                            options: {
                                //onlyCompileBundledFiles : true
                            }
                        }
                    ],
                },
                {
                    test: /\.(css|sass|scss)$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'sass-loader',
                    ]
                }
            ]
        },

        plugins: [

            new webpack.DefinePlugin({
                'process.env': {
                    'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
                }
            }),

            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                moment: "moment",
                "window.jQuery": "jquery"
            }),

            new MiniCssExtractPlugin({
                filename: "[name].css",
                chunkFilename: "[name].css"
            }),

            new StringReplacePlugin(),

            argv.mode === 'production' ? new OptimizeCssAssetsPlugin({
                cssProcessorOptions: { discardComments: { removeAll: true } }
            }) : false,

            new MonacoWebpackPlugin({
                output: "/monaco",
                languages: ['html', 'json', 'javascript'],
                //features: ['accessibilityHelp', 'bracketMatching', 'caretOperations', 'clipboard', 'codeAction', 'colorDetector', 'comment', 'contextmenu', 'coreCommands', 'cursorUndo', 'dnd', 'find', 'folding', 'fontZoom', 'format', 'gotoError', 'gotoLine', 'hover', 'inPlaceReplace', 'inspectTokens', 'linesOperations', 'links', 'multicursor', 'parameterHints', 'quickCommand', 'quickOutline', 'referenceSearch', 'smartSelect', 'suggest', 'toggleHighContrast', 'toggleTabFocusMode', 'wordHighlighter', 'wordOperations', 'wordPartOperations']
            }),

        ].filter(Boolean),
        
        optimization: {
            minimizer: [argv.mode === 'production' ? new TerserPlugin() : false].filter(Boolean),
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        name: "vendor",
                        test: (module) => {
                            const context = module.context;

                            // Exclude monaco-editor
                            return context && context.indexOf("node_modules") >= 0 && context.indexOf("monaco-editor") <= 0;
                        },
                        chunks: "all",
                        enforce: true
                    },
                    vendormonaco: {
                        name: "vendormonaco",
                        test: (module) => {
                            const context = module.context;

                            // Only include monaco-editor
                            return context && context.indexOf("node_modules") >= 0 && context.indexOf("monaco-editor") >= 0;
                        },
                        chunks: "all",
                        enforce: true
                    },
                    common: {
                        name: "common",
                        test: /[\\/]app[\\/]common[\\/]/,
                        chunks: "all",
                        enforce: true
                    },
                },

            }
        }
    }
};

module.exports = config;

  "dependencies": {
    "@empactis/empactis-angular": "~2.4.0",
    "@progress/kendo-ui": "^2019.1.220",
    "@uirouter/angularjs": "^1.0.22",
    "angular": "^1.7.7",
    "angular-animate": "^1.7.7",
    "angular-cookies": "^1.7.7",
    "angular-loading-bar": "~0.9.0",
    "angular-marked": "~1.2.2",
    "angular-recursion": "~1.0.5",
    "angular-sanitize": "^1.7.7",
    "angularjs-scroll-glue": "~2.2.0",
    "angularjs-toaster": "~3.0.0",
    "applicationinsights-js": "^1.0.20",
    "core-js": "~2.6.5",
    "jquery": "~3.3.1",
    "moment": "~2.24.0",
    "moment-timezone": "^0.5.21",
    "monaco-editor": "^0.15.6",
    "oclazyload": "~1.1.0",
    "restangular": "~1.6.1",
    "simple-ajax-uploader": "~2.5.5",
    "ui-select": "~0.19.8"
  },
  "devDependencies": {
    "@types/angular": "^1.6.54",
    "@types/core-js": "^2.5.0",
    "@types/jquery": "^3.3.9",
    "@types/restangular": "^1.5.44",
    "copy-webpack-plugin": "^5.0.0",
    "file-loader": "^3.0.1",
    "mini-css-extract-plugin": "^0.5.0",
    "monaco-editor-webpack-plugin": "^1.7.0",
    "ng-annotate-loader": "^0.6.1",
    "node-sass": "^4.9.3",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "raw-loader": "^1.0.0",
    "rimraf": "^2.6.2",
    "sass-loader": "^7.1.0",
    "string-replace-webpack-plugin": "^0.1.3",
    "style-loader": "^0.23.0",
    "tslint": "^5.12.1",
    "typescript": "^3.3.3",
    "webpack": "^4.29.5",
    "webpack-bundle-analyzer": "^3.0.4",
    "webpack-cli": "^3.2.3",
    "terser-webpack-plugin": "^1.2.2",
    "on-build-webpack": "~0.1.0",
    "ts-loader": "^5.3.3"
  },
  "peerDependencies": {
    "acorn": "^6.0.0"
  },

/// <reference types="../../../../../../node_modules/monaco-editor/esm/vs/editor/editor.api" />
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

It looks like Promise.wrap() isn't being recognised. even though it's defined in monaco-editor/esm/vs/editor/editor.api.d.ts

Any help would be much appreciated. Thanks.

monaco-editor 0.13.1 is not supported.

repro: https://github.com/tamayika/monaco-webpack-test

commands:

npm i
npm run build

result:

PS F:\work\node\monaco-webpack-test> npm run build

> [email protected] build F:\work\node\monaco-webpack-test
> webpack --config webpack.config.js

F:\work\node\monaco-webpack-test\node_modules\webpack-cli\bin\webpack.js:448
                                throw err;
                                ^

Error: Cannot find module 'monaco-editor\esm\vs\editor\contrib\quickFix\quickFixCommands'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:548:15)
    at Function.require.resolve (F:\work\node\monaco-webpack-test\node_modules\v8-compile-cache\v8-compile-cache.js:162:23)
    at resolveMonacoPath (F:\work\node\monaco-webpack-test\node_modules\monaco-editor-webpack-plugin\index.js:35:18)
    at use.options.pre.featurePaths.map (F:\work\node\monaco-webpack-test\node_modules\monaco-editor-webpack-plugin\index.js:110:51)
    at Array.map (<anonymous>)
    at createLoaderRules (F:\work\node\monaco-webpack-test\node_modules\monaco-editor-webpack-plugin\index.js:110:31)
    at MonacoWebpackPlugin.apply (F:\work\node\monaco-webpack-test\node_modules\monaco-editor-webpack-plugin\index.js:64:19)
    at webpack (F:\work\node\monaco-webpack-test\node_modules\webpack\lib\webpack.js:37:12)
    at processOptions (F:\work\node\monaco-webpack-test\node_modules\webpack-cli\bin\webpack.js:436:16)
    at yargs.parse (F:\work\node\monaco-webpack-test\node_modules\webpack-cli\bin\webpack.js:512:3)
    at Object.parse (F:\work\node\monaco-webpack-test\node_modules\yargs\yargs.js:552:18)
    at F:\work\node\monaco-webpack-test\node_modules\webpack-cli\bin\webpack.js:217:8
    at Object.<anonymous> (F:\work\node\monaco-webpack-test\node_modules\webpack-cli\bin\webpack.js:514:3)
    at Module._compile (internal/modules/cjs/loader.js:654:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    at Module.load (internal/modules/cjs/loader.js:566:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
    at Function.Module._load (internal/modules/cjs/loader.js:498:3)
    at Module.require (internal/modules/cjs/loader.js:598:17)
    at require (internal/modules/cjs/helpers.js:11:18)
    at Object.<anonymous> (F:\work\node\monaco-webpack-test\node_modules\webpack\bin\webpack.js:80:2)
    at Module._compile (internal/modules/cjs/loader.js:654:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    at Module.load (internal/modules/cjs/loader.js:566:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
    at Function.Module._load (internal/modules/cjs/loader.js:498:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:695:10)
    at startup (internal/bootstrap/node.js:201:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:516:3)

I found some esm monaco-editor module disappeared compared to 0.12.0.
features.js must be changed or monaco-editor emit bug?

critical dependency warning reported when build monaco-editor

I'm using Webpack 4.6.0 to build my monaco-editor project. But got a "Critical Dependency" warning for editorSimpleWorker.js using require function to load dynamic module。

Can this warning be ignored, or how to fix it ?

// webpack config for my project
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
const fs = require('fs');
var autoprefixer = require('autoprefixer'); // eslint-disable-line

const postCssConfig = (loader) => [
  autoprefixer({
    remove: false,
    browsers: ['last 2 versions', 'ie > 8', 'safari > 7'],
  }),
];

const babelConfig = {
  babelrc: false,
  presets: [
    'babel-preset-react',
    ['babel-preset-es2015', { modules: false }],
    'babel-preset-stage-0',
  ],
  plugins: [
    'babel-plugin-transform-decorators-legacy',
    [require.resolve('babel-plugin-transform-runtime'), {
      helpers: false,
      polyfill: false,
      regenerator: true,
      moduleName: path.dirname(require.resolve('babel-runtime/package')),
    }],
  ]
}

const config = {
  mode: 'production',
  entry: {
    app: __dirname + '/src/index.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  context: path.resolve(__dirname, 'src'),
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader', {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: postCssConfig,
        },
      }],
    }, {
      test: /\.tsx?$/,
      loader: 'ts-loader',
    }, {
      test: /\.jsx$/,
      exclude: /node_modules/,
      loaders: [{
        loader: 'babel-loader',
        options: babelConfig,
      }]
    }, {
      test: /\.scss$/,
      use: [{
        loader: 'style-loader', // creates style nodes from JS strings
      }, {
        loader: 'css-loader', // translates CSS into CommonJS
      }, {
        loader: 'postcss-loader', // compiles Sass to CSS
        options: {
          ident: 'postcss',
          plugins: postCssConfig,
        },
      }, {
        loader: 'sass-loader',
      }],
    }, {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'file-loader',
    }, {
      test: /\.woff2?(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url-loader?limit=10000&minetype=application/font-woff',
    }, {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url-loader?limit=10000&minetype=application/octet-stream',
    }, {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url-loader?limit=10000&minetype=image/svg+xml',
    }, {
      test: /\.(jpe?g|png|gif|svg)$/i,
      loaders: ['url-loader?limit=8192'],
    }, {
      test: /\.swf$/,
      use: 'file-loader?name=[name].[ext]',
    }],
  },
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    extensions: ['.js', '.json', '.jsx', '.ts', '.tsx'],
    symlinks: false,
  },
  stats: {
    colors: true,
    modules: true,
    reasons: true,
    errorDetails: true,
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new MonacoWebpackPlugin(),
    new webpack.IgnorePlugin(
      /^((fs)|(path)|(os)|(crypto)|(source-map-support))$/,
      /vs\/language\/typescript\/lib/,
    ),
  ],
  target: 'web',
  resolveLoader: {
    modules: [path.resolve(__dirname, 'node_modules')]
  },
};

webpack(config, (err, stats) => {
  if (err) {
    console.log('Failed to compile.', [err]);
  }

  if (stats.compilation.errors.length) {
    console.log('Failed to compile.', stats.compilation.errors);
  }

  if (stats.compilation.warnings.length) {
    console.log(
      'Failed to compile. When process.env.CI = true, warnings are treated as failures. Most CI servers set this automatically.',
      stats.compilation.warnings,
    );
  }

  const outputOptions =  {
    context: './src',
    colors: { level: 2, hasBasic: true, has256: true, has16m: false },
    chunks: true,
    children: false,
    performance: true,
  };
  process.stdout.write(stats.toString(outputOptions) + '\n');
});

Warning:

WARNING in /xxx/node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js
378:12-19 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ /xxx/node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js
 @ /xxx/node_modules/monaco-editor/esm/vs/editor/common/services/editorWorkerServiceImpl.js
 @ /xxx/node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneServices.js
 @ /xxx/monaco-editor/esm/vs/editor/standalone/browser/standaloneLanguages.js
 @ /xxx/node_modules/monaco-editor/esm/vs/editor/editor.api.js
 @ /xxx/node_modules/monaco-editor/esm/vs/editor/edcore.main.js
 @ /xxx/node_modules/monaco-editor/esm/vs/editor/editor.main.js
 @ /xxx/src/index.js

Support for node 6 LTS

Node 6 LTS has no support for the Object spread, like in index.js#L40:

[id, ...(language.alias || [])].map((label) => [label, { label, ...language }])

Would it be possible to change it to Object.assign in order to maintain node 6 LTS support?

The problem we are facing at work, is that VSCode plugins are not able to parse the module. VSCode is currently based electron 1.7.12, which is based on node@7, which has the problem described above.

Our issues here and here:

TypeError: Cannot read property 'wrap' of undefined in language.contribution.js file

Howdy folks,

Very new to React / Babel / etc here so please bear with me!

Using:
Chrome 72.0.3626.121
"monaco-editor": "^0.15.6",
"monaco-editor-webpack-plugin": "^1.7.0",
"webpack": "^4.28.4",

Attempting to load the monaco editor via React, I can get the editor to load up in a web page but there is no highlighting; this is for the PHP language. Webpack creates a bundle file just fine.

Looking at the dev console, I see this error message:

errors.js:22 Uncaught Error: Cannot read property 'wrap' of undefined

TypeError: Cannot read property 'wrap' of undefined
    at loader (php.contribution.js:16)
    at _loadLanguage (_.contribution.js:14)
    at loadLanguage (_.contribution.js:22)
    at eval (_.contribution.js:31)
    at eval (standaloneLanguages.js:80)
    at Emitter.fire (event.js:509)
    at ModeServiceImpl._getOrCreateMode (modeServiceImpl.js:117)
    at ModeServiceImpl._createModeAndGetLanguageIdentifier (modeServiceImpl.js:105)
    at LanguageSelection.eval [as _selector] (modeServiceImpl.js:92)
    at new LanguageSelection (modeServiceImpl.js:37)
    at eval (errors.js:22)

The specific line in php.contribution.js is this:

loader: function () { return _monaco.Promise.wrap(__webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./php.js */ "./node_modules/monaco-editor/esm/vs/basic-languages/php/php.js"))); }
});

_monaco.Promise is undefined! I had suspected I need some kind of babel polyfill for the Promise. Tried fiddling with babel/preset-env but without success.

Tried a different language, javascript, ran into the same issue.

Here's the package.json file:

   "name": "projectname",
   "dependencies": {
      "react": "^16.8.4",
      "react-dom": "^16.8.4",
      "react-monaco-editor": "^0.25.1"
   },
   "devDependencies": {
      "@babel/core": "^7.3.4",
      "@babel/preset-env": "^7.3.4",
      "@babel/preset-react": "^7.0.0",
      "babel-loader": "^8.0.5",
      "babel-plugin-transform-function-bind": "^6.22.0",
      "css-loader": "^2.1.1",
      "monaco-editor": "^0.15.6",
      "monaco-editor-webpack-plugin": "^1.7.0",
      "style-loader": "^0.23.1",
      "webpack": "^4.28.4",
      "webpack-cli": "^3.2.3"
   },
   "scripts": {
      "build": "webpack"
   }
}

The babelrc file:

{
  "presets": [
      "@babel/preset-react",
      [
          "@babel/preset-env",
          {
              "useBuiltIns": "entry"
          }
      ]
  ],
  "plugins": ["transform-function-bind"]
}

and webpack.config.js:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const MONACO_DIR = path.resolve(__dirname, './node_modules/monaco-editor');
const MONACO_EDITOR_DIR = path.resolve(__dirname, './node_modules/react-monaco-editor');
module.exports = {
	entry: [ __dirname + '/public/js/react/react-config-monaco.js'],
	mode: 'development',
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'babel-loader'
			},
			{
      			test: /\.css$/,
      			include: [MONACO_DIR, MONACO_EDITOR_DIR],
				use: ['style-loader', 'css-loader']
    		}
		]
	},
	output: {
		filename: 'react-output.js',
		path: __dirname + '/public/js/dist'
	},
	plugins: [
		new MonacoWebpackPlugin({
			languages: ['php']
		})
	]
};

I'm hoping I'm just overlooking something very simple to fix!

Thank you for your time and attention!

Drew

Using only JavaScript in ^0.14.2 has no Language Service

I just updated to the latest version of monaco-editor and monaco-editor-webpack-plugin:

$ npm ls | grep monaco
├── [email protected]
├── [email protected]

webpack.config.js:

new MonacoWebpackPlugin({
    languages: ['javascript'],
}),

Usage of monaco:

import * as monaco from 'monaco-editor'

monaco.editor.create(document.getElementById('container'), {
    value: 'console.log("Hello, world")\n',
    language: 'javascript',
});

I only want to edit JavaScript code. When running with the versions mentioned above, there seems to be no language service running validating the document or providing any kind of service (IntelliSense etc.).
Looking at the network requests, the front end is requesting GET /undefined, followed by an exception with the message Error: Unexpected usage.

I suspect that this is the language service that is missing and the regression might be introduced in f86321e (only guessing at this point).

If the plugin config is changed to include all language services (new MonacoWebpackPlugin()), it works and requests the TypeScript worker, as it should be. However, to reduce the bundle size, I only want the JS/TS service to be included (no CSS etc).

If TypeScript is added to the languages list:

new MonacoWebpackPlugin({
    languages: ['javascript', 'typescript'],
})

Everything is also fine (this is the current workaround). It seems that somehow the information is lost that JS has the same LS as TS and is therefore not included in the bundle when only JS is included in the languages option.

Support __webpack_public_path__

We've made good use of this plugin in nteract/nteract#2779. We're running into one major issue though -- when we host our app on a subpath it appears that Monaco's webworkers aren't loading based on the __webpack_public_path__, instead relying only on the static publicPath in the webpack config.

What would we need to do to make monaco recognize the dynamic public path?

cc @yuvipanda

How to work with webpack 3. Thanks.

I got this error, when I use npm start to start my app.
webpack version: "3.8.1",
"monaco-editor": "^0.15.6",
"monaco-editor-webpack-plugin": "^1.7.0",

hjm-mac:react hjm$ npm start

> [email protected] start /Users/hjm/Documents/code/educode/educoder/eduplus2/public/react
> node scripts/start.js

Failed to compile.

Cannot read property 'output' of undefined

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `node scripts/start.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/hjm/.npm/_logs/2019-01-11T06_34_13_165Z-debug.log

IMonacoEditorWebpackPluginOpts members need to be optional