Following a tutorial on vue and laravel, I managed to make a start. Everything was all right, I even implemented my first vue-component, untill I tried to install bootstrap.
Now I get the following errors after
npm run dev
Can anyone point me in the right direction to solve this? I tried many solutions I found online, removing the node_modules folder, clean install, update, etc. I am afraid I messed up without really knowing where to start to figure out the problem.
This is the error:
> dev
> npm run development
> @ development D:\laravel\ijsbreker_memory
> mix
× Mix
Compiled with some errors in 5.26s
ERROR in ./resources/js/components/Cards.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
| <div>
| <h2 > Cards </h2>
webpack compiled with 1 error
npm ERR! Windows_NT 10.0.19043
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "D:\\laravel\\ijsbreker_memory\\node_modules\\npm\\bin\\npm-cli.js" "run" "development"
npm ERR! node v14.16.0
npm ERR! npm v2.15.12
npm ERR! code ELIFECYCLE
npm ERR! @ development: `mix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script 'mix'.
npm ERR! This is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! mix
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! D:laravel\ijsbreker_memory\npm-debug.log
npm ERR! code 1
npm ERR! path D:\laravel\ijsbreker_memory
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c npm run development
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxx\AppData\Local\npm-cache\_logs\2021-08-09T15_42_13_853Z-debug.log
The commands I gave before the trouble started were from a tutorial:
============================================================================= Step 2 : Install Laravel/UI Laravel UI is an official library that comes with predefined UI components. To install Laravel/UI run the command:
composer require laravel/ui
Step 3 : Install Bootstrap 5 in Laravel In this step please follow up with me the commands on the same order and don't skip any of the commands listed bellow .
php artisan ui bootstrap
You may noticed that this command will install Bootstrap 4, the reason you have to run it is that it will set up a lot of things for you so you don't have to do it yourself compared of installing bootstrap 5 directly.
Now we will switch the Bootstrap version to Bootstrap 5 using this commands.
Note that you should run both this commands on the same order so you wont get any issues.
npm install bootstrap@next @popperjs/core --save-dev
npm install bootstrap @popperjs/core --save-dev
next, you only have to:
npm install
npm run dev
If you followed up with me you will have Bootstrap 5 installed on your Laravel project successfully. you can check wish Bootstrap version is installed on your project on package.json file.
====================================================================================
My package.json file:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@popperjs/core": "^2.9.3",
"axios": "^0.21",
"bootstrap": "^5.1.0",
"jquery": "^3.6",
"laravel-mix": "^6.0.27",
"lodash": "^4.17.19",
"popper.js": "^1.16.1",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.0.1",
"vue": "^2.6.12",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"latest": "^0.2.0"
}
}
