Doodlio
Doodlio

Reputation: 261

Error: Cannot find module 'C:\vite\bin\vite.js' when installing vue.js to Laravel project

I wanted to learn Laravel and Vue.js so I tried installing both by following this tutorial: https://youtu.be/WLQDpY7lOLg?t=1058

Everything worked as it should until the npm run dev command...

These are the commands I ran in the Laravel project terminal(in the tutorial at 21:19)

npm init vite vue
cd vue/
npm install
npm run dev

This is the output that I get after running the last command

PS C:\Laravel&React Projects\laravel-vue-survey\vue> npm run dev

> [email protected] dev
> vite

'React' is not recognized as an internal or external command,
operable program or batch file.
node:internal/modules/cjs/loader:949
  throw err;
  ^

Error: Cannot find module 'C:\vite\bin\vite.js'
    at Module._resolveFilename (node:internal/modules/cjs/loader:946:15)
        at Module._load (node:internal/modules/cjs/loader:787:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

Node.js v18.4.0

I'm trying to solve this issue for some hours now but still no luck... I hope someone knows how to make it work...

Upvotes: 4

Views: 10128

Answers (3)

JACKON SHIUNDU
JACKON SHIUNDU

Reputation: 1

After investigating the issue, I found that the problem was caused by special characters in the folder path. Specifically, the parent folders had special characters like ^, which caused Vite to fail to resolve the correct path for its modules.

Solution: It turns out that certain special characters in folder names or paths can interfere with how Node.js resolves modules, leading to errors like the one mentioned above.

Avoid Using Special Characters in Folder Names: The easiest solution is to rename any parent folders in your project path that contain special characters like ^, &, #, or others. This will prevent path resolution issues with Vite and Node.js.

Upvotes: 0

Doodlio
Doodlio

Reputation: 261

ugh...So i fixed the problem... If any1 else runs in something like that...First make sure you don't name your projects using characters such as (&,%,$,?...). Parent folder of this project had '&' in its name and that caused the error...

Upvotes: 22

Jorge Merino
Jorge Merino

Reputation: 123

I don't understand the question but laravel comes already integrated with Vuejs3. You can fin these files on resources-->js-->pages i.e. Maybe if you can be more precise in the question could help.

Upvotes: 0

Related Questions