When necessary, how to downgrade npm packages in Laravel? - laravel-5

Question

In fresh Laravel 5.8.35
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.11"
}
}
Command
npm install
Command
npm run dev
Everything works fine, asset files generated.
PROBLEM
When downgrade bootstrap version as needed.
npm i bootstrap#3.4.1
Command
npm install
Command
npm run dev
Receive Errors :(
ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
#import '~bootstrap/scss/bootstrap';
^
Can't find stylesheet to import.
╷
8 │ #import '~bootstrap/scss/bootstrap';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
stdin 8:9 root stylesheet
in /Users/zarpio/code/p3backend/resources/sass/app.scss (line 8, column 9)
at /Users/zarpio/code/p3backend/node_modules/webpack/lib/NormalModule.js:316:20
at /Users/zarpio/code/p3backend/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/zarpio/code/p3backend/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/zarpio/code/p3backend/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /Users/zarpio/code/p3backend/node_modules/sass-loader/dist/index.js:89:7
at Function.call$2 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:87203:16)
at _render_closure1.call$2 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:76994:12)
at _RootZone.runBinary$3$3 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:25521:18)
at _RootZone.runBinary$3 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:25525:19)
at _FutureListener.handleError$1 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:23975:19)
at _Future__propagateToListeners_handleError.call$0 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:24271:40)
at Object._Future__propagateToListeners (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:3500:88)
at _Future._completeError$2 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:24099:9)
at _AsyncAwaitCompleter.completeError$2 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:23491:12)
at Object._asyncRethrow (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:3256:17)
at /Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:13326:20
at _wrapJsFunctionForAsync_closure.$protected (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:3279:15)
at _wrapJsFunctionForAsync_closure.call$2 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:23512:12)
at _awaitOnObject_closure0.call$2 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:23504:25)
at _RootZone.runBinary$3$3 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:25521:18)
at _RootZone.runBinary$3 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:25525:19)
at _FutureListener.handleError$1 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:23975:19)
at _Future__propagateToListeners_handleError.call$0 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:24271:40)
at Object._Future__propagateToListeners (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:3500:88)
at _Future._completeError$2 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:24099:9)
at _AsyncAwaitCompleter.completeError$2 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:23491:12)
at Object._asyncRethrow (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:3256:17)
at /Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:15981:20
at _wrapJsFunctionForAsync_closure.$protected (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:3279:15)
at _wrapJsFunctionForAsync_closure.call$2 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:23512:12)
at _awaitOnObject_closure0.call$2 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:23504:25)
at _RootZone.runBinary$3$3 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:25521:18)
at _RootZone.runBinary$3 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:25525:19)
at _FutureListener.handleError$1 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:23975:19)
at _Future__propagateToListeners_handleError.call$0 (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:24271:40)
at Object._Future__propagateToListeners (/Users/zarpio/code/p3backend/node_modules/sass/sass.dart.js:3500:88)
# ./resources/sass/app.scss
ERROR in ./resources/sass/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./resources/sass/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
#import '~bootstrap/scss/bootstrap';
^
Can't find stylesheet to import.
╷
8 │ #import '~bootstrap/scss/bootstrap';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
stdin 8:9 root stylesheet
in /Users/zarpio/code/p3backend/resources/sass/app.scss (line 8, column 9)
# ./resources/sass/app.scss 2:14-253
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/zarpio/.npm/_logs/2020-04-09T11_47_10_138Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/zarpio/.npm/_logs/2020-04-09T11_47_10_177Z-debug.log

Answer 1

Bootstrap 3 and 4 have import paths. To import Bootstrap 3 using Webpack, use the following:
import 'bootstrap/dist/css/bootstrap.css';
This thread has more information.