Warnings & errors (+)

[PROFITVenchurs]

I'm getting some warnings and errors in console.

Warning: 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

Error: Unexpected usage
    at EditorSimpleWorkerImpl.BaseEditorSimpleWorker.loadForeignModule (editorSimpleWorker.js?ccf6:468)
    at eval (webWorker.js?af50:39)

Error: undefined:1 Uncaught SyntaxError: Unexpected token <

I'm using vue-CLI 3 generated base app with vue.config.js:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
    configureWebpack: {
        plugins: [
            new MonacoWebpackPlugin({
                languages: ['javascript', 'css', 'html']
            })
        ]
    }
}

What I'm doing wrong?

[mbwhite]

Likewise same problem here; there does seem to be some discussion on various vsCode issues. But it's not clear what the issue is as yet; digging into it ...

UPDATE: Believe that it is related to https://github.com/Microsoft/monaco-editor-webpack-plugin/issues/27

In my use case, I wanted to have just json editting - and removing both JavaScript and TypeScript got rid of the error for me. I also tried setting the langauge to be null in the vue template. That stopped the errors but then also gets rid of highlighting etc..

Setting that programmaticly might work after the editor is setup?

[shawyo]

I solved the problem

vue-CLI 3 vue.config.js:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      // To load all
      new MonacoWebpackPlugin()
    ]
  }
}

.vue

<template>
  <div class="monaco">
    <MonacoEditor v-if="isShow" v-model="code" class="editor" language="javascript" />
  </div>
</template>

<script>
import MonacoEditor from 'vue-monaco'

export default {
  components: {
    MonacoEditor
  },

  data() {
    return {
      isShow: false,
      code: 'const noop = () => {}'
    }
  },
  //  Lifecycle Hooks  mounted  use $nextTick
  mounted() {
    this.$nextTick(() => {
      this.isShow = true;
    })
  },
}
</script>

<style>
.editor {
  width: 600px;
  height: 800px;
}
</style>

[ghost]

I believe that the reason this is happening in this case is because of this comment: https://github.com/microsoft/monaco-editor-webpack-plugin/issues/27#issuecomment-413561254

That would make sense why when you remove JavaScript or pass in null it works. In my case, I'm using this in Quasar so:

quasar.config.js

extendWebpack (cfg) {
  const MonacoEditorPlugin = require('monaco-editor-webpack-plugin')
  cfg.plugins.push(new MonacoEditorPlugin({
    // Require typescript to include a dependency needed by javascript
    languages: ['javascript', 'typescript']
  }))
}

component.vue:

<template lang="pug">
  MonacoEditor.editor(v-model='workspace.code' language='javascript')
</template>

[danielmeloalencar]

For javascript don't add 'javascript' on vue.config.js. Add 'typescript'

App.vue

<MonacoEditor v-if="isShow" v-model="code" class="editor" language="javascript" />

vue.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
    configureWebpack: {
        plugins: [
            new MonacoWebpackPlugin({
                languages: ['typescript']
            })
        ]
    }
}