CODEWITHSUNDEEP
node.jsreactjsnpmvite
z0l1
z0l1

Reputation: 341

Vite not found in vite.config.ts cannot run vite apps

npm create vite@latest error: Cannot find package 'vite' imported from .../vite.config.ts.timestamp-....mjs

An update while writing my problem: I concluded that the error has to do with the vite.config.ts (vite.config.js)

But I left everything I gathered so far, don't know what might help.

Thank you for opening my problem. I'll walk you through it:

  1. npm create vite@latest vite-react [I select React, Typescript]
  2. cd vite-react
  3. npm install
  4. npm run dev
    > [email protected] dev
    > vite

failed to load config from [my-path]\vite-project\vite-react\vite.config.ts
error when starting dev server:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite' imported from [my-path]\vite-project\vite-react\vite.config.ts.timestamp-1677228345613.mjs
    at new NodeError (node:internal/errors:399:5)
    at packageResolve (node:internal/modules/esm/resolve:889:9)
    at moduleResolve (node:internal/modules/esm/resolve:938:20)
    at defaultResolve (node:internal/modules/esm/resolve:1153:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36)

Versions:

node -v
 v18.14.2

npm -v
 9.5.0

vite -v
 vite/4.1.1 win32-x64 node-v18.14.2

The weird thing is that a simple typescript app works with the above process. so if I select Vanilla, Typescript, and run install and run dev it works just fine...

Vanilla TS package.json

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "^4.9.3",
    "vite": "^4.1.0"
  }
}

React TS package.json

{
  "name": "vite-react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.1.0"
  }
}

I tried creating a svelte app with typescript. (a tsconfig warning and) the same error as with the react app.

I didn't think typescript had anything to do wih it since a [Vanilla, TypeScript] project worked but just to be sure I tried [React, JavaScript] and still the same error.

The problem has something to do with vite-config.ts (or vite-config.js) since the Vanilla project (which I checked has no such file) works fine.

vite.config.ts / vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

This is a work notebook so I cannot just clean install my os. The npm create vite@latest works at every machine at home as it should.

It seems only I have this problem since I could not find anything similar.

Ty for the rather long read. Any help, direction pointing is appreciated.

Upvotes: 8

Views: 21524

Answers (1)

z0l1
z0l1

Reputation: 341

UPDATE, SOLUTION:

npm install --include=dev

well not a solution to the root cause but works.

And the actual root cause was:

npm install did not install the devDependencies in the automatically generated package.json by default...

old news:

Okay, so pretty weird (solution?)

  • vite and @vitejs/plugin-react were in devDependencies by default

  • after uninstalling and reinstalling them to simply be under dependencies it works fine (so far)

I dont know if they were intended to be under devDependencies or not, I have yet to do the comparison on a computer that npm create vite@latest works on by default.

Upvotes: 13

Related Questions