Laravel mix, cannot `npm run dev` after installing tempusdominus-bs4

Question

I'm having trouble installing tempusdominus-bs4 in my Laravel application. I've followed these steps:

1. Installed Moment JS with npm install moment --save
2. Installed Tempus Dominus with npm install tempusdominus-bs4 --save
3. Modified the app.js file by adding these lines:

window.moment = require('moment');
window.datetimepicker = require('tempusdominus-bootstrap-4');

4. Mofidied the app.scss file by adding the following line: @import '~tempusdominus-bootstrap-4/src/sass/tempusdominus-bootstrap-4-build';

After doing all of that i run npm run dev and the following error appears:

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.
  ╷
2 │ @import "../../node_modules/bootstrap/scss/_functions.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/tempusdominus-bootstrap-4/src/sass/tempusdominus-bootstrap-4-build.scss 2:9  @import
  resources/sass/app.scss 23:9                                                              root stylesheet
    at processResult (/var/www/html/node_modules/webpack/lib/NormalModule.js:676:19)
    at /var/www/html/node_modules/webpack/lib/NormalModule.js:778:5
    at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /var/www/html/node_modules/sass-loader/dist/index.js:54:7
    at Function.call$2 (/var/www/html/node_modules/sass/sass.dart.js:92571:16)
    at _render_closure1.call$2 (/var/www/html/node_modules/sass/sass.dart.js:81074:12)
    at _RootZone.runBinary$3$3 (/var/www/html/node_modules/sass/sass.dart.js:27256:18)
    at _FutureListener.handleError$1 (/var/www/html/node_modules/sass/sass.dart.js:25812:19)

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

I'm using Bootstrap version 4.6, and all the files and folders required are present in the node_package folder. I've also tried to run npm ci but nothing worked.

Do you have any suggestion on how could i fix the error?

Answer 1

I've managed to fix the error just by using the following import inside the app.scss file

@import '~tempusdominus-bootstrap-4/src/sass/tempusdominus-bootstrap-4';

i just needed to remove -build from the string.