monaco-sql-languages: Can not load language due to _EditorSimpleWorker.loadForeignModule error
Using Vite and standard configuration like yours https://github.com/DTStack/monaco-sql-languages/blob/main/website/vite.config.ts
languageWorker.ts
self.MonacoEnvironment = {
async getWorker(_, label) {
let worker;
switch (label) {
case 'trinosql':
worker = await import('monaco-sql-languages/out/esm/trinosql/trinosql.worker?worker');
break;
default:
worker = await import('monaco-editor/esm/vs/editor/editor.worker?worker');
}
return new worker.default();
},
};
monacoInit.ts
import { loader } from '@monaco-editor/react';
import * as monaco from 'monaco-editor';
import 'monaco-sql-languages/out/esm/trinosql/trinosql.contribution';
import {
setupLanguageFeatures,
LanguageIdEnum,
} from 'monaco-sql-languages';
import './language-worker.ts';
import { theme } from './theme';
setupLanguageFeatures({
languageId: LanguageIdEnum.TRINO,
completionItems: false
});
loader.config({ monaco });
loader.init().then((monaco) => {
monaco.editor.defineTheme('theme', theme);
});
Editor.tsx
import MonacoEditor from '@monaco-editor/react';
import { LanguageIdEnum } from 'monaco-sql-languages';
export const Editor = (editorOptions) => {
return (
<MonacoEditor
height="100%"
width="100%"
defaultLanguage={LanguageIdEnum.TRINO}
options={editorOptions}
/>
);
}
About this issue
- Original URL
- State: closed
- Created 7 months ago
- Comments: 28
@glebcha @ankit-shopflo @resetsix
Hi, here’s the happy news. I’ve done my preliminary work on the antlr4 runtime migration of dt-sql-parser https://github.com/DTStack/dt-sql-parser/pull/261, and it’s been much smoother than expected.
Now you can install
monaco-sql-languages@0.12.0-beta.ng.1to experience. While this feature hasn’t been merged into the main branch yet, I’ve done quite a bit of testing and it’s working well so far.In this release, the issue of integration with Vite has been resolved. In addition , dependencies such as
assertandutiland the global variableprocess.envmentioned in the previous documentation are no longer needed. Now, integrating monaco-sql-languages in Vite no longer requires any additional dependencies or any redundant configurations.You can see the latest integration documentation and the latest integration examples on this branch https://github.com/HaydenOrz/monaco-sql-languages/tree/feat/migrate_ng
@glebcha @ankit-shopflo @resetsix
monaco-sql-languages 0.12.0-beta.11 has been released： https://www.npmjs.com/package/monaco-sql-languages/v/0.12.0-beta.11
We have confirmed that the issue is fixed on this version, please install this version to fix this issue.
In addition to this, there are some breaking changes on this release, if the upgrade causes an exception, please check the latest documentation.
This issue will be closed within a week if it is not active.
I’m following up on this issue, but there’s no more progress at the moment.
The Monaco SQL Languages website is currently being built with vite, but it requires
vite-plugin-commonjs, This is the only solution at the moment, but I don’t think it’s suitable for most projects.@resetsix @glebcha I have to admit that we didn’t do enough testing on the monaco-sql-langauges integration. Because monaco-sql-languages works well in webpack and umi projects,
Regarding the sourceMap of dt-sql-parser, we will release a new package to remove the sourceMap in the near future. In fact, dt-sql-parser is compiled using tsc only, and sourceMap is not required.
Previously, our main focus was on supporting more sql-languages, and I’m sorry that these issues have caused you so much trouble. We’ll resolve integration issues as soon as possible and provide examples of integrations.
@resetsix @glebcha
Integrating samples and integrating doc are all done now.
Integration in Vite is still not supported at this time.
Referring to monaco-sql-languages-vite, this issue can be bypassed. This may not be the ultimate solution, I’ll keep track of the issue.
The relevant integration documentation will be updated at a later date.
Sorry for being late with repro. Great that you’ve found this bug. Now I try to understand why this happen in Vite and seems that it is because of import resolution strategy, but it is only a possibility. Also sometimes Vite’s builds are failing with registering language worker while codebase stay same (that’s why import resolution strategy may be the reason). Also I’ll try rspack, because it has compatibility layer with webpack api and webpack seems to work great with your library.
I’ve reproduced this issue. When I start Vite, I get an error like this printed in my terminal.
And found the error you reported in the browser.
It’s a weird question for me. I’m not proficient at using Vite and I don’t know how to fix this at the moment, but I’ll keep trying. If you have any ideas on how to fix this, please let me know, it will be very helpful for me, thanks.
Yes, monaco-sql-languagues works with the latest version of monaco-editor in most cases. However, this depends on whether the latest version of monaco-editor changes to the handling of languageWorkers.
Sure, here they are (changing monaco version to 0.31.0 won’t change anything):
I’ll try to provide a sandbox.