vitejs / create-vite-app Goto Github PK

All the NPM packages required should be installed by the CLI itself rather than manual installation. It should be ready to use as one creates a new app using this CLI.

Describe the bug

Installation Fails with an error below when running npm init vite-app

Reproduction

Possible due to my windows username has space in the name which might be the cause
C:\Users\Reza Seedin\AppData

D:\_STUDY\Vue_2020\014_vite>npm init vite-app vite-test
npm ERR! code ENOLOCAL
npm ERR! Could not install from "Seedin\AppData\Roaming\npm-cache\_npx\11336" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Reza Seedin\AppData\Roaming\npm-cache\_logs\2020-06-08T23_18_05_513Z-debug.log
Install for [ 'create-vite-app@latest' ] failed with code 1

Please provide a link to a repo that can reproduce the problem you ran into.

A reproduction is required unless you are absolutely sure that the the problem is obvious and the information you provided is enough for us to understand what the problem is. If a report has only vague description (e.g. just a generic error message) and has no reproduction, it will be closed immediately.

System Info

• required vite version: latest
• required Operating System: windows 10
• required Node version: node v12.16.1
• Optional:
  • npm/yarn version npm v6.14.5

Logs (Optional if provided reproduction)

1. Run vite or vite build with the --debug flag.
2. Provide the error log here.

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\Reza Seedin\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'install',
1 verbose cli   'create-vite-app@latest',
1 verbose cli   '--global',
1 verbose cli   '--prefix',
1 verbose cli   'C:\\Users\\Reza',
1 verbose cli   'Seedin\\AppData\\Roaming\\npm-cache\\_npx\\11336',
1 verbose cli   '--loglevel',
1 verbose cli   'error',
1 verbose cli   '--json'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose npm-session 312c571a9f0f677a
5 silly install loadCurrentTree
6 silly install readGlobalPackageData
7 silly fetchPackageMetaData error for file:Seedin\AppData\Roaming\npm-cache\_npx\11336 Could not install from "Seedin\AppData\Roaming\npm-cache\_npx\11336" as it does not contain a package.json file.
8 http fetch GET 304 https://registry.npmjs.org/create-vite-app 955ms (from cache)
9 silly pacote tag manifest for create-vite-app@latest fetched in 974ms
10 timing stage:rollbackFailedOptional Completed in 0ms
11 timing stage:runTopLevelLifecycles Completed in 983ms
12 verbose stack Error: ENOENT: no such file or directory, open 'D:\_STUDY\Vue_2020\014_vite\Seedin\AppData\Roaming\npm-cache\_npx\11336\package.json'
13 verbose cwd D:\_STUDY\Vue_2020\014_vite
14 verbose Windows_NT 10.0.19041
15 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Reza Seedin\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install" "create-vite-app@latest" "--global" "--prefix" "C:\\Users\\Reza" "Seedin\\AppData\\Roaming\\npm-cache\\_npx\\11336" "--loglevel" "error" "--json"
16 verbose node v12.16.1
17 verbose npm  v6.14.5
18 error code ENOLOCAL
19 error Could not install from "Seedin\AppData\Roaming\npm-cache\_npx\11336" as it does not contain a package.json file.
20 verbose exit [ 1, true ]

I want to create the project built on Vue3 and TypeScript.

It is 2020 and having responsive websites is really important. So if the starter template had the meta viewport tag that will be really nice.

Add exclude: ["node_modules"] to tsconfig.json for running tsc more efficient.

Vite is really good. However, I want to create my own template and use this template to create many projects. Without this feature I have to do many repeat works. Any solution or plan for this feature?

I have linter error on fresh generated project

[vue/valid-template-root]
The template root requires exactly one element.eslint-plugin-vue

Does vue-3 changed the rule of one root element in template ?

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

Should it be wrapped with div ?

<template>
  <div>
      <h1>{{ msg }}</h1>
      <button @click="count++">count is: {{ count }}</button>
      <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  </div>
</template>

Hi,
I just trying to create new app using vite with the following commands:

npm init vite-app reason-app-vite --template reason-react
$ cd reason-app-vite
$ npm install
$ npm run dev

The project was successfully instantiated, but when I run it localy npm run dev I see a blank screen and the error in the browser:

Failed to load resource: the server responded with a status of 404 (Not Found) Index.bs.js:1

I have the following file structure after I ran all the commands:

My node version is: v14.4.0
NPM: 6.14.5
Chrome: Version 83.0.4103.9

例如我想用个cssModule,sas之类的。我该怎么配置？再单独配置一个sass也太费劲了吧

Hello , I follow the this repo but I dont know whats is the Vite ? Can you explain that ? @yyx990803

I believe the HMR for react is broken with this template.
Whenever I change anything in my source code, the whole page reloads, instead of just updating the parts that need to. I don't know if this is a problem with vite-plugin-react 2.0 or with vite.

Please can you confirm that HMR is indeed broken for react or did it just break with reason ?

Thank you guys so much for your work on vite, it is AWESOME ❤️

What problem does this feature solve?

At the moment, yarn create vite-app my_app, creates a bare scaffolded project with simply supporting Vue.
As you know a real project needs more packages and configurations like unit-testing, babel, router, SCSS loader, etc...

It will be great if it works like vue-cli and does the configuration behind the scene like vue-cli after asking what the user wants:

Thank you in advance for your and your teams great works.

keep up the good work.

Not quite sure if this should be here or in the react-plugin/vite repo but I noticed that HMR does not work anymore since the latest beta releases.

Reproduction

Just create a new vite app with the reason-react template and run it, no other steps needed. Changes in the .re files always trigger a full page refresh. On vite 0.20.10 and plugin 2.x, this would hot replace the modules instead. Since the beta releases this doesnt work anymore.
Only testet on Windows so far.

For example, make the directory structure of react and Vue consistent, index.html All files are in the public directory, so static resources that do not need to be packaged can be put into the public directory.

Reproduce

1. npm init vite-app my-project --template vue-ts
2. cd my-project
3. npm install
4. code .
5. open main.ts

#17

And here is a relative issue about npm init npm/npm#1862

Create-react-app has lint, and unit tests.
I want to add jest and eslint to the react and react-ts template.
Can I create a PR for this?

而且把名字放在前面，创建的也是vue的模板

After building the project the output file names are hashed like index.4555a4.js and style.23432423.css . How can I use my custom name? Did not find any doc on it.
TIA

npm init

❱❱❱ npm init vite-app wuhan-admin4 --template react-ts  

yarn dev

❱❱❱ yarn dev
yarn run v1.22.4
warning package.json: No license field
$ vite
vite v1.0.0-beta.1
[vite] failed to load config from /Users/limichange/limiCode/wuhan-admin4/vite.config.ts:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/limichange/limiCode/wuhan-admin4/node_modules/rollup/dist/es/rollup.browser.js
require() of ES modules is not supported.
require() of /Users/limichange/limiCode/wuhan-admin4/node_modules/rollup/dist/es/rollup.browser.js from /Users/limichange/limiCode/wuhan-admin4/node_modules/vite/dist/config.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename rollup.browser.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/limichange/limiCode/wuhan-admin4/node_modules/rollup/dist/es/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1160:13)
    at Module.load (internal/modules/cjs/loader.js:993:32)
    at Function.Module._load (internal/modules/cjs/loader.js:892:14)
    at Module.require (internal/modules/cjs/loader.js:1033:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.resolveConfig (/Users/limichange/limiCode/wuhan-admin4/node_modules/vite/dist/config.js:57:28)
    at resolveOptions (/Users/limichange/limiCode/wuhan-admin4/node_modules/vite/dist/cli.js:117:39)
    at /Users/limichange/limiCode/wuhan-admin4/node_modules/vite/dist/cli.js:65:27
    at Object.<anonymous> (/Users/limichange/limiCode/wuhan-admin4/node_modules/vite/dist/cli.js:79:3)
    at Module._compile (internal/modules/cjs/loader.js:1144:30) {
  code: 'ERR_REQUIRE_ESM'
}

Is your feature request related to a problem? Please describe.
It's not allowed to create vite-app in existing directory:
"Error: target directory is not empty.
error Command failed."

Describe the solution you'd like
Provide options to merge or overwrite when creating vite-app in existing directory, just like vue-cli does.

I just init my project: npm init vite-app myApp --template vue-ts. Then run npm run build.
But i got this error:

.\src\main.ts
=============
=> .\src\main.ts:2:17
Error :: Cannot find module './App.vue' or its corresponding type declarations. (code 2307)
  1 | import { createApp } from 'vue'
  2 | import App from './App.vue'
    |                 ^^^^^^^^^^^
  3 | import './index.css'
  4 |

It just a new project. How to fix this error?

vite-app <project name>

Is possible just use 1 command line instead 4 command lines ?

it's really hard to remember and understand use npm init to create vite-app !????
Why we have to manually click keyboard cd project folder and lanuch project, and wait, wait ,wait. wast of time.

I apologize for making this an issue when it's more applicable for a google search, but I can't find anything about this.

TL;DR

How do you build with the prod version of React?

When running the vite build command that comes with the react-ts template, React is bundled in development mode, causing a 267kb js file.

Reproduction Steps

• yarn init vite-app ts-react --template react-ts
• cd ts-react
• yarn
• yarn build
• Look at dist/_assets/ and the size of the JS file.

The file has

/** @license React v16.13.0
 * react-dom.development.js
 *
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.

What I've Tried

• Running NODE_ENV=production && tsc && vite build just to try to be sure. I see this, but even with the setting, it bundles development.

At present, the cooperation between vue template and TypeScript is not perfect. The development of @vuedx is currently stalled. We can add a template-vue-jsx-ts first. Let everyone experience the development of vue + ts.

Please add a template for nuxt.js

It looks like Vite will automatically inject Fragment, so I needn't import this manually, but if I didn't import this, ide will highlight this error, say Fragment is not defined., so I can use only syntactic sugar, <> </>. but, if i need to add key or other property, how can I do.

My suggestion is that if there are already has Fragment in the scope, cancel automatic injection.

App.tsx:20 Uncaught SyntaxError: Identifier 'Fragment' has already been declared

Such as the react templates that contain unit tests, integration tests, prettier and eslint maintained by other people.

please add Typescript option during "npm init vite-app" like vue-cli. Thanks a lot