WorkerWrapper seems to always use a relative URL

[RomainLanz]

Describe the bug

During a backend integration (AdonisJS in my case), the generated link to load a worker contain both URL (backend & Vite server).

This happens since url start with / inside the WorkerWrapper, wanting a relative URL which cannot happen when using a backend integration.

The following code is used to load the Monaco Editor, using workers for the different language features.

import * as monaco from 'monaco-editor'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'

window.MonacoEnvironment = {
  getWorker(_, label) {
    switch (label) {
      case 'json':
        return new jsonWorker()
      case 'css':
      case 'scss':
      case 'less':
        return new cssWorker()
      case 'html':
        return new htmlWorker()
      case 'typescript':
      case 'javascript':
        return new tsWorker()
      default:
        return new editorWorker()
    }
  },
}

monaco.editor.create(document.getElementById('monaco'), {
  language: 'javascript',
})

Vite then wraps the worker inside a WorkerWrapper and generate a bad link.

export default function WorkerWrapper() {
  return new Worker("/http://localhost:5173/node_modules/monaco-editor/esm/vs/editor/editor.worker.js?type=module&worker_file",{type: "module"})
}

Causing a 404.

GET http://127.0.0.1:3333/http://localhost:5173/node_modules/monaco-editor/esm/vs/editor/editor.worker.js?type=module&worker_file

Maybe related:

• Unable to use web workers using a JS entry point #9523
• CSS HMR remove the host in the URL #1665 (Old)

Reproduction

The repository contains a starter AdonisJS application with Vite configured and ready to be used.

Steps:

1. Clone https://github.com/RomainLanz/slywork.io
2. Run npm install
3. Run node ace serve -w to start the web server
4. Run npm run vite:dev to start Vite
5. Access the / page of the application

Monaco Integration can be found in resources/js/modules/monaco.js.

System Info

System:
  OS: Windows 10 10.0.22000
  CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
  Memory: 15.69 GB / 31.92 GB
Binaries:
  Node: 16.14.2 - ~\AppData\Local\Volta\tools\image\node\16.14.2\node.EXE
  Yarn: 1.22.10 - ~\AppData\Local\Volta\tools\image\yarn\1.22.10\bin\yarn.CMD
  npm: 7.22.0 - ~\AppData\Local\Volta\tools\image\npm\7.22.0\bin\npm.CMD
Browsers:
  Edge: Spartan (44.22000.120.0), Chromium (103.0.1264.77)
  Internet Explorer: 11.0.22000.120
npmPackages:
  vite: ^3.0.4 => 3.0.4

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[poyoho]

  Exception 

 E_MISSING_ENV_VALUE: Missing environment variable "APP_KEY"

 at Object.<anonymous> /Users/yohopo/code/issues/slywork.io/server.ts:19
  14|  import sourceMapSupport from 'source-map-support'
  15|  import { Ignitor } from '@adonisjs/core/build/standalone'
  16|  
  17|  sourceMapSupport.install({ handleUncaughtExceptions: false })
  18|  
❯ 19|  new Ignitor(__dirname).httpServer().start()
  20|  

@RomainLanz

[RomainLanz]

Hey @poyoho! 👋🏻

You can copy .env.example file to .env and set the APP_KEY to yDYAyjWXTOYRhuyOrumBZ-HXc79U3mLn.