Module parse failed: Unexpected token

Adding bulma-carousel has resulted in the following error on yarn build:

ERROR  Failed to compile with 1 errors                                                                                                                                                  19:52:51

 error  in ./node_modules/bulma-carousel/dist/bulma-carousel.sass

Module parse failed: Unexpected token (1:24)
You may need an appropriate loader to handle this file type.
| $carousel-nav-background: rgba($white, 0.7) !default
| $carousel-nav-color: $text !default
| $carousel-title-background: rgba($white, 0.6) !default

 @ ./resources/assets/scripts/routes/home.js 1:0-43
 @ ./resources/assets/scripts/main.js
 @ multi ./scripts/main.js ./styles/main.scss

I’ve imported the .js without issue into main.js.

// import external dependencies
import 'jquery';
import 'bulma-carousel/dist/bulma-carousel.min.js';

and in main.scss

 * Import npm dependencies
 * Prefix your imports with `~` to grab from node_modules/
 * @see
// @import "~some-node-module";
@import "~bulma-carousel/dist/bulma-carousel.sass";

Has anyone encountered a similar issue with webpack having issues with .sass files? Sage installation is 9.0.1 - installed less than a week ago.

I’ve also tried importing the minified css from the bulma-carousel node_modules file but the same error occurs.

@d-a-v-e this might be a dumb question, but do you have Bulma itself installed and loaded also? I tested bulma-carousel on a copy of Sage I created using the Bulma preset option during theme setup and I’m not able to reproduce your problem.

Hey @mmirus, thanks for your reply. very reasonable question - yes we do have bulma installed - it was installed through the sage theme setup script.

We’re now using owl-carousel instead as we couldn’t get past the unexpected token issue. We installed owl-carousel through yarn and the same prescribed pattern as we’d done with bulma-carousel from the sage Theme Development Book 3rd edition.

This works without issue.

1 Like