Unable to load dynamic imports with vite #109

DinosaurDad · 2022-03-28T20:02:12Z

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)

The text was updated successfully, but these errors were encountered:

ottojaa · 2022-06-24T22:01:08Z

Would be nice to get some news / workarounds on this

Tommertom · 2022-06-30T14:33:17Z

+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 · 2022-07-04T19:59:15Z

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 · 2022-07-28T06:31:04Z

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

Tommertom · 2022-07-28T06:46:33Z

Workaround in index.html

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

See earlier posts

Jeziel-Guiev · 2022-11-03T14:22:04Z

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 · 2023-01-15T13:41:05Z

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

o-alexandrov · 2023-01-26T14:11:47Z

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 · 2023-03-08T00:18:48Z

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 · 2023-03-15T13:49:01Z

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

suchorski · 2023-03-15T14:59:23Z

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

Any news about it? Are you using nuxt?

b4-io · 2023-03-15T15:16:23Z

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.

b4-io · 2023-03-15T15:27:05Z

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)

b4-io · 2023-03-16T16:55:05Z

@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)
    }
};

suchorski · 2023-03-16T16:57:35Z

@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

sultanmyrza · 2023-04-03T09:54:30Z

ionic 7 is released 🎉.

Ionic 7 removes the Common JS entry points for Ionic React and Ionic Vue to make each package easier to use with Vite and Vitest.

But ionic 7 React is not working with @ionic/pwa-elements

Steps to reproduce:
Try to complete Your First Ionic App: React

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.

Erudition · 2023-04-09T23:27:15Z

@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)
    }
};

Where is core-**.js?
Edit: nvm, found it. IT WORKS!!

suchorski · 2023-04-10T00:36:06Z

WORKS!!

Are you using nuxt 3?

Erudition · 2023-04-10T00:41:56Z

Nope, no framework.

suchorski · 2023-04-10T00:45:32Z

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)

viniciusgati · 2023-07-01T12:16:29Z

i dont know where to put the fix... i have no core*js file in my ionic project

b4-io · 2023-07-01T20:39:12Z

i dont know where to put the fix... i have no core*js file in my ionic project

It's inside node_modules

Resolves #109

sean-perkins · 2023-07-05T20:52:06Z

Hello everyone 👋 this should be resolved in v3.2.0 of @ionic/pwa-elements.

Let me know if that isn't the case in a new bug report 👍

viniciusgati · 2023-07-07T14:00:03Z

Hello everyone 👋 this should be resolved in v3.2.0 of @ionic/pwa-elements.

Let me know if that isn't the case in a new bug report 👍

Solved here, thanks man.

IT-MikeS mentioned this issue Jun 28, 2022

feat: add bundler ionic-team/create-capacitor-app#15

Merged

Lexpeartha mentioned this issue Jul 2, 2022

Add support for custom pwa elements nuxt-modules/ionic#21

Closed

aaronthomaswebster mentioned this issue Aug 30, 2022

Can't use PWA Elements aaronksaunders/ionicv6-beta-vue-vite-project#2

Closed

paladyne-io mentioned this issue Nov 3, 2022

TypeError: Failed to fetch dynamically imported module quasarframework/quasar#12806

Closed

mvanderlinde mentioned this issue Apr 4, 2023

Add optimizeDeps exclusion note for vite config ionic-team/ionic-docs#2877

Closed

sean-perkins mentioned this issue Jun 28, 2023

chore: upgrade to stencil 3 #118

Merged

sean-perkins closed this as completed in #118 Jul 5, 2023

sean-perkins added a commit that referenced this issue Jul 5, 2023

chore: upgrade to stencil 3 (#118)

5f3cde4

Resolves #109

elongberg mentioned this issue Jan 11, 2024

Warning when running with Angular + Vite #129

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable to load dynamic imports with vite #109

Unable to load dynamic imports with vite #109

DinosaurDad commented Mar 28, 2022

ottojaa commented Jun 24, 2022

Tommertom commented Jun 30, 2022 •

edited

Loading

SanderGo commented Jul 4, 2022

AbdullahKhan780 commented Jul 28, 2022

Tommertom commented Jul 28, 2022 •

edited

Loading

Jeziel-Guiev commented Nov 3, 2022

wmadden commented Jan 15, 2023

o-alexandrov commented Jan 26, 2023 •

edited

Loading

suchorski commented Mar 8, 2023

b4-io commented Mar 15, 2023

suchorski commented Mar 15, 2023

b4-io commented Mar 15, 2023

b4-io commented Mar 15, 2023 •

edited

Loading

b4-io commented Mar 16, 2023

suchorski commented Mar 16, 2023

sultanmyrza commented Apr 3, 2023 •

edited

Loading

Erudition commented Apr 9, 2023 •

edited

Loading

suchorski commented Apr 10, 2023

Erudition commented Apr 10, 2023

suchorski commented Apr 10, 2023

viniciusgati commented Jul 1, 2023

b4-io commented Jul 1, 2023

sean-perkins commented Jul 5, 2023

viniciusgati commented Jul 7, 2023

Unable to load dynamic imports with vite #109

Unable to load dynamic imports with vite #109

Comments

DinosaurDad commented Mar 28, 2022

ottojaa commented Jun 24, 2022

Tommertom commented Jun 30, 2022 • edited Loading

SanderGo commented Jul 4, 2022

AbdullahKhan780 commented Jul 28, 2022

Tommertom commented Jul 28, 2022 • edited Loading

Jeziel-Guiev commented Nov 3, 2022

wmadden commented Jan 15, 2023

o-alexandrov commented Jan 26, 2023 • edited Loading

suchorski commented Mar 8, 2023

b4-io commented Mar 15, 2023

suchorski commented Mar 15, 2023

b4-io commented Mar 15, 2023

b4-io commented Mar 15, 2023 • edited Loading

b4-io commented Mar 16, 2023

suchorski commented Mar 16, 2023

sultanmyrza commented Apr 3, 2023 • edited Loading

Erudition commented Apr 9, 2023 • edited Loading

suchorski commented Apr 10, 2023

Erudition commented Apr 10, 2023

suchorski commented Apr 10, 2023

viniciusgati commented Jul 1, 2023

b4-io commented Jul 1, 2023

sean-perkins commented Jul 5, 2023

viniciusgati commented Jul 7, 2023

Tommertom commented Jun 30, 2022 •

edited

Loading

Tommertom commented Jul 28, 2022 •

edited

Loading

o-alexandrov commented Jan 26, 2023 •

edited

Loading

b4-io commented Mar 15, 2023 •

edited

Loading

sultanmyrza commented Apr 3, 2023 •

edited

Loading

Erudition commented Apr 9, 2023 •

edited

Loading