pwa-elements: Unable to load dynamic imports with vite

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.

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)

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 23
Comments: 24 (1 by maintainers)

Commits related to this issue

Add optimizeDeps exclusion note for vite config 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)` e... — committed to mvanderlinde/ionic-docs by mvanderlinde a year ago
👷 replaced cdn artefact for pwa-elements with a npm package this was harder than expected, because of some dynamic (variabilized) imports which were not resolved by vitejs thanks to [this comment](h... — committed to voxxrin/voxxrin3 by fcamblor a year ago
chore: upgrade to stencil 3 (#118) Resolves #109 — committed to ionic-team/pwa-elements by sean-perkins a year ago

Most upvoted comments

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"

+21

o-alexandrov on Jan 26, 2023

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

b4-io on Mar 16, 2023

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 👍

sean-perkins on Jul 5, 2023

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

suchorski on Mar 8, 2023

@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!!

Erudition on Apr 9, 2023

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 on Mar 16, 2023