Open HaydenOrz opened 11 months ago
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.
// src/languages/languageSetup.ts
import FlinkSQLWorker from 'monaco-sql-languages/out/esm/flinksql/flinksql.worker?worker';
// 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)
@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?
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
.
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
@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
.
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?
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';
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
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?
@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.
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
npm install
npm dev
System Info
Used Package Manager
npm
Validations
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
using the worker file
This only works in development mode. Exceptions will still occur in production mode. ( testing via
npm run build & npm run preview
)