Hello, everybody. I have just come to Ionic - React, and following the photo gallery tutorial for the first app, in Ionic v7, step by step, I found a problem when I’m going to take the first selfie:
Unable to load PWA Element ‘pwa-camera-modal’. See the docs: https://capacitorjs.com/docs/web/pwa-elements.
And a window to open a file pops up instead of the camera. I have seen the docs, I have put these lines in a new index.tsx file (the created project didn’t have one):
import { defineCustomElements } from ‘@ionic/pwa-elements/loader’;
// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);
So, I have json the LTS, git, and VS code, and I followed the installation instructions for the ionic CLI. I have tested all of these in Mac OS Ventura (Mac OS 13) and Ubuntu 22.04. Both situations ending exactly the same. So I would be very thankful if someone could help me.
If its not the correct place or maybe is better to look for help on discord, please tell me. Ionic looks like promising for me, so… I hope to understand this issue.
Thank you in advance.
Hey there @orangeberet , I am in the same boat (going thru Ionic photo-gallery tutorial in react).
Here is what I have found so far - the tutorial was written with Ionic v6, and works differently in v7.
The default starter-project install now uses src/main.tsx vs src/index.tsx (deduced by looking at /index.html and the <script type="module" src="/src/main.tsx"> under the <body> tag). However, even when applying the steps to main.tsx, it still isn’t working for me, either.
My problem then becomes that the “take selfie” doesn’t do anything… The console log shows
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isProxied')
at core-f86805ad.js:1179:27
at step (core-f86805ad.js:45:23)
at Object.next (core-f86805ad.js:26:53)
at fulfilled (core-f86805ad.js:17:58)
Yet when I clone the repository mentioned at the top of the tutorial page, (and run npm install followed by ionic serve), the camera works!! (Yes, there are some broken icons and stuff, but the camera works).
I have been trying to deduce what changes in package.json I might tweak to downgrade the version to get it to work; but I too am stumped.
Perhaps @netkow can assist (?please?), since he was/is the author of the tutorial?
1 Like
Thank you for posting, @wickahead2. I think we can row with sync 
.
Yes I did the same with the project in github, it seems the css configs are different too, henze the missing styles if we run the repository with our brand new updated ionic-react. I had these doubts about the index and main. tsx and so but you have helped. So, I hope the docs are updated soon so we are not so lost.
I think that if we are starting with ionic, we should focus in the last version. I think its less work than learning the v6 and then knowing the changes in v7. Just my opinion…
I will post any improvement I do here. Or maybe in other threads if not directly related.
Hello again! Still without solution. I have been looking the differences in the complete project from github and my new one and found nothing appropiated 
Looking in the upgrade to v7 docs too, but no success.
If I edit the main.tsx instead of creating an index.tsx and adding the lines for the pwa-elements import described in my first post, I get other errors like @wickahead2 mentioned:
- The load of the pwa-camera-modal.entry.js is blocked due to unallowed mime type
- TypeError: error loading dynamically imported module core-f86805ad.js:105:49
- Uncaught (in promise) TypeError: Cstr is undefined
initializeComponent core-f86805ad.js:1179
step core-f86805ad.js:45
verb core-f86805ad.js:26
fulfilled core-f86805ad.js:17
core-f86805ad.js:1179:21
I hope we can see some light.
Greetings.
might be more helpful at this point if you post a link to the code?
see this issue - https://github.com/ionic-team/pwa-elements/issues/109#issuecomment-1494022637
update vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'
// https://vitejs.dev/config/
export default defineConfig({
optimizeDeps: {
exclude: [`@ionic/pwa-elements/loader`],
},
plugins: [
react(),
VitePWA({ registerType: 'autoUpdate' })
]
})
@wickahead2 @orangeberet
2 Likes
Thank you! It works! Certainly I lack of searching level. Now I am reading that thread, and I will test if it works on Android too. I see that maybe I must implement a function to workaround on native devices.
So, I will be here for a while, lots of work to do and subjects to learn. Thank you very much, again.
Hi
It looks like this solution only fixes the issue in dev (“ionic serve”) but not in prod (“ionic build”).
When I run “ionic build” and deploy the dist folder to a web server as a PWA I still get the same errors as reported above:
Failed to fetch dynamically imported module: https://xyz.com/assets/pwa-camera-modal.entry.js
The pwa-camera-modal.entry.js is not generated / not in the assets folder. This has never been a problem with webpack.
Any idea how to resolve this in prod?
I am using Vue + Vite + Ionic.
Thanks
need a bit more information since this thread is three months old and I have no idea about your specific project. Is your project an Ionic CLI-generated project or a project you created starting with Vite?
And a sample project would be helpful
it is an Ionic CLI-generated project.
sample project: GitHub - Codemstr99/test
it works fine in dev but not build and deployed as PWA.
i would log an issue with the capacitor project github…
I am able to get it working by using the script tags in the index.html
ok - I’ve tried it by using the script tags. where did you put these in the index.html? header? Did you change/remove anything else also? I still get the same error…
remove this statement
defineCustomElements(window);
then it should work
Works! Thank you - still not sure if the original issue is actually a Capacitor issue or Vite related. It worked fine with Webpack.
Thank you! It works! Certainly I lack of searching level..
.