John Davidson

Message:

I have upgraded from Laravel 7 to Laravel 8, but during npm run dev, I get the following error.

ERROR in ./resources/assets/sass/charity/charity.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../../../../node_modules/bootstrap-sass/assets/stylesheets/fonts/bootstrap/glyphicons-halflings-regular.eot'
in '/var/www/site/resources/assets/sass/charity'

This is what my package.json looks like:

{

    "private": true,

    "scripts": {

        "dev": "npm run development",

        "development": "mix",

        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

        "watch-poll": "mix watch -- --watch-options-poll=1000",

        "hot": "mix watch --hot",

        "prod": "npm run production",

        "production": "npx mix -p"

    },

    "devDependencies": {

        "axios": "^0.16.2",

        "cross-env": "^5.0.1",

        "jquery": "3.2.1",

        "laravel-mix": "^6.0.6",

        "lodash": "^4.17.4",

        "postcss": "^8.1.14",

        "resolve-url-loader": "^3.1.2",

        "sass": "^1.32.7",

        "sass-loader": "^8.0.2",

        "vue": "^2.1.10"

    },

    "dependencies": {

        "bootstrap-sass": "^3.3.7",

        "bootstrap-sass-datepicker": "^1.0.0",

        "bootstrap-select": "^1.12.4",

        "card": "^2.4.0",

        "cropit": "^0.5.1",

        "eonasdan-bootstrap-datetimepicker": "^4.17.47",

        "jquery-maskmoney": "github:plentz/jquery-maskmoney",

        "moment": "^2.20.1",

        "quill": "^1.3.5",

        "sanitize-html": "^1.17.0",

        "sortablejs": "^1.7.0",

        "spectrum-colorpicker": "^1.8.0"

    }

}

If I run this, it does compile:

cp -R /var/www/site/node_modules/bootstrap-sass/assets/fonts /var/www/site/node_modules/bootstrap-sass/assets/stylesheets/

Can anybody explain why this is happening and if I can prevent this behaviour in any other way?

---

My Answer:
{
"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": {
"@babel/preset-react": "^7.0.0",
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^7.0",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
}