Please help with missing dep on 'Building your first app' tutorial

Ionic Framework
1

Building ‘photo-gallery’ with the help of ‘Build your first app’ in Ionic docs. Getting a 504 and the following error when I click the ‘photo’ icon and try to take a photo:

Loading module from “http://localhost:8100/node_modules/.vite/deps/pwa-camera-modal.entry.js” was blocked because of a disallowed MIME type (“”).

I have checked via the terminal and although both /vite and /.vite exist and have seemingly been installed, /node_modules/.vite/deps/pwa-camera-modal.entry.js does not exist (maybe because it’s dynamic?) so it looks like the hook is calling the correct file but is failing. The app was working fine up to the point of testing the photo function.

Here is the hook:

import { useState, useEffect } from 'react';
import { isPlatform } from '@ionic/react';

import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem';
import { Preferences } from '@capacitor/preferences';
import { Capacitor } from '@capacitor/core';

export function usePhotoGallery() {
    const takePhoto = async () => {
      const photo = await Camera.getPhoto({
        resultType: CameraResultType.Uri,
        source: CameraSource.Camera,
        quality: 100,
      });
    };
  
    return {
      takePhoto,
    };
  }

Here is my package.json file so you can see my versions.

{
  "name": "photo-gallery",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test.e2e": "cypress run",
    "test.unit": "vitest",
    "lint": "eslint"
  },
  "dependencies": {
    "@capacitor/app": "5.0.2",
    "@capacitor/camera": "^5.0.2",
    "@capacitor/core": "5.0.3",
    "@capacitor/filesystem": "^5.0.2",
    "@capacitor/haptics": "5.0.2",
    "@capacitor/keyboard": "5.0.2",
    "@capacitor/preferences": "^5.0.2",
    "@capacitor/status-bar": "5.0.2",
    "@ionic/pwa-elements": "^3.1.1",
    "@ionic/react": "^7.0.0",
    "@ionic/react-router": "^7.0.0",
    "@types/react-router": "^5.1.20",
    "@types/react-router-dom": "^5.3.3",
    "ionicons": "^7.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^5.3.4",
    "react-router-dom": "^5.3.4"
  },
  "devDependencies": {
    "@capacitor/cli": "5.0.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-legacy": "^4.0.2",
    "@vitejs/plugin-react": "^3.1.0",
    "cypress": "^12.7.0",
    "eslint": "^8.35.0",
    "eslint-plugin-react": "^7.32.2",
    "jsdom": "^21.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.1.0",
    "vitest": "^0.29.2"
  },
  "description": "An Ionic project"
}
Please help, really looking forward to see what ionic can do :) Just ask if you need any other info from my system. I'm developing on a Linux Mint OS 

thanks,

Mike
2

[SOLVED]
No answer showed up when I searched originally for this problem, but searching for another of the errors in the chain brought a solution via the forum to an answer on the Ionic team’s pwa-elements repository on GIT. I believe the error is happening after you update to version 7 of Ionic:

Open the vite.config.ts file in the route of your project
add this as a new item in the defineConfig export

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

This worked for me. Hope it works for others

Here is a link to the issues section of the GIT repo for more information if needed:

thanks,

Mike

3

See Also / they seem to be related

Problem following the photo-gallery tutorial - Ionic Framework / Ionic React - Ionic Forum

4

Yep @aaronksaunders It actually leads to the same place where I got my answer. The way I first searched for the answer didn’t show that result though :frowning: but yeah, it’s the same thing.

… actually, just noticed a link on the tutorial to edit the page, or suggest an edit anyhow so I’ll post there and it might get accepted and avoid the error for someone else :slight_smile: