Skip to content

[bug] create-tauri-app (via npm create tauri-app@latest) generates incorrect minimal frontend setup when choosing Vanilla + JavaScript, but works correctly with Vanilla + TypeScript #899

@ansorre

Description

@ansorre

Describe the bug

Description:

When using npm create tauri-app@latest to scaffold a new Tauri v2 project (but also with cargo create-tauri-app), selecting the "Vanilla" UI template with the "JavaScript" flavor results in an incorrect and minimal package.json. This package.json lacks Vite as a dependency and the necessary Vite-related scripts (dev, build). The tauri.conf.json generated for the Vanilla + JavaScript setup also reflects this lack of a build process. Instead of configuring a beforeDevCommand (like npm run dev) and a devUrl to point to a Vite dev server, it likely sets frontendDist to directly serve a static index.html and associated JavaScript files from a source directory (e.g., ../src or ../public).
This direct serving approach, without Vite or any bundler in the loop, means that:
ES6 module imports for npm packages (e.g., import { invoke } from '@tauri-apps/api/core';) will not work in the frontend JavaScript, as the browser cannot resolve these bare module specifiers without a build step.
There is no dev server providing Hot Module Replacement (HMR) or other modern development conveniences.
The developer is forced to use window.TAURI (if withGlobalTauri is enabled) for Tauri API interactions, which is not the primary recommended approach for Tauri v2, or they cannot use the JS APIs effectively at all if relying on module imports.
This fundamentally differs from the Vite-powered setup correctly generated for the Vanilla + TypeScript flavor, where module imports work seamlessly and a proper development and build pipeline is established.

On the other side, if "TypeScript" is chosen as the flavor for the "Vanilla" UI template, the scaffolding process works as expected, generating a package.json that correctly includes Vite, TypeScript, and all necessary scripts.

This discrepancy makes it impossible to start a Vanilla JavaScript project with Vite using the standard scaffolding process, leading to significant user frustration and time lost debugging a seemingly broken setup.

Reproduction

Steps to Reproduce:

  1. Ensure a clean environment (e.g., run npm cache clean --force).

  2. Execute npm create tauri-app@latest in the terminal.

  3. Follow the interactive prompts:

    • Project name: (e.g., my-tauri-js-app)
    • Package manager: npm
    • UI template: Vanilla
    • UI flavor: JavaScript
  4. After project creation, inspect the generated my-tauri-js-app/package.json.

Expected Behavior:

The generated package.json for a Vanilla JavaScript project should include:

  • vite in devDependencies.
  • Scripts like "dev": "vite", "build": "vite build".
  • Appropriate Tauri dependencies (@tauri-apps/api, @tauri-apps/cli).

This would allow npm run tauri dev to function correctly by first running npm run dev (which starts Vite) as per the beforeDevCommand in tauri.conf.json.

Actual Behavior (Vanilla + JavaScript):

The generated package.json is minimal and incorrect:

{
  "name": "my-tauri-js-app", // or whatever name was chosen
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "tauri": "tauri"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^2" // Or latest v2 beta/rc
  }
}

This package.json is missing Vite dependencies.

Expected behavior

Successful Behavior (Vanilla + TypeScript - for comparison):

If the "UI flavor" is changed to TypeScript (all other choices remaining the same), the generated package.json is correct and includes Vite:

{
  "name": "my-tauri-ts-app",
  "private": true,
  "version": "0.1.0", // or 0.0.0
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "tauri": "tauri"
  },
  "dependencies": {
    "@tauri-apps/api": "^2" // Or latest v2 beta/rc
    // Potentially other plugins like @tauri-apps/plugin-opener
  },
  "devDependencies": {
    "@tauri-apps/cli": "^2", // Or latest v2 beta/rc
    "vite": "^5.x.x", // Or latest v6.x.x
    "typescript": "~5.x.x"
  }
}

Environment:

  • OS: Windows 11
  • Node.js version: v22.15.0
  • npm version: 10.9.2
  • Rust version: rustc 1.87.0 (17067e9ac 2025-05-09)

Impact:

This bug prevents users from easily starting a Tauri project with Vanilla JavaScript and Vite, which should be a straightforward and supported path. It can lead to considerable confusion and time wasted by users assuming an error in their own setup or understanding.

Suggested Fix:

The scaffolding logic for the Vanilla + JavaScript template needs to be reviewed to ensure it correctly includes and configures Vite, mirroring the successful setup of the Vanilla + TypeScript template.

Thank you for your work on Tauri. We hope this report helps improve the developer experience.

Full tauri info output

???

Stack trace


Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    questionFurther information is requested

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions