theme did not take effect in vue3

[jiaxiangwang]

I rewrote the Python example in the Vue3 project according to the examples(react), but encountered the following error: the theme did not take effect. Does anyone know why? Thank you very much.

18:44:40.278 GET http://localhost:5678/node_modules/.vite/deps/resources/package.nls.json net::ERR_ABORTED 404 (Not Found)
18:44:40.279 log.js:165 WARN [python]: Couldn't find message for key displayName.
18:44:40.280 log.js:165 WARN [python]: Couldn't find message for key description.
18:44:40.312 files.js:143

18:44:40.312 GET http://localhost:5678/node_modules/.vite/deps/resources/language-configuration.json net::ERR_ABORTED 404 (Not Found)
18:44:40.312 languageConfigurationExtensionPoint.js:92 Error: Not Found
18:44:40.312 GET http://localhost:5678/node_modules/.vite/deps/resources/package.nls.json net::ERR_ABORTED 404 (Not Found)
18:44:40.315 log.js:165 WARN [theme-defaults]: Couldn't find message for key displayName.
18:44:40.315 log.js:165 WARN [theme-defaults]: Couldn't find message for key description.
18:44:40.315 log.js:165 WARN [theme-defaults]: Couldn't find message for key darkPlusColorThemeLabel.
18:44:40.315 log.js:165 WARN [theme-defaults]: Couldn't find message for key darkModernThemeLabel.
18:44:40.315 log.js:165 WARN [theme-defaults]: Couldn't find message for key lightPlusColorThemeLabel.
18:44:40.315 log.js:165 WARN [theme-defaults]: Couldn't find message for key lightModernThemeLabel.
18:44:40.316 log.js:165 WARN [theme-defaults]: Couldn't find message for key darkColorThemeLabel.
18:44:40.316 log.js:165 WARN [theme-defaults]: Couldn't find message for key lightColorThemeLabel.
18:44:40.316 log.js:165 WARN [theme-defaults]: Couldn't find message for key hcColorThemeLabel.
18:44:40.316 log.js:165 WARN [theme-defaults]: Couldn't find message for key lightHcColorThemeLabel.
18:44:40.316 log.js:165 WARN [theme-defaults]: Couldn't find message for key minimalIconThemeLabel.
18:44:40.323 index.ts:35 Init of Extended App was completed.
18:44:40.421 GET http://localhost:5678/node_modules/.vite/deps/resources/light_modern.json net::ERR_ABORTED 404 (Not Found)
18:44:40.438 workbenchThemeService.js:367 Uncaught (in promise) Error: Unable to load extension-file://vscode.theme-defaults/themes/light_modern.json: Not Found
at StandaloneWorkbenchThemeService.internalSetColorTheme (workbenchThemeService.js:367:21)
at async workbenchThemeService.js:395:21
at async UniqueContainer.value (workbenchThemeService.js:249:17)
internalSetColorTheme @ workbenchThemeService.js:367
await in internalSetColorTheme
18:44:40.438 GET http://localhost:5678/node_modules/.vite/deps/resources/MagicPython.tmLanguage.json net::ERR_ABORTED 404 (Not
18:44:40.457 log.js:175 ERR Unable to load and parse grammar for scope source.python from extension-file://vscode.python/syntaxes/MagicPython.tmLanguage.json Error: Not Found
at RegisteredUriFile.fetch (files.js:151:19)
at async RegisteredUriFile.read (files.js:159:26)
at async RegisteredFileSystemProvider.readFile (files.js:345:16)
at async fileService.js:568:30
18:44:40.703 MonacoEditor.vue:221
18:44:40.703 GET http://localhost:5678/node_modules/.vite/deps/resources/dark_modern.json net::ERR_ABORTED 404 (Not Found)
triggerConfigurationChange @ configurationService.js:987
onLocalUserConfigurationChanged @ configurationService.js:712
18:44:40.704 workbenchThemeService.js:367 Uncaught (in promise) Error: Unable to load extension-file://vscode.theme-defaults/themes/dark_modern.json: Not Found
at StandaloneWorkbenchThemeService.internalSetColorTheme (workbenchThemeService.js:367:21)
at async workbenchThemeService.js:395:21

[jiaxiangwang]

This line of code has already been added.

// this is required syntax highlighting
import '@codingame/monaco-vscode-python-default-extension'

[kaisalmen]

@jiaxiangwang are you using the '@codingame/esbuild-import-meta-url-plugin in you dev server like here https://github.com/TypeFox/monaco-languageclient/blob/main/vite.config.ts#L57-L63 ? This helps resolving asset loading issues with vite.

[jiaxiangwang]

@kaisalmen Thank you for your reply, it works.
There is still a minor issue: the theme starts off as white and then suddenly switches to black. If this problem can be resolved, it would be perfect.

[kaisalmen]

@jiaxiangwang you need to update the userConfiguration as soon as possible, after initialization of the services and before initializing and starting the editor. I adjusted this recently in the wrapper, but this is not yet released.

[jiaxiangwang]

Thank you, I will try it once the wrapper is released.

[kaisalmen]

A new next release is available: https://www.npmjs.com/package/monaco-editor-wrapper/v/6.0.0-next.1

[kaisalmen]

@jiaxiangwang did you make it work?