adding css causes failed build with Vue and Filepond

Question

So, I am trying to follow a number of the file pond example and each of them include some form of CSS import (I get it, there is a lot that comes with beauty). However, no matter what I try, Filepond or Pintura (formerly Doka), I get this error in some form:

Compiled with problems:

ERROR in ./node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css

Module build failed (from ./node_modules/style-loader/dist/cjs.js):
ValidationError: Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
 - options should be an object:
   object { injectType?, attributes?, insert?, base?, esModule?, modules? }
    at validate (/Users/ryanolson/github/realkinkmen/node_modules/style-loader/node_modules/schema-utils/dist/validate.js:105:11)
    at Object.loader (/Users/ryanolson/github/realkinkmen/node_modules/style-loader/dist/index.js:25:29)


ERROR in ./node_modules/filepond/dist/filepond.min.css

Module build failed (from ./node_modules/style-loader/dist/cjs.js):
ValidationError: Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
 - options should be an object:
   object { injectType?, attributes?, insert?, base?, esModule?, modules? }
    at validate (/Users/ryanolson/github/realkinkmen/node_modules/style-loader/node_modules/schema-utils/dist/validate.js:105:11)
    at Object.loader (/Users/ryanolson/github/realkinkmen/node_modules/style-loader/dist/index.js:25:29)

I have NO IDEA how to fix this as I am not experienced enough with what would be going on. I am guessing it has to do with Webpack and build but no idea what I need to do to fix it. Any help?

I also want to mention this is a Laravel/VueJS/Tailwind stack

ArcticMediaRyan · Accepted Answer · 2022-03-31 03:50:28Z

1

The solution is to add the CSS files to the app.css file under /resources/css/app.css

@import 'filepond/dist/filepond.min.css';
@import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";

answered Mar 31, 2022 at 3:50

ArcticMediaRyan

9552 gold badges15 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

waltmagic Over a year ago

Thank you for your answer. I am struggling with pintura. I can't seem to get the javascript to play nice. Keep getting error: Failed to resolve module specifier "pintura". Relative references must start with either "/", "./", or "../". I'm old school and used to building webapps manually so this laravel crap with all it's config files are driving me nuts.

ArcticMediaRyan Over a year ago

@waltmagic Honestly man, I come from the Pascal/C# world, I get it - but once you setup your IDE right, and you learn the shortcuts, you can fly through things... its the nuances that get me, but to help you understand why... app.css is used during webpack/mix build, so all css is pulled from there, by inserting the import into the vue/blade, it doesnt know how to compile it into the finished css file

Collectives™ on Stack Overflow

adding css causes failed build with Vue and Filepond

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related