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

[WatsonJay]

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• 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 monaco-editor@0.34(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 vuecli@4.5.19
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 😂