npm run dev error after bootstrap installation

Question

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"
    }
}

Answer 1

Which version of node.js are do you using?, probably you need upgrade your version of node, i'm using nodejs version 16.6.1 https://nodejs.org/en/download/current/ (latest). I had before similar issues with old versions of nodejs.