Unable to load dynamic imports with vite

[DinosaurDad]

Resources:

dependencies:
@capacitor/camera 1.3.1
@capacitor/core 3.4.3
@ionic/pwa-elements 3.1.1
@ionic/vue 6.0.13
vue 3.2.31
vue-router 4.0.14

devDependencies:
@vitejs/plugin-vue 2.2.4
vite 2.8.6

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:

TypeError: Failed to fetch dynamically imported module:
   http://localhost:3000/node_modules/.vite/pwa-action-sheet.entry.js
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isProxied')
    at core-f86805ad.js:1176:25
    at step (core-f86805ad.js:45:23)
    at Object.next (core-f86805ad.js:26:53)
    at fulfilled (core-f86805ad.js:17:58)

[ottojaa]

Would be nice to get some news / workarounds on this

[Tommertom]

+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

[SanderGo]

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):
https://capacitorjs.com/docs/web/pwa-elements

[AbdullahKhan780]

I'm also getting the same error! Did anyone get any solution?

[Tommertom]

Workaround in index.html

https://github.com/Tommertom/svelte-ionic-mystarter-demo/blob/main/index.html

See earlier posts

[Jeziel-Guiev]

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.

[wmadden]

It'd be great to hear from the pwa-elements team on this one, it's been open for a while

[o-alexandrov]

It's actually simple, add the following to your vite.config.ts, see optimizeDeps in vite's docs.

optimizeDeps: {
  exclude: [`@ionic/pwa-elements/loader`],
},

Then, in your app, make sure you import as the docs say:

import { defineCustomElements } from "@ionic/pwa-elements/loader"

[suchorski]

It's actually simple, add the following to your vite.config.ts, see optimizeDeps in vite's docs.

optimizeDeps: {

  exclude: [`@ionic/pwa-elements/loader`],

},

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

[b4-io]

same thing happening to me with pwa-camera-modal.entry.js for de camera

[suchorski]

same thing happening to me with pwa-camera-modal.entry.js for de camera

Any news about it? Are you using nuxt?