Ionic 7 migration react-vite issue

Ionic Framework Ionic React
1

Hello, I have migrated my ionic 5 project to ionic 7 and updated the capacitor version, but I am getting this error: RollupError: Could not resolve “./ionic-{}.js” from “node_modules/@ionic/core/components/index.js”.
Could anyone assist me in resolving this issue?

Thank you so much

Screenshot 2023-07-12 at 5.13.38 PM
Screenshot 2023-07-12 at 5.13.38 PM3380×656 422 KB

2

show your package.json please

3

Hello @aaronksaunders ,
I know I didn’t raise this issue, but it has been plaguing me as well for awhile.
Here is my package.json:

{
  "name": "my-app",
  "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",
    "ionic:serve": "vite dev --host",
    "lint": "eslint"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^5.0.4",
    "@capacitor/android": "5.2.2",
    "@capacitor/app": "^5.0.6",
    "@capacitor/core": "5.2.2",
    "@capacitor/geolocation": "^5.0.6",
    "@capacitor/haptics": "^5.0.6",
    "@capacitor/ios": "5.2.2",
    "@capacitor/keyboard": "^5.0.6",
    "@capacitor/push-notifications": "^5.0.6",
    "@capacitor/status-bar": "^5.0.6",
    "@ionic/react": "^7.2.0",
    "@ionic/react-router": "^7.2.0",
    "@maskito/core": "^1.2.0",
    "@maskito/react": "^1.2.0",
    "@types/react-router": "^5.1.20",
    "@types/react-router-dom": "^5.3.3",
    "aws-amplify": "^5.3.3",
    "capacitor-native-biometric": "^4.2.2",
    "ionicons": "^7.0.0",
    "pdf-lib": "^1.17.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-pdf": "^7.1.2",
    "react-router": "^5.3.4",
    "react-router-dom": "^5.3.4",
    "react-zoom-pan-pinch": "^3.1.0",
    "swiper": "^9.4.1"
  },
  "devDependencies": {
    "@capacitor/cli": "5.2.2",
    "@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.1.1",
    "@vitejs/plugin-react": "^4.0.3",
    "cypress": "^12.7.0",
    "eslint": "^8.35.0",
    "eslint-plugin-react": "^7.32.2",
    "jsdom": "^21.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.4.6",
    "vitest": "^0.33.0"
  },
  "description": "An Ionic project"
}

gradle version is 8.0.2 if that helps as well.
I have been trying to debug further and will continue to do so and will update if I find the solution through my efforts. Any help is appreciated, thank you.

1 Like
4

@khokhardheeraj @aaronksaunders
Shortly after posting the above, I dug into the vite config type and noticed some issues with it as the generated types weren’t correct within defineConfig.
Both the define and test params were removed in newest vite version which is what was causing that error to popup. Removing the following from my vite.config.ts fixed my issue.

  define: {
    global: {},
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
  }

hopefully this helps @khokhardheeraj
I’ll see if I can find an alternative config that reflects similarly, here is the new type if it helps.
vite/packages/vite/src/node/config.ts at 85c38abda0b28cdb45503dc6badee920dc56c182 · vitejs/vite (github.com)

1 Like
5

when i migrate apps, i create a new app using the latest ionic template and then move my files over or just copy all of the configuration files from the new project over to the old and start the process that way. It is the only way to ensure you have the proper versions of npm packages that you know will properly compile an ionic project.

6

I migrated my project by creating a new app then replacing the src folder in the new app. Then I installed the iOS and Android platforms, and my project now works fine.
Thank you everyone for the response.

1 Like