monaco + WebpackでCould not create web worker(s)が出た場合の対処法

readme.md

発生したエラー

Could not create web worker(s). Falling back to loading web worker code in main thread, which might cause UI freezes. Please see https://github.com/Microsoft/monaco-editor#faq

環境

"monaco-editor": "^0.20.0",
"monaco-editor-webpack-plugin": "^1.9.0",
"webpack": "^4.43.0",

修正内容

  entry: {
    ・・・
    'serviceWorker': './serviceWorker/js/ws.js',
    "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js',
    "json.worker": 'monaco-editor/esm/vs/language/json/json.worker',
    "css.worker": 'monaco-editor/esm/vs/language/css/css.worker',
    "html.worker": 'monaco-editor/esm/vs/language/html/html.worker',
    "ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker'
  },
  output: {
		globalObject: 'self',
    filename: './[name].bundle.js',
    ・・・
  },
  

import * as monaco from 'monaco-editor'
・・・
self.MonacoEnvironment = {
  getWorkerUrl: function(moduleId, label) {
    if (label === 'json') {
      return './json.worker.bundle.js';
    }
    if (label === 'css') {
      return './css.worker.bundle.js';
    }
    if (label === 'html') {
      return './html.worker.bundle.js';
    }
    if (label === 'typescript' || label === 'javascript') {
      return './ts.worker.bundle.js';
    }
    return './editor.worker.bundle.js';
  },
};
・・・
  const editorContainer = document.getElementById("container");
  editor = monaco.editor.create(editorContainer, {
    automaticLayout: true,
    model: null
  });

参考サイト

https://github.com/microsoft/monaco-editor/blob/master/docs/integrate-esm.md