Sourcemap points to missing source files

[MojoDeMedici]

@KaelWD I am using Nuxt 3 and integrating vuetify 3.

Everything works smoothly but when I add sass variables customization, I get a WARNING
Sourcemap for "plugin-vuetify:styles/main.sass" points to missing source files and that keeps repeating for each component in the library (eg Sourcemap for "plugin-vuetify:components/VBtnToggle/VBtnToggle.sass" points to missing source files ). I am using the vite-plugin-vuetify to add vuetify using a nuxt.hooks.hook in an async way in modules. (I need to do this because vuetify must be loaded after vue is loaded). Note I use the same configuration with just vue and vite and it works without warning (to be honest in this case i can load vue in the plugins).

So in nuxt.config.ts I do have the following:

modules: [
    async (options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) =>
        config.plugins.push(
          vuetify({
            autoImport: true,
            styles: { configFile: 'assets/styles/config.scss' },
          })
        )
      )
    },
  ],

The file config.scss just overwrite few sass variables. Everything works great, the variables are overwritten, the style gets applied and the components are working properly; I only get this annoying warning in the terminal, and because the warning is for every component, I do have my terminal flooded with them.

How I can prevent the warning to show up?

[MojoDeMedici]

I noticed that the component for which the sourcemap is missing are always the same, independently from which component I am using in the app. The list is the following:

[BayBreezy]

Hello @KaelWD , here is the reproduction: https://stackblitz.com/edit/nuxt-starter-ttbwg5?file=nuxt.config.ts
Nuxt updated to v3.1.1 and updated rollup and vite.. I think that has something to do with this warning that we are now getting. Maybe something needs to be updated in this package as well? I honestly don't know. That a look and let me know what you think please?

[MojoDeMedici]

@BayBreezy using your config, explicitly adding

build: { transpile: ['vuetify'] },

generate a failure and an error, and I cannot proceed. If I remove the instruction, the config keeps working properly but I get the warnings

[MojoDeMedici]

@KaelWD Note that i get the following warning if I delete everything and i do a fresh npm install:

[moni-ch]

I'm having the same issue, my settings are like @BayBreezy showed. The project works fine, but I can't remove the warnings

[MojoDeMedici]

@KaelWD I noticed that happen a very weird thing on localhost where I amtesting.

I get in console (browser) the following error:

Note the structure of the url: GET http://localhost:3000/_nuxt/%EF%BF%BDplugin-vuetify:styles/main.sass

the %EF%BF%BD are typical unicode code for malformed URLs, indeed, if you remove that, the whole main.sass appears smoothly:

http://localhost:3000/_nuxt/plugin-vuetify:styles/main.sass

I think the issue is in the piece of the plugin code where it generate the url when coupled with nuxt.

probably it's worth checking this https://github.com/nuxt/nuxt/issues/15412

[BayBreezy]

@KaelWD I noticed that happen a very weird thing on localhost where I amtesting.

I get in console (browser) the following error:

Note the structure of the url: GET http://localhost:3000/_nuxt/%EF%BF%BDplugin-vuetify:styles/main.sass

the %EF%BF%BD are typical unicode code for malformed URLs, indeed, if you remove that, the whole main.sass appears smoothly:

http://localhost:3000/_nuxt/plugin-vuetify:styles/main.sass

I think the issue is in the piece of the plugin code where it generate the url when coupled with nuxt.

probably it's worth checking this https://github.com/nuxt/nuxt/issues/15412

I noticed this too.. the %EF%BF%BD is causing the issue with Nuxt 3. I am not sure how to go about replacing it in nuxt tho.. I think that maybe if we created a hook, we could replace it before it gets processed? Just like the Nitro hook that I created to replace it before it hits the browser(The response hook - i think).

I might have to ask Daniel which hook we can tap into to get this done.. The documentation around the hooks are not so great at the moment :(

[tux2nicolae]

I'm having a similar issue when configuring custom scss variables

[MojoDeMedici]

@KaelWD this is the reproduction :
https://stackblitz.com/edit/nuxt-starter-ttbwg5?file=nuxt.config.ts

[JPustkuchen]

I can also confirm this issue when running npm run dev.

I already had

  build: {
    transpile: ["vuetify"],
  },

in place before, so that's present, but not fixing the issue.

I'm using this with nuxt3:
https://next.vuetifyjs.com/en/features/treeshaking/#treeshaking

This is from my nuxt.config.ts:

  modules: [
    // Vuetify with automatic tree-shaking:
    // @see https://next.vuetifyjs.com/en/features/internationalization:
    // @see https://next.vuetifyjs.com/en/features/treeshaking/#treeshaking
    async (options, nuxt) => {
      nuxt.hooks.hook("vite:extendConfig", (config) =>
        config.plugins.push(
          vuetify({
            styles: {
              // @see https://www.npmjs.com/package/vite-plugin-vuetify
              // TODO: Issue https://github.com/vuetifyjs/vuetify-loader/issues/290
              configFile: "assets/style/scss/vuetifySettings.scss",
            },
          })
        )
      );
    },
  ]

Trying

  "compilerOptions": {
    // TODO: Vuetify issue if enabled: Sourcemap for "plugin-vuetify:components/VApp/VApp.sass" points to missing source files
    "sourceMap": false
  }

as temporary workaround in tsconfig.json didn't help either.

[JPustkuchen]

Just saw that in the generated sourcecode, there's a special character preventing to load the CSS:

_nuxt/�plugin-vuetify:styles/main.sass

Any ideas what may cause this?

[JPustkuchen]

I guess we can be quite sure the reason is here:
https://github.com/vuetifyjs/vuetify-loader/blob/next/packages/vite-plugin/src/stylesPlugin.ts
in the combination with _nuxt/ prefix, I guess the \0 is simply never removed!?

Could the maintainer perhaps have a short look? I tried to find the deeper reason, but the code isn't that easy to understand without comments and knowing the flow. :)

And I think nuxt/nuxt#15412 can be closed as duplicate, if we're sure this is caused in here!

Thanks a lot in advance!

[KaelWD]

https://vitejs.dev/guide/api-plugin.html#virtual-modules-convention
I guess nuxt is handling those wrong? With just vite the url is /@id/__x00__plugin-vuetify:styles/main.sass
And also probably not related to this.