TypeError: Failed to fetch dynamically imported module

[diadal]

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

[github-actions]

Hi @diadal! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[rstoenescu]

Hi,

Please try again with q/app beta.4
And if it is still reproducible, post a reproduction repo here and I'll reopen.

[diadal]

still not able to make this work node_modules delete fresh install still the error keep coming

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

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

[rstoenescu]

Please post a bare-minimum reproduction repo.

[diadal]

https://github.com/diadal/tester.git

[rstoenescu]

Thanks for supplying the repo.

Your problem is more related to Vite itself or the way that you are supposed to use the ionic stuff, but can't tell without extensive research. This is a very unusual way to use Capacitor stuff without Capacitor mode itself (not that you need it; I get what you're trying to achieve). Unfortunately, can't afford to invest this large amount of time on an unproven Quasar CLI issue -- I'm fairly confident (99%) that this is not Quasar at fault here.

[diadal]

but this work fine with webpack i guess like you said the issue may be with vite

also, it will be nice if quasar will have its own module for file input and camera option

but have used a different approach

[paladyne-io]

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.

[Jeziel-Guiev]

El problema se soluciona utilizando webpack, a mi igual me salto el error y al parecer es de vite el error para no seguir con el problema me tuve que pasar a webpack

[paladyne-io]

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: ionic-team/pwa-elements#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>

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

[obadakhalili]

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: ionic-team/pwa-elements#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>

Thanks for the suggestion!

[bruno-py]

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>

[CreativeWarlock]

The very same error is occurring when using "ckeditor" in a Vue / Vite project. Very annyoing. 70% of the page request this error pops up, 30% of the time the editor loads and the content is being displayed.

[Luann0233]

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>

This is a possible solution, but it doesn't work if you are using Capacitor and want to build a web application and an android app. I was doing some tests, and using this kind of ''import'' only works when we run quasar dev or quasar dev -m pwa. When I tried to run quasar dev -m capacitor -T android, the app got an infinite white screen and would not load, so the solution I found to work around this problem was to use the following ''import'':

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

I found this script in the pwa-elements documentation:
https://capacitorjs.com/docs/v2/web/pwa-elements#including-through-script-tag