Issue with building assets after using require statement from assets folder in html

[funkel1989]

Module version 1.11.3

Describe the bug During build an error is received as states below

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):                                                                                                                                        friendly-errors 11:37:52  
SassError: This file is already being loaded.
  ╷
9 │ @import './_light';
  │         ^^^^^^^^^^
  ╵
  src\assets\scss\vuetify\variables\_index.scss 9:9  @import
  src\assets\scss\vuetify\variables\_light.scss 2:9  root stylesheet
                                                                                                                                                                                                          friendly-errors 11:37:52  
 @ ./src/assets/scss/vuetify/variables/_light.scss 4:14-253 15:3-20:5 16:22-261
 @ ./src sync ^\.\/assets.*$
 @ ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ui/landing/team/Team.vue?vue&type=template&id=55289768&
 @ ./src/components/ui/landing/team/Team.vue?vue&type=template&id=55289768&
 @ ./src/components/ui/landing/team/Team.vue
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/index.vue?vue&type=script&lang=js&
 @ ./src/pages/index.vue?vue&type=script&lang=js&
 @ ./src/pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js                                 

This happens for all of my asset files. It can be resolved by removing the customVariables section in my vuetify config (see below). It is caused when i'm using an image in the assets folder in my html like this:

            <v-img :src="require(`~/assets/images/team/image.png`)"></v-img>

if i remove the require statement the issue also goes away. Not sure why this is an issue.

  buildModules: [
    // https://go.nuxtjs.dev/vuetify
    ['@nuxtjs/vuetify', {
      customVariables: ['~/assets/scss/vuetify/variables/_index.scss'],
      optionsPath: '~/configs/vuetify.js',
      treeShake: true,
      defaultAssets: {
        font: false
      }
    }]
  ],

To Reproduce https://github.com/Battle-Line-Productions/battlesite-home << this is the repo i'm having the issue in.

Steps to reproduce the behavior:

1. yarn dev
2. displays errors

Expected behavior Expect my assets to load correctly and be able to require an image

[funkel1989]

no clue why what i did fixed this but i've found a solution. I think it has something to do with the way webpack transpiles dynamic file names from the asset folder. I'll just list a few examples on what works and what doesn't and someone else can figure out the why because i don't know why it works the way it works

working (not in a loop where the image is dynamic):

:src="require(`~/assets/placeholder.png`)"

not working inside dynamic image loop

:src="require(`${item.pathToImage}`)"

not working inside dynamic image loop

:src="require(`~/assets/${item.imageNameWithExtensions}`)"

Working inside loop where image is dynamic

:src="require(`~/assets/${item.imageNameOnly}.png`)"

working inside loop where image is static

src="~/assets/ImageName.png"

[primaulia]

omg, you're a lifesaver @funkel1989! was stuck in this for days last week 🙏

[timothycraig]

@funkel1989 nice find.

@nuxtjs/[email protected], [email protected] -> no issues with dynamic images in templates such as:

<v-img :src="require(`@/assets/${image}`)" />

@nuxtjs/[email protected], [email protected] -> build errors as stated above

[funny2code]

@timothycraig I am trying with vuetify3. But the statement require("@/assets/img/icons/a4.png") doesn't work.