Module build order causes images to turn into base64

[chrisyeung1121]

Issue

I was spending a few hours today to fix why all my images in @aceforth/nuxt-optimized-images would turn into base64 encoded data, and turns out the reason was because I have loaded @nuxtjs/svg library before @aceforthnuxt-optimized-images, I am not sure whether it is a bug or was it intended in the design. But may be it is worth investigating:

Steps to repeat the problem

In nuxt.config.js

  export default {
    buildModules: [
      '@nuxtjs/svg',
      '@aceforth/nuxt-optimized-images',
    ]
  }

In .vue file

  <template>
    <img src="~assets/images/harley.jpeg" />
  </template>

All the images will become base64url, even after I explicitly configured nuxt-optimized-images to not handle SVG file, as below:

optimizedImages: {
  handleImages: ['jpeg', 'jpg', 'png']
}

All the images turned into base64 broken data like below:

<img src="data:image/jpeg;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGl...jX3BhdGhfXyArICJhc3NldHMvaW1hZ2VzL2hhcmxleS0tNzk5OTJkZS5qcGVnIjs=">

Steps to fix the issue

Simply switching the order of build module order in nuxt.config.js to

  export default {
    buildModules: [
      '@aceforth/nuxt-optimized-images',
      '@nuxtjs/svg',
    ]
  }

I suspect somehow the url-loader was loaded by @nuxtjs/svg and get activated automatically in @aceforth/nuxt-optimized-images. And since v0.1.12, @nuxtjs/svg suggested to install the library into buildModules instead of modules, the issue then happened.

Suggestions

I am not an expert in webpack or how it works under the hood, I have copied this thread to both libraries and hopefully can help prevent future developers from getting stuck like I did.

[telmaantunes]

Switching the order of build module did not work for me

[chrisyeung1121]

@telmaantunes do you have more information about where you got it wrong? I just faced the exact same issue again for my other project and switching the order fixed it.