SSR not working with ESM modules in vite #585
Comments
|
We have switch the default bundler to vite since v2.0.0-beta.28. Your Try migrating |
|
This issue is marked as |
|
Hi, I applied the vite compiler options, but i was only able to get rid of the console.logs for the web components namespace. I just did a fresh install and always got the error clientAppSetup.js?t=1640938795483:7 Uncaught ReferenceError: Cannot access 'defineClientAppSetup' before initialization
at clientAppSetup.js?t=1640938795483:7inside If i then reload, the issue has been gone. Also, using vite and webcomponents, vite is somehow restarting multiple times on console. Still my main problem is, that i am not able to build the site, while preview is working. info Initializing VuePress and preparing data...
✔ Compiling with vite - done
✖ Rendering pages - failed
C:\VSC\playground\vuepress-next\node_modules\@ui5\webcomponents-base\dist\config\Theme.js:1
import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
^^^^^^
SyntaxError: Cannot use import statement outside a moduleI was able to get rid of this error adding But next error is I like the performance of vite, but webpack worked out-of-the-box for me. Since preview is working, it would be great to get all the dependencies also working for the build. Anyhow, webpack is my current working option, and if this will be supported also in the future, i can stay on this. I just wanted to give feedback ;-) Best Regards |
|
I met similar issues when using pure esm packages on client side with vite. I am importing BTW I updgrade this deps months ago, and it's working fine on vite that time either. May need some help here. @meteorlxy I think there might be some issues generating this file which leads "requiring" esm modules in the generated code (I guess?) // dist/.server/app.js:29
var w$4 = require("screenfull"); |
|
I'm having the exact same issue with d3 (and its packages like d3-selection). Logs of the issue are available at https://github.com/DerYeger/d3-graph-controller/runs/4744365874?check_suite_focus=true. While Webpack does work, it has other issues like broken CSS. I'd much prefer to stay with Vite. |
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
|
@meteorlxy I finally figure out the problem location. A list of package is hard code here. But actually packages having client esm and node cjs should also be posted above so that they can be resolved here. When I add my package here in the list, I sucessfully built with vite, but without my package in the list, I am getting: And if my package contain |
|
@Mister-Hope Great find! I gave it a look with my project, and found that adding the offending packages to import { defineConfig } from 'vite'
export default defineConfig({
root: 'docs',
optimizeDeps: {
include: ['vue'],
},
// @ts-expect-error Invalid types can be ignored
ssr: {
noExternal: ['d3-drag', 'd3-force', 'd3-selection', 'd3-zoom'],
},
})So it seems no changes to Vuepress or the file mentioned above are required. The only issue I'm facing with this solution, is that the types are not correct as the |
I am getting your point, but the solution you mentioned, did you check it in vitepress or vuepress? The expect behavior of vuepress, is that it should omit any vite.config,js files. If you add that file in one your vuepress folder and vuepress is reading it, it should be regarded as another bug. Waiting for your reply. 🙂 |
Vuepress 2. My Vuepress config includes bundler: '@vuepress/vite',
bundlerConfig: {
viteOptions: {
configFile: 'docs/vite.config.ts',
},
},so it should be included. Alternatively, the above mentioned config can be inlined in the |
|
This bug I believe, acually comes from an internal change in [email protected]. See the docs: https://vitejs.dev/guide/ssr.html#ssr-externals
Though it still says "In future", but it seems like the default behavoir already. That's why we have this bug. |
Yeah, I just noticed that. I thought the file I referenced have highest property before you remind me. It's a plugin, but it will still be infected by users config. Thanks reminding that. |
|
So, should it really be a bug under this reason? Ideas are welcome. If you guys agree it's not a bug and something we should deal with ourselves, we can close this issue. |
Considering the Vite change you referenced above, I'd argue it's not a bug with Vuepress/Vitepress but an issue with Vite caused by the ongoing ESM/CJS ecosystem migration. The |
Mister-Hope
changed the title
|
Emm, just have a rethink of it. If all plugins are providing esm syntax on client side, all the plugins should be added into |
|
@Mister-Hope We've already add all official plugins to I solved lots of issues when trying to support vite. I must have noticed the |
The Correction: While the issue briefly went away upon making the configuration changes, it has since returned. Therefore, it is probably unrelated to This is in a project that uses |
I think we may need to automatically add all the plugins into the list in Also, I am negative to hard coding all the official plugins here, they should only be added when they are imported into a vuepress project. |
Mister-Hope
added
documentation
|
This should have been fixed by our recent release. |
so how we fix it use vite below 2.7? |
Bug report
After updating deps of
btp.udina.de live with 2.0.0.beta27
i run into some issues.
Description
Fomerly, i did no need ClientOnly tags around my custom components loaded by plugin register-components, but i was able to fix this using
Somehow, using
vuepress dev docsthe site is not working in browser.If i open chrome dev tools, i see errors, but on reload, preview is working?!?
Some of the used Components (referencing UI5 Web Component) initially throw an error
Then i manually have to reload the page 1/2 times, to get the component working in preview?
After serving the site multiple times, i am able to preview the whole site and i wantz to compile the result.
Problem: Event not used artefacts are throwing errors (wrong images, etc.) but they are not linked/used in config.
Anyhow, this worked with older version.
Now trying to build the docs using
vuepress build docs --clean-cacheThere seems to be some issues with vite and custom components.
Maybe this is a problem with plugin-register-components.
All Component are inside -> /docs/.vuepress/components/...
The import
import "@ui5/webcomponents/dist/Label";
is referencing the devDependencies
and is also available.
Additionally using config option
Environment info
Just figured out, that i can fallback to webpack and everthing is still working as expected. But anyhow, since vite is the new default, maybe this issues are solveable also on vite.
Best Regards
Holger
The text was updated successfully, but these errors were encountered: