Web-Worker failed to load

[HaydenOrz]

Describe the bug

Unable to integrate monaco-sql-languages in a vite project.

Maybe it's not an issue with vite, but I do need help. I'm maintaining monaco-sql-languages, and I found monaco-yaml having the same issue and it wasn't resolved

Related to this issue, I can't comment under this issue because it's locked. The last comment on this issue said it was fixed, but I still reproduce the issue. Also, in the documentation for the monaco-yaml repository, it is mentioned that it is still not compatible with Vite.

This is a weird bug where when I import the worker file directly from monaco-sql-languages, an gets an exception. But if I used the way mentioned in the moanco-yaml repository, it worked well.

Reproduction

https://github.com/HaydenOrz/monaco-sql-languages-vite

Steps to reproduce

1. npm install
2. npm dev

System Info

System:
    OS: macOS 11.6.4
    CPU: (8) arm64 Apple M1
    Memory: 124.98 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node
    Yarn: 1.22.13 - ~/.nvm/versions/node/v16.20.0/bin/yarn
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.0/bin/npm
    pnpm: 6.35.0 - ~/.nvm/versions/node/v16.20.0/bin/pnpm
  Browsers:
    Chrome: 120.0.6099.109
    Safari: 14.1.2
  npmPackages:
    @vitejs/plugin-react: ^4.2.0 => 4.2.1 
    vite: ^5.0.6 => 5.0.6

Used Package Manager

npm

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.

---

Edit:
If you use the method mentioned above, i.e., create a new file and import the worker file internally, and then use the new file as a worker file.

src/languages/workerTransform/flinksql.worker.ts

import 'monaco-sql-languages/out/esm/flinksql/flinksql.worker';

using the worker file

import FlinkSQLWorker from './workerTransform/flinksql.worker?worker';

This only works in development mode. Exceptions will still occur in production mode. ( testing via npm run build & npm run preview )

[hi-ogawa]

I can reproduce the issue on stackblitz as well (though it takes quite some time to load all unbundled monaco-editor related assets...) https://stackblitz.com/edit/github-nwnjfg?file=src%2Flanguages%2FlanguageSetup.ts

The difference of these two seems to be Vite's deps optimization.

• not working

// src/languages/languageSetup.ts
import FlinkSQLWorker from 'monaco-sql-languages/out/esm/flinksql/flinksql.worker?worker';

• working

// src/languages/languageSetup.ts
import FlinkSQLWorker from './workerTransform/flinksql.worker?worker';

// src/languages/workerTransform/flinksql.worker.ts
import 'monaco-sql-languages/out/esm/flinksql/flinksql.worker';

Only for the 2nd case, Vite shows a following log and tweaking optimizeDeps.include doesn't seem to affect this behavior.

[vite] ✨ new dependencies optimized: monaco-sql-languages/out/esm/flinksql/flinksql.worker

I'm not sure if this is a known limitation or such usage is not supposed to work. Also, if monaco-sql-languages is shipping ESM already, then pre-bundling shouldn't be necessary? If the package is somehow triggering Vite to pre-bundle, then there could be some issue on packaging. (EDIT: maybe this is not correct to say since Vite always needs to run deps optimization for lazily found dependency)

[HaydenOrz]

@hi-ogawa Thank you for your answer.

Regarding optimizeDeps.include , it was just an attempt because I really didn't know how to solve the problem. However, I also found that this configuration seems unnecessary. I have to admit, I'm not familiar with Vite.

Do you mean that in the first case, Vite won't pre-bundle the worker files of monaco-sql-languages, leading to this problem? If that's true, how could I make Vite trigger pre-bundling in the first case?

Or are you suggesting that I need to ensure monaco-sql-languages can function properly even without pre-bundling?

[hi-ogawa]

Do you mean that in the first case, Vite won't pre-bundle the worker files of monaco-sql-languages, leading to this problem? If that's true, how could I make Vite trigger pre-bundling in the first case?

Your 2nd approach seems to be a reasonable workaround and it makes sense to me. My assumption is that ?worker import has certain limitation, so by wrapping the import of monaco-sql-languages with extra module, it can help Vite to process things with standard transform pipeline (including deps optimization etc...).

Unfortunately, I'm not so familiar with deps optimization / pre-bundling either, so you might need to wait for someone who is more experienced can figure out the root cause.

Or are you suggesting that I need to ensure monaco-sql-languages can function properly even without pre-bundling?

It's just an observation from the surface level since I'm not familiar with monaco-editor ecosystem, but comparing with monaco-editor's builtin modules like monaco-editor/esm/vs/language/json/json.worker?worker, they don't seem to have a particular issue, so I feel there must be something different in terms of ESM/Browser adaptability.

---

EDIT: Small follow up after trying to understand Vite's deps optimization. I'm not sure if this explains the whole story, but I spotted that there is skipOptimization which becomes true when importing SPECIAL_QUERY_RE which includes ?worker.

vite/packages/vite/src/node/plugins/resolve.ts

Lines 839 to 845 in 5684fcd

	const skipOptimization =
	depsOptimizer?.options.noDiscovery ||
	!isJsType ||
	(importer && isInNodeModules(importer)) ||
	exclude?.includes(pkgId) ||
	exclude?.includes(id) ||
	SPECIAL_QUERY_RE.test(resolved) ||

vite/packages/vite/src/node/constants.ts

Line 55 in 5684fcd

export const SPECIAL_QUERY_RE = /[?&](?:worker|sharedworker|raw|url)\b/

[Banou26]

I'm having a similar issue, but with TLA usage inside an imported worker via ?worker, dev mode works fine, but build errors out with

[vite:worker] Module format "iife" does not support top-level await. Use the "es" or "system" output formats rather.
file: /src/shared-worker/index.ts?worker&url      
error during build:
RollupError: Module format "iife" does not support top-level await. Use the "es" or "system" output formats rather.

Even though my vite config contains

    rollupOptions: {
      output: {
        format: 'es'
      },

I'm guessing that whatever runs ?worker is overriding the vite config for files imported with it / is the result of the skipOptimization that @hi-ogawa mentionned

[hi-ogawa]

@Banou26 Do you use worker.format option https://vitejs.dev/config/worker-options.html#worker-format? Maybe worker.format (which is default iife) has precedance over rollupOptions.output.format.

[Nadaabdalkader]

I'm having a similar issue with the monaco-editor package

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';

self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === 'json') {
      return new jsonWorker();
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return new cssWorker();
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return new htmlWorker();
    }
    if (label === 'typescript' || label === 'javascript') {
      return new tsWorker();
    }
    return new editorWorker();
  },
};

Reference: code

I'm trying to use this block of code to get the editor workers instead of the calls to CDNs, I get this error message when I try to build the project (using yarn build)

 error TS2307: Cannot find module 'monaco-editor/esm/vs/editor/editor.worker?worker' or its corresponding type declarations.
 error TS2307: Cannot find module 'monaco-editor/esm/vs/language/json/json.worker?worker' or its corresponding type declarations.
 error TS2307: Cannot find module 'monaco-editor/esm/vs/language/css/css.worker?worker' or its corresponding type declarations.
 error TS2307: Cannot find module 'monaco-editor/esm/vs/language/html/html.worker?worker' or its corresponding type declarations.
 error TS2307: Cannot find module 'monaco-editor/esm/vs/language/typescript/ts.worker?worker' or its corresponding type declarations.

Any idea around how to fix this?

[hi-ogawa]

Your error looks like a typescript error, so it's a different nature of the issue from the one discussed here.
Probably some mis-configuration of vite/client typing, so looking this up might help https://vitejs.dev/guide/features.html#client-types. Or if you don't bother, you could simply ignore them:

// @ts-ignore
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';

[Nadaabdalkader]

Thank you for the reply!
// @ts-ignore made a successful build yes.
Looking into client types, I already have vite/client in compiler options types and it didn't make a difference in this case

[vcsavinash]

I have this code below:
import CacheWorker from './cache.worker?worker';

NOTE: cache.worker is a typescript file.
I am getting this error when building the project and dev works fine.
error during build: RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript)

Any idea how to fix this?

[hi-ogawa]

@vcsavinash OP's issue is specific to dev, so if you are having an issue on build, then that should be a different cause. Please open a separate issue with a reproduction, so we can properly investigate it.