Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

wreckless's avatar

Storefront UI compile error: you may need an additional loader

I'm attempting to use the Storefront UI Vue component library in my Laravel 8.x app. I installed the library via npm install --save@storefront-ui/vue. Then, I added import { SfComponentName } from "@storefront-ui/vue"; to my app.js file. When I npm run dev I get the following error:

ERROR in ./node_modules/@storefront-ui/vue/src/components/molecules/SfGallery/SfGallery.vue?vue&type=script&lang=js& (./node_modules/vuetify-loader/lib/loader.js??ref--13-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/@storefront-ui/vue/src/components/molecules/SfGallery/SfGallery.vue?vue&type=script&lang=js&) 210:66
Module parse failed: Unexpected token (210:66)
File was processed with these loaders:
 * ./node_modules/vuetify-loader/lib/loader.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       const { zoom, big, desktop } = this.pictureSelected;
|       const definedPicture = zoom || big || desktop;
>       definedPicture ? (definedPicture.alt = this.pictureSelected?.alt) : null;
|       definedPicture
|         ? (definedPicture.placeholder = this.pictureSelected?.placeholder)
 @ ./node_modules/@storefront-ui/vue/src/components/molecules/SfGallery/SfGallery.vue?vue&type=script&lang=js& 1:0-181 1:197-200 1:202-380 1:202-380
 @ ./node_modules/@storefront-ui/vue/src/components/molecules/SfGallery/SfGallery.vue
 @ ./node_modules/@storefront-ui/vue/index.js
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vuetify-loader/lib/loader.js??ref--13-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/backend/components/marketplace/CatalogComponent.vue?vue&type=script&lang=js&
 @ ./resources/js/backend/components/marketplace/CatalogComponent.vue?vue&type=script&lang=js&
 @ ./resources/js/backend/components/marketplace/CatalogComponent.vue
 @ ./resources/js/backend/app.js
 @ multi ./resources/js/backend/before.js ./resources/js/backend/app.js ./resources/js/backend/after.js

The documentation says something about:

For best extendability and performance we ship Storefront UI as (unpackaged) source code which requires webpack in your project to use the library.

Storefront UI is working out of the box with Nuxt and Vue CLI 2 & 3! In order to use it in custom projects you need the following webpack loaders: css-loader@>1.0.1, scss-loader, sass-loader, vue-loader

How would I know which loaders are needed, and how do I use those loaders. Once I do know which loaders to use, do I configure them by via defining the loaders in webpackConfig in webpack.mix.js? Any tips are greatly appreciated!

0 likes
1 reply
wreckless's avatar
wreckless
OP
Best Answer
Level 1

Upgrading mix and webpack and other packages solved the problem here.

Please or to participate in this conversation.