First step itself not working

[ad9999]

Describe the bug

Following documentation, first step says

"npm init @vitejs/app"

where as on console what I see is

npx: installed 3 in 1.27s

@vitejs/create-app is deprecated, use npm init vite instead

internal/modules/cjs/loader.js:1015
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/XXX/.npm/_npx/71605/lib/node_modules/@vitejs/create-app/node_modules/create-vite/index.js
require() of ES modules is not supported.
require() of /Users/XXX/.npm/_npx/71605/lib/node_modules/@vitejs/create-app/node_modules/create-vite/index.js from /Users/XXX/.npm/_npx/71605/lib/node_modules/@vitejs/create-app/index.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 /Users/XXX/.npm/_npx/71605/lib/node_modules/@vitejs/create-app/node_modules/create-vite/index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/XXX/.npm/_npx/71605/lib/node_modules/@vitejs/create-app/node_modules/create-vite/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1015:13)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/XXX/.npm/_npx/71605/lib/node_modules/@vitejs/create-app/index.js:43:1)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14) {
  code: 'ERR_REQUIRE_ESM'
}

and using the command as suggested by console doesnt end up anywhere either,

file:///Users/XXX/.npm/_npx/71800/lib/node_modules/create-vite/dist/index.mjs:48
`),this.close()}_(t,e){return t.toLowerCase()==="y"?(this.value=!0,this.submit()):t.toLowerCase()==="n"?(this.value=!1,this.submit()):this.bell()}render(){this.closed||(this.firstRender?this.out.write(Pe.hide):this.out.write(Or(this.outputText,this.out.columns)),super.render(),this.outputText=[Ce.symbol(this.done,this.aborted),Oe.bold(this.msg),Ce.delimiter(this.done),this.done?this.value?this.yesMsg:this.noMsg:Oe.gray(this.initialValue?this.yesOption:this.noOption)].join(" "),this.out.write(Cr.line+Pe.to(0)+this.outputText))}}var Mr=Pr,Ir={TextPrompt:si,SelectPrompt:ai,TogglePrompt:fi,DatePrompt:tr,NumberPrompt:lr,MultiselectPrompt:ye,AutocompletePrompt:yr,AutocompleteMultiselectPrompt:Er,ConfirmPrompt:Mr};(function(s){const t=s,e=Ir,i=r=>r;function o(r,l,u={}){return new Promise((h,$)=>{const f=new e[r](l),a=u.onAbort||i,b=u.onSubmit||i,p=u.onExit||i;f.on("state",l.onState||i),f.on("submit",S=>h(b(S))),f.on("exit",S=>h(p(S))),f.on("abort",S=>$(a(S)))})}t.text=r=>o("TextPrompt",r),t.password=r=>(r.style="password",t.text(r)),t.invisible=r=>(r.style="invisible",t.text(r)),t.number=r=>o("NumberPrompt",r),t.date=r=>o("DatePrompt",r),t.confirm=r=>o("ConfirmPrompt",r),t.list=r=>{const l=r.separator||",";return o("TextPrompt",r,{onSubmit:u=>u.split(l).map(h=>h.trim())})},t.toggle=r=>o("TogglePrompt",r),t.select=r=>o("SelectPrompt",r),t.multiselect=r=>{r.choices=[].concat(r.choices||[]);const l=u=>u.filter(h=>h.selected).map(h=>h.value);return o("MultiselectPrompt",r,{onAbort:l,onSubmit:l})},t.autocompleteMultiselect=r=>{r.choices=[].concat(r.choices||[]);const l=u=>u.filter(h=>h.selected).map(h=>h.value);return o("AutocompleteMultiselectPrompt",r,{onAbort:l,onSubmit:l})};const n=(r,l)=>Promise.resolve(l.filter(u=>u.title.slice(0,r.length).toLowerCase()===r.toLowerCase()));t.autocomplete=r=>(r.suggest=r.suggest||n,r.choices=[].concat(r.choices||[]),o("AutocompletePrompt",r))})(se);const At=se,_r=["suggest","format","onState","validate","onRender","type"],Me=()=>{};async function L(s=[],{onSubmit:t=Me,onCancel:e=Me}={}){const i={},o=L._override||{};s=[].concat(s);let n,r,l,u,h,$;const f=async(a,b,p=!1)=>{if(!(!p&&a.validate&&a.validate(b)!==!0))return a.format?await a.format(b,i):b};for(r of s)if({name:u,type:h}=r,typeof h=="function"&&(h=await h(n,{...i},r),r.type=h),!!h){for(let a in r){if(_r.includes(a))continue;let b=r[a];r[a]=typeof b=="function"?await b(n,{...i},$):b}if($=r,typeof r.message!="string")throw new Error("prompt message is required");if({name:u,type:h}=r,At[h]===void 0)throw new Error(`prompt type (${h}) is not defined`);if(o[r.name]!==void 0&&(n=await f(r,o[r.name]),n!==void 0)){i[u]=n;continue}try{n=L._injected?Dr(L._injected,r.initial):await At[h](r),i[u]=n=await f(r,n,!0),l=await t(r,n,i)}catch{l=!await e(r,i)}if(l)return i}return i}function Dr(s,t){const e=s.shift();if(e instanceof Error)throw e;return e===void 0?t:e}function Rr(s){L._injected=(L._injected||[]).concat(s)}function Ar(s){L._override=Object.assign({},s)}var kr=Object.assign(L,{prompt:L,prompts:At,inject:Rr,override:Ar});let V=!0;const U=typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{};let Ie=0;if(U.process&&U.process.env&&U.process.stdout){const{FORCE_COLOR:s,NODE_DISABLE_COLORS:t,TERM:e}=U.process.env;t||s==="0"?V=!1:s==="1"?V=!0:e==="dumb"?V=!1:"CI"in U.process.env&&["TRAVIS","CIRCLECI","APPVEYOR","GITLAB_CI","GITHUB_ACTIONS","BUILDKITE","DRONE"].some(i=>i in U.process.env)?V=!0:V=process.stdout.isTTY,V&&(Ie=e&&e.endsWith("-256color")?2:1)}let _e={enabled:V,supportLevel:Ie};function N(s,t,e=1){const i=`\x1B[${s}m`,o=`\x1B[${t}m`,n=new RegExp(`\\x1b\\[${t}m`,"g");return r=>_e.enabled&&_e.supportLevel>=e?i+(""+r).replace(n,i)+o:""+r}const et=N(0,0),at=N(31,39),De=N(32,39),B=N(33,39),K=N(34,39),Nr=N(35,39),jr=N(36,39),Fr=N(91,39),Lr=N(92,39),kt=ys(process.argv.slice(2),{string:["_"]}),Nt=process.cwd(),jt=[{name:"vanilla",display:"Vanilla",color:B,variants:[{name:"vanilla",display:"JavaScript",color:B},{name:"vanilla-ts",display:"TypeScript",color:K}]},{name:"vue",display:"Vue",color:De,variants:[{name:"vue",display:"JavaScript",color:B},{name:"vue-ts",display:"TypeScript",color:K},{name:"custom-create-vue",display:"Customize with create-vue",color:De,customCommand:"npm create vue@latest TARGET_DIR"},{name:"custom-nuxt",display:"Nuxt",color:Lr,customCommand:"npm exec nuxi init TARGET_DIR"}]},{name:"react",display:"React",color:jr,variants:[{name:"react",display:"JavaScript",color:B},{name:"react-ts",display:"TypeScript",color:K}]},{name:"preact",display:"Preact",color:Nr,variants:[{name:"preact",display:"JavaScript",color:B},{name:"preact-ts",display:"TypeScript",color:K}]},{name:"lit",display:"Lit",color:Fr,variants:[{name:"lit",display:"JavaScript",color:B},{name:"lit-ts",display:"TypeScript",color:K}]},{name:"svelte",display:"Svelte",color:at,variants:[{name:"svelte",display:"JavaScript",color:B},{name:"svelte-ts",display:"TypeScript",color:K},{name:"custom-svelte-kit",display:"SvelteKit",color:at,customCommand:"npm create svelte@latest TARGET_DIR"}]}],Re=jt.map(s=>s.variants&&s.variants.map(t=>t.name)||[s.name]).reduce((s,t)=>s.concat(t),[]),Hr={_gitignore:".gitignore"},Ft="vite-project";async function Yr(){const s=Ae(kt._[0]),t=kt.template||kt.t;let e=s||Ft;const i=()=>e==="."?P.basename(P.resolve()):e;let o;try{o=await kr([{type:s?null:"text",name:"projectName",message:et("Project name:"),initial:Ft,onState:d=>{e=Ae(d.value)||Ft}},{type:()=>!T.existsSync(e)||zr(e)?null:"confirm",name:"overwrite",message:()=>(e==="."?"Current directory":`Target directory "${e}"`)+" is not empty. Remove existing files and continue?"},{type:(d,{overwrite:c})=>{if(c===!1)throw new Error(at("\u2716")+" Operation cancelled");return null},name:"overwriteChecker"},{type:()=>Ne(i())?null:"text",name:"packageName",message:et("Package name:"),initial:()=>Vr(i()),validate:d=>Ne(d)||"Invalid package.json name"},{type:t&&Re.includes(t)?null:"select",name:"framework",message:typeof t=="string"&&!Re.includes(t)?et(`"${t}" isn't a valid template. Please choose from below: `):et("Select a framework:"),initial:0,choices:jt.map(d=>{const c=d.color;return{title:c(d.display||d.name),value:d}})},{type:d=>d&&d.variants?"select":null,name:"variant",message:et("Select a variant:"),choices:d=>d.variants.map(c=>{const w=c.color;return{title:w(c.display||c.name),value:c.name}})}],{onCancel:()=>{throw new Error(at("\u2716")+" Operation cancelled")}})}catch(d){console.log(d.message);return}const{framework:n,overwrite:r,packageName:l,variant:u}=o,h=P.join(Nt,e);r?Jr(h):T.existsSync(h)||T.mkdirSync(h,{recursive:!0});const $=u||n||t,f=Gr(process.env.npm_config_user_agent),a=f?f.name:"npm",b=a==="yarn"&&f?.version.startsWith("1."),{customCommand:p}=jt.flatMap(d=>d.variants).find(d=>d.name===$)??{};if(p){const d=p.replace("TARGET_DIR",e).replace(/^npm create/,`${a} create`).replace("@latest",()=>b?"":"@latest").replace(/^npm exec/,()=>a==="pnpm"?"pnpm dlx":a==="yarn"&&!b?"yarn dlx":"npm exec"),[c,...w]=d.split(" "),{status:C}=z.exports.sync(c,w,{stdio:"inherit"});process.exit(C??0)}console.log(`

SyntaxError: Unexpected token '.'
    at Loader.moduleStrategy (internal/modules/esm/translators.js:140:18)```

### Reproduction

Steps mentioned above in bug

### System Info

```shell
npx: installed 1 in 1.307s

  System:
    OS: macOS 12.5.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 6.57 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 12.22.7 - ~/.nvm/versions/node/v12.22.7/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v12.22.7/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Edge: 105.0.1343.50
    Firefox: 103.0.2
    Safari: 15.6.1

Used Package Manager

npm

Logs

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[petermekhaeil]

That link is to the v2 announcement blog post. The latest version of Vite is v3.x.

The "Getting Started" page is actually: https://vitejs.dev/guide/

[bluwy]

Yep you have to use npm create vite@latest and only node.js 14.18 and above os supported: https://vitejs.dev/guide/#scaffolding-your-first-vite-project