Laravel 9 fails to build mix with npm run dev

Hi,

I am trying to minify both CSS and JS on my Laravel project on the fly by using mix.

After following some instructions from YouTube to setup Mix on my Laravel project, I am getting the following error:

ERROR in ./resources/js/app.js 7:13-27
Module not found: Error: Can't resolve 'vue' in '/Users/user/Sites/website/resources/js'

ERROR in ./resources/js/app.js 9:13-38
Module not found: Error: Can't resolve 'laravel-elixir' in '/Users/user/Sites/website/resources/js'

ERROR in ./resources/js/app.js 11:0-37
Module not found: Error: Can't resolve 'laravel-elixir-minify-html' in '/Users/user/Sites/website/resources/js'

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
9 │ @import '~bootstrap/scss/bootstrap';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  resources/sass/app.scss 9:9  root stylesheet
    at processResult (/Users/user/Sites/website/node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/user/Sites/website/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/user/Sites/website/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/user/Sites/website/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/user/Sites/website/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/user/Sites/website/node_modules/sass-loader/dist/index.js:69:5)

ERROR in ./resources/js/components/ExampleComponent.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 class="container">
|         <div class="row justify-content-center">

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 6 errors

This is the 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": {
        "axios": "^0.25",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.54.9",
        "sass-loader": "^12.6.0"
    },
    "dependencies": {
        "vue-loader": "^17.0.0"
    }
}

with node version of v18.6.0 and npm version of 8.19.2, with Laravel v9.30.1 and PHP PHP 8.1.8.

This error occurs after I did the following:

1. npm install
2. Wrote the following code in webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

1. run npm run dev
2. run npm run dev again

The error I showed above was produced after running npm run dev twice.

It looks like that I couldn't find any similar answers for this type of error so I decided to post it here in case someone has any clue on how to fix it.

Any help will be very appreciated!