juliomrqz/nuxt-optimized-images

"Cannot find module error" when query params are dynamic

michaelschufi opened this issue · 4 comments

michaelschufi commented

Hi

Thank you for this very helpful Nuxt plugin!

Problem

My goal is to make a simple dynamic component, which resizes an image asset based on given sizes in pixels. However, I'm getting an error when refreshing the page.

Cannot find module './myimage.png?resize&sizes[]=120&sizes[]=100&sizes[]=50&format=webp'

Extract from my Vue component

  data() {
    return {
      asset: 'myimage.png',
      sizesSorted: [120, 100, 50],
      imagesWebp: [],
      imagesJpeg: [],
    }
  },
  created() {
    const sizeParams = this.sizesSorted
      .map((size) => `&sizes[]=${size}`)
      .join('')

    this.imagesWebp = require(`@/assets/${this.asset}?resize${sizeParams}&format=webp`)
    this.imagesJpeg = require(`@/assets/${this.asset}?resize${sizeParams}&format=jpg`)
  },

What's weird is that this

require(`@/assets/${this.asset}?resize&sizes[]=120&sizes[]=100&sizes[]=50&format=webp`)

works just fine.

Do you have an idea why this error occurrs?

Demo

https://codesandbox.io/s/runtime-microservice-vepg2?file=/components/OptimizedImage.vue

P.S.

For questions, please go to https://spectrum.chat/bazzite/open-source.

The chat room is not working anymore.

juliomrqz commented

Hello, @michaelschufi. This issue is related to Webpack, you can't define dynamic query params. It seems to be related to the Webpack ContextModule.

michaelschufi commented

Hmm, that's a pity.

What would be the approach to do a non-hardcoded dynamic picture component? I think this is a similar issue like #225.

michaelschufi commented

I had a look at https://github.com/cyrilwanner/react-optimized-image and its babel plugin approach. I will try this. If you want to, you can close this issue.