-
Notifications
You must be signed in to change notification settings - Fork 50
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Unable to load dynamic imports with vite #109
Comments
Would be nice to get some news / workarounds on this |
+1 Any got this to work with CDN? @DinosaurDad @ottojaa? (svelte & vite) CDN in Index.html gives same error with me I wonder why it does work in an angular project, apparently the components are not lazily loaded? EDIT - I stand corrected - works ok with CDN include in index.html. So I can also opt to have that code part of assets folder and then do a local include. At least it works. Repo:https://github.com/Tommertom/svelte-ionic-mystarter-demo |
I'm getting the same error on a brand new Laravel install. They use Vite now by default instead of Webpack (through Mix). Capacitor / Camera / PWA Elements worked fine when building with Webpack. After moving to clean Laravel repo with Vite, I got the 'Failed to fetch dynamically imported module'. Finally got it solved by using the CDN script, which is oke for now. Hope we can just use Vite to make a nice working build sometime soon. P.S. In the docs section for 'Including through script tag', the src links are incorrect (double paste): |
I'm also getting the same error! Did anyone get any solution? |
Workaround in index.html https://github.com/Tommertom/svelte-ionic-mystarter-demo/blob/main/index.html See earlier posts |
That yes, with CDN it works well and I was testing details in that way, is that when I need to do it offline the CND does not give the first time but as a temporary solution it is not bad at all. |
It'd be great to hear from the pwa-elements team on this one, it's been open for a while |
It's actually simple, add the following to your
Then, in your app, make sure you import as the docs say: import { defineCustomElements } from "@ionic/pwa-elements/loader" |
It works. But when using action sheet, is missing pwa-action-sheet.entry.js when building the dist folder. But when using dev mode, it loads normally from node_modules folder. Am I missing something? Thanks |
same thing happening to me with pwa-camera-modal.entry.js for de camera |
Any news about it? Are you using nuxt? |
Im working on patching the package so it doesn't use any dynamic imports, will be slower on initial render but will work. I'm using solidjs. |
Patching the package with patch-package seemed to work, it may not be elegant but it is what it is. I changed the loadModule function in core-... .js. This was my change for the camera only (as fixing the other will result in larger bundles) |
@suchorski Ended up with this function that works with dynamic imports and with the same logic as the original one. Also undid the change to vite config as this fix development too. var loadModule = function (cmpMeta, hostRef, hmrVersionId) {
// loadModuleImport
var exportName = cmpMeta.$tagName$.replace(/-/g, '_');
var bundleId = (cmpMeta.$lazyBundleIds$);
var module = moduleCache.get(bundleId);
if (module) {
return module[exportName];
}
const postImport = (importedModule) => {
{
moduleCache.set(bundleId, importedModule);
}
return importedModule[exportName];
};
switch (bundleId) {
case 'pwa-camera-modal': return import('./pwa-camera-modal.entry.js').then(postImport, consoleError)
case 'pwa-camera-modal-instance': return import('./pwa-camera-modal-instance.entry.js').then(postImport, consoleError)
case 'pwa-camera': return import('./pwa-camera.entry.js').then(postImport, consoleError)
case 'pwa-action-sheet': return import('./pwa-action-sheet.entry.js').then(postImport, consoleError)
case 'pwa-toast': return import('./pwa-toast.entry.js').then(postImport, consoleError)
}
}; |
Very nice... Will take a look |
ionic 7 is released 🎉.
But ionic 7 React is not working with @ionic/pwa-elements Steps to reproduce: |
The current instructions for building one's first app using Vue + Vite does not work, and results in a `net::ERR_ABORTED 504 (Outdated Optimize Dep)` error. Based on the discussion in ionic-team/pwa-elements#109 — and confirmed by my own testing — excluding the `pwa-elements` loader from Vite's dependency optimization fixes the issue in development. It seems there may be lingering issues in production builds even with this fix based on that same open issue, but at the very least, this removes a current blocker in the documentation for users creating their first Ionic app.
Where is core-**.js? |
Are you using nuxt 3? |
Nope, no framework. |
Thanks |
this was harder than expected, because of some dynamic (variabilized) imports which were not resolved by vitejs thanks to [this comment](ionic-team/pwa-elements#109 (comment)) I was able to workaround it by patching the package in order to make dynamic import less variabilized (so that vite bundles these dependencies at build time)
i dont know where to put the fix... i have no core*js file in my ionic project |
It's inside |
Hello everyone 👋 this should be resolved in v3.2.0 of Let me know if that isn't the case in a new bug report 👍 |
Solved here, thanks man. |
Resources:
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com
Current behavior:
Error when trying to use the PWA Elements camera with vite:
Expected behavior:
Module should load and a modal camera should appear.
Steps to reproduce:
Build, run, and push the
SNAP
button.Related code:
https://github.com/DinosaurDad/capacitor-pwa-camera-vite
Other information:
Error and call stack:
The text was updated successfully, but these errors were encountered: