Can't load a module with custom loader in vue-cli project

Question

I have a project where Webpack 4.43.0 is set up with vue-cli. I'm trying to use image-size-loader to get image size at build time.

For that, in one of my .vue files I'm trying to load the module using the custom loader I have installed in the project:

const background = require("image-size!../../../../assets/images/candy.jpg");

When my project builds, it outputs the following error:

 ERROR  Failed to compile with 1 errors8:47:03 AM

This dependency was not found:

* image-size!../../../../assets/images/candy.jpg in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/vue/guides/tags/hero/TagGroupInvite.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save image-size!../../../../assets/images/candy.jpg

The file is present and js/ts/css files resolve fine. What can be wrong with my setup?

@kmgt It is big, created a repository to share it: github.com/gvlasov/stackoverflow-question-63720095 — gvlasov
– gvlasov, Commented Sep 3, 2020 at 9:17

tom · Accepted Answer · 2020-09-03 09:28:07Z

1

I think you have to specify image-size as a loader too.

Append this loader to webpack.base.conf.js

...
loaders: [
    ...
    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'image-size'
    }
    ...
]
...

answered Sep 3, 2020 at 9:28

tom

11k6 gold badges37 silver badges55 bronze badges

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

1 Comment

gvlasov Over a year ago

I specify the loader in require(), what's wrong with that? And I don't want every image file to be handled by this loader, only this specific image.

Collectives™ on Stack Overflow

Can't load a module with custom loader in vue-cli project

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related