content:

[WatchfulFox]

URL

https://ionicframework.com/docs/react/your-first-app/taking-photos

Issue Description

I had (and some others too I believe) an issue with the camera plugin. Vite may report a 'not found' (more specifically a 504) when trying to run this part of the photo-gallery code. It might be worth adding the following to the content possibly between the instruction to create a new file and the custom hook explanation:

Create a new file at src/hooks/usePhotoGallery.ts and open it up.
--- here---
Note for people using the latest Ionic version (7.0.0.0)
Before starting the imports, look for the file vite.config.js in the root of your project. It contains some default configuration which will be important for the Camera API to work properly. Edit the file and add the following to the default defineConfig export:

  optimizeDeps: {
    exclude: [`@ionic/pwa-elements/loader`],
  }

The file should now look like this with the edit in place:

import legacy from '@vitejs/plugin-legacy'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    legacy()
  ],
  optimizeDeps: {
    exclude: [`@ionic/pwa-elements/loader`],
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
  },
})

Without this step, the system may produce an error with a message about a 'missing mime type' or it might give a '404' error and the code will not work.

A custom hook is just a function that uses other React hooks. And that's what we will be doing! We will start by importing the various hooks and utilities we will be using from React core, the Ionic React Hooks project, and Capacitor:

Hope that helps. Or obviously use your own wording of course :)

Mike

[daniel-hampton]

Thank you. I just ran into this problem going through the tutorial and adding this to the defineConfig object in vite.config.js got the camera working for web.

optimizeDeps: {
    exclude: [`@ionic/pwa-elements/loader`],
}

edit: I'm on ionic version 7.1.1

[sean-perkins]

Tracking this against: ionic-team/pwa-elements#118

[sean-perkins]

👋 hello, this has been resolved in v3.2.0 of @ionic/pwa-elements.