[Bug] vue-cli3 use monaco-editor with Unexpected token

[WatsonJay]

Reproducible in vscode.dev or in VS Code Desktop?

• [X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• [X] Not reproducible in the monaco editor playground

Monaco Editor Playground Code

No response

Reproduction Steps

I use monaco-editor and MonacoWebpackPlugin in my vue-cli project，but I can not run it I use version like this "monaco-editor": "^0.34.0","monaco-editor-webpack-plugin": "^7.0.1"

Actual (Problematic) Behavior

error in ./node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js

Module parse failed: Unexpected token (161360:6) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | } | var TypeScriptWorker = class {

_ctx; | _extraLibs = /* @PURE */ Object.create(null); | _languageService = createLanguageService(this);

Expected Behavior

No response

Additional Context

vue.config.js `const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin') const path = require('path')

const minify = process.env.NODE_ENV === 'development' ? false : { collapseWhitespace: true, removeComments: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, useShortDoctype: true, minifyCSS: true, minifyJS: true }

function resolve(dir) { return path.join(__dirname, dir) }

module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/form-generator/' : '/', pages: { index: { entry: 'examples/views/index/main.js', template: 'public/index.html', filename: 'index.html', chunks: ['chunk-vendors', 'chunk-common', 'index'], minify } }, devServer: { overlay: false }, productionSourceMap: false, configureWebpack: { resolve: { alias: { '@': resolve('./examples') } }, devtool: 'source-map', plugins: [ new MonacoWebpackPlugin({ languages: ['typescript','javascript'], // configure your languages here features: ['coreCommands', 'find'] }) // Place it here ] }, css: { loaderOptions: { less: { lessOptions: { // modifyVars: { // 'primary-color': '#1DA57A', // 'link-color': '#1DA57A', // 'border-radius-base': '2px' // }, javascriptEnabled: true } } } } } `

[arvinlicq]

I'm having the same problem

[daidaibg]

I also encountered this problem in the new version. The old version is OK,

[DavidDiao]

#2903 maybe you can try the solution here if you are using webpack 4

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /monaco-editor[\\/].*\.js$/,
        loader: "babel-loader",
      },
    ],
  },
}

I solved ”no loaders“ problem with it but got another syntax error when using [email protected](works well with 0.33)

[daidaibg]

#2903 @DavidDiao Thank you very much, this method works very well, and I solved it successfully. I also encountered a syntax error in version 0.34.0, and there is no problem with versions below 0.34.0. I use [email protected] In vue.config.js I configured like this

module.exports = {
 chainWebpack: (config) => {
    config.module
      .rule('monaco-editor-babel-loader')
      .test(/monaco-editor[\\/].*\.js$/)
      .end()
      .use("babel-loader")
      .loader("babel-loader")
      .end()
   }
}

[DavidDiao]

@daidaibg I've just tried to change the pattern to /monaco-editor[\\/].*language.*\.js$/ to exclude the error file, and seems to work for 0.34, though I'm not quite understand what happended:joy:

[daidaibg]

@DavidDiao 😂