quasar: TypeError: Failed to fetch dynamically imported module

What happened?

Unable to cache pwa-camera-modal.entry.js

TypeError: Failed to fetch dynamically imported module:

yarn add @ionic/pwa-elements

boot/capacitor.ts

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

export default async () => {
  await defineCustomElements(window);
};

https://127.0.0.1:8008/node_modules/.q-cache/vite/spa/pwa-camera-modal.entry.js

What did you expect to happen?

able to use capacitor camera on the web

Reproduction URL

no link

How to reproduce?

install

1: yarn add @ionic/pwa-elements

2: Add capacitor.ts to quasar.config.js boot

3: quasar d

4: test the capacitor camera on web you it wont work

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

SPA Mode

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 15 (6 by maintainers)

Most upvoted comments

Hi,

It’s been a while since this issue was raised (and closed) but I have experienced the same issue. It seems that the file, “pwa-camera-modal.entry.js” is not in the location it is expected. http://localhost:9000/node_modules/.q-cache/vite/spa/deps/pwa-camera-modal.entry.js.

The camera example on this page, https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-api does not work. I understand it is not a priority but it would be great if you could take a look at the issue.

image

Yes, It is possible to load the files from node_modules folder:

<script type="module" src="node_modules\@ionic\pwa-elements\dist\ionicpwaelements\ionicpwaelements.esm.js" ></script> <script nomodule src="node_modules\@ionic\pwa-elements\dist\ionicpwaelements\ionicpwaelements.js" ></script>

I translated your comment. Yes, it works with Quasar with Webpack but not Quasar with Vite. I tried again today with a new app with the same (bad) result. This page mentions the issue and a possible workaround: https://github.com/ionic-team/pwa-elements/issues/109. I added the cdn links on this page https://capacitorjs.com/docs/web/pwa-elements to the index.html file in the Quasar project folder and it seems to work (but it took quite a long time to initilalise the first time). I think it will be possible to load the ionicpwaelements.js file locally but I havent tried it. It would be good to not have to go to this trouble. Here are the links.

<script type="module" src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"></script> <script nomodule src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"></script>