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)
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.
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>