Strange error after new appflow project

Ionic Framework Ionic React
1

hi everyone,
just checking out build new ionic-react through appflow, was so smooth, then

npm install -g @Ionic/cli @capacitor/assets
git clone https://github.com/j-oi/kids.git kids
cd kids && npm install && ionic serve

vite/4.5.0
win32-x64
node-v20.9.0
npm 10.1.0
ionic 7.1.5
ionic serve throw an error:

C:\Users\d0211\kids> ionic serve
vite.cmd --host=localhost --port=8100
[vite] failed to load config from C:\Users\d0211\kids\vite.config.ts
[vite] error when starting dev server:
[vite] Error [ERR_MODULE_NOT_FOUND]: Cannot find package ‘@vitejs/plugin-legacy’ imported from C:\Users\d0211\kids\vite.config.ts.timestamp-1700118576942-b27b152789812.mjs
[vite] at new NodeError (node:internal/errors:406:5)
[vite] at packageResolve (node:internal/modules/esm/resolve:789:9)
[vite] at moduleResolve (node:internal/modules/esm/resolve:838:20)
[vite] at defaultResolve (node:internal/modules/esm/resolve:1043:11)
[vite] at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
[vite] at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
[vite] at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:228:38)
[vite] at ModuleWrap. (node:internal/modules/esm/module_job:85:39)
[vite] at link (node:internal/modules/esm/module_job:84:36)

[ERROR] vite has unexpectedly closed (exit code 1).

    The Ionic CLI will exit. Please check any output above for error details.

tried recreate project locally
tried reinstall node, npm, ionic cli, vite
still not working. Does anyone know how to solve this?

Thank you in advance.

2

Looks like @vitejs/plugin-legacy is not installed.
Can you run the steps one by one instead of cd kids && npm install && ionic serve.
The npm install might have shown some message related to @vitejs/plugin-legacy failing.

I’ve just created a ionic react tabs app from appflow and cloned it and didn’t have any issues. Which template did you pick?

3

I use Tab template. I am connected to Git and ionicframework dashboard so its updating all files and data there.

I tested creating on older windows 10 and could see node_module folder in the project folder.
NO GIT acc, NOT connected to AppFlow.
Below are the steps.

C:\Users\vipserver\Desktop>ionic start mypp

Pick a framework!

Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the
–type option.

? Framework: React

Let’s pick the perfect starter template!

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass this
prompt next time, supply template, the second argument to ionic start.

? Starter template: tabs
√ Preparing directory .\mypp in 1.63ms
√ Downloading and extracting tabs starter in 391.91ms

ionic integrations enable capacitor --quiet – mypp io.ionic.starter
npm.cmd i --save -E @capacitor/core@latest

added 681 packages, and audited 682 packages in 3m

146 packages are looking for funding
run npm fund for details

2 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

npm.cmd i -D -E @capacitor/cli@latest

added 63 packages, and audited 745 packages in 9s

152 packages are looking for funding
run npm fund for details

2 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

npm.cmd i --save -E @capacitor/haptics @capacitor/app @capacitor/keyboard @capacitor/status-bar

added 4 packages, and audited 749 packages in 11s

152 packages are looking for funding
run npm fund for details

2 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

capacitor.cmd init mypp io.ionic.starter --web-dir dist
√ Creating capacitor.config.ts in C:\Users\vipserver\Desktop\mypp in 6.22ms
[success] capacitor.config.ts created!

Next steps:

[OK] Integration capacitor added!

Installing dependencies may take several minutes.

──────────────────────────────────────────────────────────────

Ionic Appflow, the mobile DevOps solution by Ionic

Continuously build, deploy, and ship apps
Focus on building apps while we automate the rest

Learn more: Appflow: The Easiest Way to Build and Deploy Apps | Ionic.io

──────────────────────────────────────────────────────────────

npm.cmd i

up to date, audited 749 packages in 2s

152 packages are looking for funding
run npm fund for details

2 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

git.exe init
Initialized empty Git repository in C:/Users/vipserver/Desktop/mypp/.git/

Join the Ionic Community! 💙

Connect with millions of developers on the Ionic Forum and get access to live events, news updates, and more.

? Create free Ionic account? (y/N)

========================================================================

I tested on original pc (windows 11) cannot find the node_modules folder inside my project folder. Below are the steps.

PS C:\Users\d0211\Desktop> ionic start myapp

Pick a framework!

Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the
–type option.

? Framework: React

Let’s pick the perfect starter template!

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass thisprompt next time, supply template, the second argument to ionic start.

? Starter template: tabs
√ Preparing directory .\myapp in 1.35ms
√ Downloading and extracting tabs starter in 534.22ms

ionic integrations enable capacitor --quiet – myapp io.ionic.starter
npm.cmd i --save -E @capacitor/core@latest

changed 2 packages in 790ms

npm.cmd i -D -E @capacitor/cli@latest

changed 95 packages in 9s

11 packages are looking for funding
run npm fund for details

npm.cmd i --save -E @capacitor/haptics @capacitor/app @capacitor/keyboard @capacitor/status-bar

changed 12 packages in 6s

capacitor.cmd init myapp io.ionic.starter --web-dir dist
√ Creating capacitor.config.json in C:\Users\d0211\Desktop\myapp in 3.80ms
[success] capacitor.config.json created!

Next steps:

[OK] Integration capacitor added!

Installing dependencies may take several minutes.

──────────────────────────────────────────────────────────────

    Ionic Appflow, the mobile DevOps solution by Ionic

       Continuously build, deploy, and ship apps
    Focus on building apps while we automate the rest

    Learn more: https://ion.link/appflow

──────────────────────────────────────────────────────────────

npm.cmd i

added 1 package in 288ms

git.exe init
Initialized empty Git repository in C:/Users/d0211/Desktop/myapp/.git/
git.exe add -A
warning: LF will be replaced by CRLF in .browserslistrc.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .eslintrc.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .vscode/extensions.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in capacitor.config.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in cypress.config.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in cypress/e2e/test.cy.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in cypress/fixtures/example.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in cypress/support/commands.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in cypress/support/e2e.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in ionic.config.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in public/manifest.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/App.test.tsx.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/App.tsx.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/components/ExploreContainer.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/components/ExploreContainer.tsx.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/main.tsx.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/pages/Tab1.tsx.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/pages/Tab2.tsx.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/pages/Tab3.tsx.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/setupTests.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/theme/variables.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/vite-env.d.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.node.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in vite.config.ts.
The file will have its original line endings in your working directory
git.exe commit -m “Initial commit” --no-gpg-sign
[master (root-commit) 4466816] Initial commit
32 files changed, 758 insertions(+)
create mode 100644 .browserslistrc
create mode 100644 .eslintrc.js
create mode 100644 .gitignore
create mode 100644 .vscode/extensions.json
create mode 100644 capacitor.config.json
create mode 100644 cypress.config.ts
create mode 100644 cypress/e2e/test.cy.ts
create mode 100644 cypress/fixtures/example.json
create mode 100644 cypress/support/commands.ts
create mode 100644 cypress/support/e2e.ts
create mode 100644 index.html
create mode 100644 ionic.config.json
create mode 100644 package.json
create mode 100644 public/favicon.png
create mode 100644 public/manifest.json
create mode 100644 src/App.test.tsx
create mode 100644 src/App.tsx
create mode 100644 src/components/ExploreContainer.css
create mode 100644 src/components/ExploreContainer.tsx
create mode 100644 src/main.tsx
create mode 100644 src/pages/Tab1.css
create mode 100644 src/pages/Tab1.tsx
create mode 100644 src/pages/Tab2.css
create mode 100644 src/pages/Tab2.tsx
create mode 100644 src/pages/Tab3.css
create mode 100644 src/pages/Tab3.tsx
create mode 100644 src/setupTests.ts
create mode 100644 src/theme/variables.css
create mode 100644 src/vite-env.d.ts
create mode 100644 tsconfig.json
create mode 100644 tsconfig.node.json
create mode 100644 vite.config.ts

Your Ionic app is ready! Follow these next steps:

4

If there is no node_modules folder, it seems to be some problem with your node installation in your windows 11 machine.

If you go to the project folder and run npm i manually, do you see some errors?
Try deleting the package-lock.json file and running npm i.

5

I uninstalled, and re install again. Same result

PS C:\Users\d0211\Desktop> node --version
v20.9.0
PS C:\Users\d0211\Desktop> npm --version
10.2.4
PS C:\Users\d0211\Desktop> git --version
git version 2.42.0.windows.2
PS C:\Users\d0211\Desktop> npm uninstall -g ionic

up to date in 4s
PS C:\Users\d0211\Desktop> npm install -g @ionic/cli
npm WARN deprecated vm2@3.9.19: The library contains critical security issues and should not be used for production! The maintenance of the project has been discontinued. Consider migrating your code to isolated-vm.

changed 229 packages in 33s

32 packages are looking for funding
run npm fund for details
PS C:\Users\d0211\Desktop> ionic start testapp

Pick a framework!

Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the
–type option.

? Framework: React

Let’s pick the perfect starter template!

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass this
prompt next time, supply template, the second argument to ionic start.

? Starter template: sidemenu
√ Preparing directory .\testapp in 3.17ms
√ Downloading and extracting sidemenu starter in 2.25s

ionic integrations enable capacitor --quiet – testapp io.ionic.starter
npm.cmd i --save -E @capacitor/core@latest

changed 2 packages in 1s

npm.cmd i -D -E @capacitor/cli@latest

changed 95 packages in 5s

11 packages are looking for funding
run npm fund for details

npm.cmd i --save -E @capacitor/haptics @capacitor/app @capacitor/keyboard @capacitor/status-bar

changed 12 packages in 4s

capacitor.cmd init testapp io.ionic.starter --web-dir dist
√ Creating capacitor.config.json in C:\Users\d0211\Desktop\testapp in 6.86ms
[success] capacitor.config.json created!

Next steps:

[OK] Integration capacitor added!

Installing dependencies may take several minutes.

──────────────────────────────────────────────────────────────────────

  Ionic Enterprise, platform and solutions for teams by Ionic

              Powerful library of native APIs
             A supercharged platform for teams

     Learn more: https://ion.link/enterprise

──────────────────────────────────────────────────────────────────────

npm.cmd i

added 1 package in 283ms

git.exe init
Initialized empty Git repository in C:/Users/d0211/Desktop/testapp/.git/
git.exe add -A
warning: in the working copy of ‘.browserslistrc’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘.eslintrc.js’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘.gitignore’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘.vscode/extensions.json’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘capacitor.config.json’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘cypress.config.ts’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘cypress/e2e/test.cy.ts’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘cypress/fixtures/example.json’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘cypress/support/commands.ts’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘cypress/support/e2e.ts’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘index.html’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘ionic.config.json’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘package.json’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘public/manifest.json’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘src/App.test.tsx’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘src/App.tsx’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘src/components/ExploreContainer.css’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘src/components/ExploreContainer.tsx’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘src/components/Menu.css’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘src/components/Menu.tsx’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘src/main.tsx’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘src/pages/Page.tsx’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘src/setupTests.ts’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘src/theme/variables.css’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘src/vite-env.d.ts’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘tsconfig.json’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘tsconfig.node.json’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘vite.config.ts’, LF will be replaced by CRLF the next time Git touches it
git.exe commit -m “Initial commit” --no-gpg-sign
[master (root-commit) 671cc7d] Initial commit
30 files changed, 901 insertions(+)
create mode 100644 .browserslistrc
create mode 100644 .eslintrc.js
create mode 100644 .gitignore
create mode 100644 .vscode/extensions.json
create mode 100644 capacitor.config.json
create mode 100644 cypress.config.ts
create mode 100644 cypress/e2e/test.cy.ts
create mode 100644 cypress/fixtures/example.json
create mode 100644 cypress/support/commands.ts
create mode 100644 cypress/support/e2e.ts
create mode 100644 index.html
create mode 100644 ionic.config.json
create mode 100644 package.json
create mode 100644 public/favicon.png
create mode 100644 public/manifest.json
create mode 100644 src/App.test.tsx
create mode 100644 src/App.tsx
create mode 100644 src/components/ExploreContainer.css
create mode 100644 src/components/ExploreContainer.tsx
create mode 100644 src/components/Menu.css
create mode 100644 src/components/Menu.tsx
create mode 100644 src/main.tsx
create mode 100644 src/pages/Page.css
create mode 100644 src/pages/Page.tsx
create mode 100644 src/setupTests.ts
create mode 100644 src/theme/variables.css
create mode 100644 src/vite-env.d.ts
create mode 100644 tsconfig.json
create mode 100644 tsconfig.node.json
create mode 100644 vite.config.ts

Your Ionic app is ready! Follow these next steps:

6

Still missing package-lock.json and node_modules