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

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 } } } } } `

[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]

@DavidDiao 😂