Unwanted package name prompt with create-vite

Question

Using create-vite to scaffold a new Vite project produces an unwanted prompt for a package name if you try to vary the target folder path in any way.

So this works fine:

npm create vite test-vite-app2 -- --template react

Scaffolding project in /home/mikey/Development/test-vite-app2...

Done. Now run:

  cd test-vite-app2
  npm install
  npm run dev

No prompt for a package name. When I open test-vite-app2/package.json, the package's "name" entry is set to "test-vite-app2". Perfect. This is just what I wanted 😊.

But if the target folder is a nested sub-folder like this:

npm create vite temp/test-vite-app2 -- --template react

I get prompted to set the package name, with the default being set to a concatenation of the folder structure. Errmm...why 🤔?

Same happens if I try and target a folder at the same level as my current folder:

npm create vite ../test-vite-app2 -- --template react

Now I get a suggested package name that is the target folder but with a dash at the front of it.

Is there any way to stop this unwanted package name prompt from happening? Or at least, have the prompt preset to something sensible?

What would have it do instead? Slash is not valid as a package name. It can't guess what you want. — Tim Roberts
– Tim Roberts, Commented Apr 25, 2023 at 3:25
This might better be asked here (either as a feature request / bug report): github.com/vitejs/vite/issues — AngYC
– AngYC, Commented Apr 25, 2023 at 3:25
@TimRoberts, use the lowest level folder as the package name, so "test-vite-app2" in all cases above. Oh and no prompt! — ChillyPenguin
– ChillyPenguin, Commented Apr 25, 2023 at 3:28
@AngYC when I ask questions like this as a Github repo issue, I'm usually told "this isn't a helpdesk site; why don't you try stackoverflow?" 😉. I will go there if nobody here can answer though. And thanks for your response. — ChillyPenguin
– ChillyPenguin, Commented Apr 25, 2023 at 3:30
The documentation specifies that parameter is the project name, not the folder. The folder creation is a side effect. Names with a slash are invalid, so it has to ask what you meant. If you think it's a bug, file it with the github repo, but they're going to say it is by design. It is, of course, easy to work around. Create it local and mv it into place. — Tim Roberts
– Tim Roberts, Commented Apr 25, 2023 at 3:36

Adrian Mole · Accepted Answer · 2023-10-07 08:46:01Z

5

When you enter the project name, the name must be in lowercase letters. With capital letters, we end up creating an unwanted package.

edited Oct 7, 2023 at 8:46

Adrian Mole

52.1k193 gold badges61 silver badges101 bronze badges

answered Sep 27, 2023 at 3:11

Yasmin Stefanin

411 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

halogen69 · Accepted Answer · 2024-07-26 21:45:24Z

1

I hope you found the answer but if you haven't, this is for you. The soln is to not backspace the default project name i.e. vite-project. Rather just start writing the project name you want. No need of any other commands.

edited Jul 26, 2024 at 21:45

answered Jul 26, 2024 at 21:44

halogen69

112 bronze badges

Comments

dhayarp99 · Accepted Answer · 2023-05-16 04:58:24Z

0

ScreenShot of my Terminal is attached here! When the terminal prompts for "Package name:" while creating react app through vite, just enter whatever is in the placeholder(the placeholder will have the name as that of the Project name that you have entered, but in lower case).

edited May 16, 2023 at 4:58

answered May 16, 2023 at 4:56

dhayarp99

115 bronze badges

2 Comments

ChillyPenguin Over a year ago

I don't want a prompt, as I said in my original post.

dhayarp99 Over a year ago

Sorry, I don't know how to do that. @ChillyPenguin

Chan Guan Yu · Accepted Answer · 2024-10-27 09:34:54Z

Based on the answer by Yasmin, I would like to provide more details for later readers.

Vue.js

For readers starting to use Vue.js, you may use the Quick Start from the official documentation. If you are using uppercase for your Project name, you may see the Package name prompt like this, which is different from what you read from the documentation:

C:\abc>npm create vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... NewProject
× Package name: ... newproject

To avoid the Package name prompt, use lowercase for your Project name.

C:\abc>npm create vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... newproject
× Add TypeScript? ... No / Yes

If you are having space in your Project name, you will also get the Package name prompt as well:

C:\abc>npm create vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... new project
× Package name: ... new-project

However, I have tested a few other options, e.g. dashes, underscores, and periods are allowed.

Dashes

C:\abc>npm create vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... new-project-ui
× Add TypeScript? ... No / Yes

Underscores

C:\abc>npm create vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... new_project_ui
× Add TypeScript? ... No / Yes

Periods

C:\abc>npm create vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... new.project.ui
× Add TypeScript? ... No / Yes

Vite

Nonetheless, OP was asking about create-vite I have tested for it as well:

npm create vite (Uppercase)

C:\abc>npm create vite NewProject -- --template react
× Package name: ... newproject

npm create vite@latest (Uppercase)

C:\abc>npm create vite@latest NewProject -- --template react
× Package name: ... newproject

npm create vite@latest (With Space)

C:\abc>npm create vite@latest "new project" -- --template react 
× Package name: ... new-project

I tested all the options from Vue.js as well.

Dashes

C:\abc>npm create vite@latest new-project-ui -- --template react 

Scaffolding project in C:\abc\new-project-ui...

Done. Now run:

  cd new-project-ui
  npm install
  npm run dev

Underscores

C:\abc>npm create vite@latest new_project_ui -- --template react 

Scaffolding project in C:\abc\new_project_ui...

Done. Now run:

  cd new_project_ui
  npm install
  npm run dev

Periods

C:\abc>npm create vite@latest new.project.ui -- --template react 

Scaffolding project in C:\abc\new.project.ui...

Done. Now run:

  cd new.project.ui
  npm install
  npm run dev

TL;DR

If you don't want the Package name prompt when starting a Vue.js or Vite project, use lowercase with dashes, underscores or periods only.

Collectives™ on Stack Overflow

Unwanted package name prompt with create-vite

4 Answers 4

Comments

Comments

2 Comments

Vue.js

Dashes

Underscores

Periods

Vite

npm create vite (Uppercase)

npm create vite@latest (Uppercase)

npm create vite@latest (With Space)

Dashes

Underscores

Periods

TL;DR

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Vue.js

Dashes

Underscores

Periods

Vite

npm create vite (Uppercase)

npm create vite@latest (Uppercase)

npm create vite@latest (With Space)

Dashes

Underscores

Periods

TL;DR

Comments

Your Answer

Sign up or log in

Post as a guest

Related