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 https://github.com/nuxt/nuxt/issues/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.

[JPustkuchen]

Thanks for the quick reply @KaelWD!

This only happens with the "object" method:

  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) =>
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        config.plugins.push(
          vuetify({
            styles: {
              configFile: "assets/style/scss/vuetifySettings.scss",
            },
          })
        )
      );
    },

Result:

Using

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) =>
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        config.plugins.push(
          vuetify({
            styles: "sass"
          })
        )
      );
    },
...

in nuxt.config.js works with the correct paths (no special character!) Result:

[KaelWD]

Well yeah styles: "sass" doesn't use virtual modules. Again, unrelated to this issue.

[Ap3rtur3]

The error still exists with "nuxt": "^3.2.0" and "vuetify": "^3.1.4". Has there been any progress on this issue?

[MojoDeMedici]

@KaelWD @BayBreezy I rearranged my solution, note the warning are still present, but now I am fully able to customize vuetify settings, define custom variables, and use the sass variables everywhere without need to import them in each component file.

The warning are related to the way in which the vite-plugin-vuetify encode the url and it conflict with the way in which nuxt does (there is a weird character that get encoded at the beginning of the url, so it becomes unreachable). To fix this, the encoding must be fixed on the vuetify side.

I removed completely the async hook in the modules, and I defined directly an hook in the hooks. I also added the preprocessor options to my vite config and there I define my global sass variables. It's important highlight the fact that hooks and vite config are both necessary, the hook allow for vuetify to be customized, the vite config to use the sass variables everywhere globally.

Another important thing is that we must utilize the keyword forward and not use in the settings file for vuetify otherwise the sass variables are not gonna be accessible.

My config is the following:

(1) settings.scss

@use './vuetify-settings' as vuetify;

@forward 'vuetify/settings' with (
  $heading-font-family: vuetify.$heading-font-family,
  $body-font-family: vuetify.$body-font-family,
  $color-pack: vuetify.$color-pack,
  $font-size-root: vuetify.$font-size-root,
  $font-weights: vuetify.$font-weights,
  $typography: vuetify.$typography,
);

@forward "./custom-settings";

NOTE: I am using a folder (eg vuetify-settings) with a bunch of scss partial files inside, and an _index.scss file where I load all with the @forward keyword. This allow me to just import the files as I am doing in the settings file. Note also that I use the keyword @forward for everything that I want to use outside that specific file (global variables in my case).

(2) nuxt.config.ts

import vuetify from 'vite-plugin-vuetify'

export default defineNuxtConfig({
  ssr: false,
  css: ['vuetify/styles'],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    ssr: {
      noExternal: ['vuetify'],
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use './assets/styles/settings.scss' as *;`,
        },
      },
    },
  },
  hooks: {
    'vite:extendConfig': (config) => {
      config.plugins.push(
        vuetify({
          autoImport: true,
          styles: { configFile: 'assets/styles/settings.scss' },
        })
      )
    },
  }
})

(3) server/plugins/vuetify.fix.ts

/**
 * Special thanks to mhfeizi for this fix - > https://github.com/mhfeizi
 * https://github.com/nuxt/nuxt/issues/15412#issuecomment-1398110500
 */
export default defineNitroPlugin((nitroApp: any) => {
  nitroApp.hooks.hook('render:response', (response: any) => {
    response.body = response.body.replaceAll('/_nuxt/\0', '/_nuxt/')
  })
})

That's it! Everything works smoothly and perfectly, only thing that still need attention is that last point and the warnings.

[daniandl]

export default defineNitroPlugin((nitroApp: any) => {
  nitroApp.hooks.hook('render:response', (response: any) => {
    response.body = response.body.replaceAll('/_nuxt/\0', '/_nuxt/')
  })
})

You can add RenderResponse type from nitropack to avoid using any.

import type { RenderResponse } from 'nitropack'

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:response', (response: RenderResponse) => {
    response.body = response.body.replaceAll('/_nuxt/\0', '/_nuxt/')
  })
})

[QozbroQqn]

For the devs: You probably know this already: the problem with the malformed url come from the '\0' in the stylesPlugin.js. If you remove them, the 404 go away.

But that doesn't fix the sourcemap warnings. To fix (hide) them you could add: sourcemap

// nuxt.config.ts
...

sourcemap: {
  server: false,
  client: false,
},

...

(Your SCSS is also affected)

So my (nuxt 3.2.2) nuxt.config.ts (minimalistic) looks like this:

export default defineNuxtConfig({
  build: {
    transpile: [ 'vuetify' ],
  },
  
  css: [
    'vuetify/styles',
    '~/assets/scss/app.scss',
  ],
  
  hooks: {
    'vite:extendConfig': (config) => {
      config.plugins?.push(vuetify({
        autoImport: true,
        styles    : { configFile: './assets/scss/vuetify.scss' },
      }));
    },
  },
  
  sourcemap: {
    server: false,
    client: false,
  },
  
  vite: {
    css    : {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "./assets/scss/settings.scss";',
        },
      },
    },
  },
});

The difference to @Dinuz config is: I dont put the vuetify.scss in the vite preprocessorOptions because this would nuxt tell to load them in every component. This is only necessary, if you want use sass vars, mixins or functions inside vue.

My vuetify.scss contains just:

@forward 'vuetify/settings' with (
  $color-pack: false,
  $utilities: false,
);

One thing still not clear to me: Customizing vuetify leads to an (in my case 15s) increased vite client warming up. Can somebody evaluate if this is normal?

[hslee2008]

For me, the SASS variable didn't even work before Vuetify v3.1.2 It worked after v3.1.2 The sourcemap warning is gone now for me, using Vuetiy v3.1.5 and vite-plugin-vuetify v1.0.2 Note: using Nuxt v3

// nuxt.config.ts (minimal)

import vuetify from 'vite-plugin-vuetify'

export default defineNuxtConfig({
  // ...

  css: [  
    'vuetify/lib/styles/main.sass',
    '@mdi/font/css/materialdesignicons.min.css'
  ],

   modules: [
    (_, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', config =>
        config.plugins.push(
          vuetify({
            styles: {
              configFile: 'assets/scss/vuetify.scss'
            }
          })
        )
      )
    }
  ],
  
  sourcemap: {
    server: false,
    client: false
  },

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

  // ...
})

$bg: var(--bg);

@use 'vuetify/settings' with (
  /* Other */
  $button-border-radius: 8,

  /* Space */
  $app-bar-padding-end: 5,
  $app-bar-padding-start: 8,
  $divider-margin : 10px,

  /* Theme Color */
  $application-background: $bg,
  $app-bar-background: $bg,
  $card-background: $bg,
  $navigation-drawer-background: $bg,
  $list-background: $bg,
  $expansion-panel-background-color: $bg,
  $overlay-scrim-background: '#3d4754',

  /* Elevation */
  $card-elevation: 0,
  $app-bar-elevation: 0
);

[BayBreezy]

Are there any downsides to disabling the sourcemap from the nuxt.config file? I am not sure how this sourcemap thing works.

[QozbroQqn]

Can't imagine of any. They are just source files. But I can't currently check the docs for any hints.

Edit (To be more concrete about downsides): Having no sourcemaps only affect the browsers devtools or more specific the developer using the sourcemaps (imo). They are usually disabled in production environment anyway. With sourcemaps enabled, the browser tells you where the styling come from. They are nothing more (afaik) than a roadmap. If I want to know where the yellow background of a button is set, I can pick the button with the devtool and the browser tells me the exact position (file and line number) where the styling come from. Without sourcemaps, the browser doesn't know and I have to guess.

Before disabling sourcemaps you should think about how many custom styling you wrote or about to write. If you use an utility CSS Framework like vuetify itself or tailwind, you should write just a minimum of (scoped) scss. The most is covered with utility classes. So there is no real advantag in having sourcemaps. I can see no sense in knowing the file where vuetify/tailwind put the styling for an element. The buildingprocess of the app or the functionalities of nuxt or whatever libraries used there, shouldn't be affected by the sourcemaps. I am 99% sure of it.

Please correct me if I am wrong.

Sourcemaps enabled:

Sourcemaps disabled:

[BayBreezy]

@QozbroQqn Thank you! I will do some more digging myself. But this explanation is good. When i customize the variables and set sourcemap to false, the warnings go away.. The server plugin also removed the errors from the browser console as well.. so it would seem as though everything is working fine

[MojoDeMedici]

@QozbroQqn I think the sourcemap solution it's the key, I looked into it and in theory it doesn't affect the results and removes the warnings. So thank you for pointing that out.

Your solution for what regard not including vuetify into the vite preprocessor works, as long as you don't want to access the vuetify sass variables in components, if you want to do that you must include it as I did.

The increase in warmup time is normal and usual with vuetify, it happens also if you try to customize it in a plane vue application. I think it is also mentioned somewhere in the documentation.

[QozbroQqn]

@Dinuz

I think the sourcemap solution it's the key...

Unsure if I get you right but deactivating the sourcemaps cannot be the solution. Only a workaround. I often use them to find the variables vuetify uses so I can change them without having to look trough their sass. There must be a bug inside the function which creates the base64 path to the sourcefiles. Maybe also the '\0' thing.

Your solution for what regard not including vuetify into the vite preprocessor works, as long as you don't want to access the vuetify sass variables in components, if you want to do that you must include it as I did.

Yep you are right. I didn't read your post thoroughly enough and thought you import the whole main.scss from vuetify. I will edit my post.

The increase in warmup time is normal and usual with vuetify...

Ah ok. Thought it might be due to the excessive warnings and what else happens.

Another thing I encountered yesterday (maybe offtopic)

Not sure if this is caused by the vuetify-loader. Could be problem (or wanted) by vuetify itself. Vuetify imports ALL (component) sass files and three times. Even if I don't use them. Look here:

A quick googling revealed nothing. Maybe this is something new with latest nuxt or vuetify?

[KaelWD]

There's two things going on here, not sure if they're related.

• Sourcemap warnings are supposed to be hidden for modules starting with \0 (https://github.com/nuxt/nuxt/issues/14124)
• Something in nuxt is turning /@id/__x00__plugin-vuetify:styles/main.sass into /_nuxt/plugin-vuetify:styles/main.sass and then loading both

I've tried a bunch of stuff and can't get rid of either of these, I suspect it's a bug in nuxt itself because just vite works fine.

[BayBreezy]

So i discovered this morning that using webpack as your builder in nuxt3 works perfectly fine with the customised variables. I had no loading delay, I didn't have to create a server plugin, I didn't have to disable source maps. The only thing I saw was that it was unable to find the VApp & VMain components, so i got a Vue warn in the VSCode terminal. The app still worked fine and the build was fine too

[BayBreezy]

Here is a link to the hosted site: https://webpack5.behonbaker.com/ Here is the repo: https://github.com/BayBreezy/vuetify3-nuxt3-webpack5

[tabuz]

Here is a link to the hosted site: https://webpack5.behonbaker.com/ Here is the repo: https://github.com/BayBreezy/vuetify3-nuxt3-webpack5

@BayBreezy How would you describe difference in DX once you switched over to webpack from vite? How long does it take you to build the app?

[BayBreezy]

I will run the numbers and let you know soon (for start time)

1. I didn't have to create the server plugin to stop the errors
2. I didn't have to restart the server every time I updated the SAAS file.
3. I didn't have to refresh the browser for each new component that I added to the markup
4. I didn't have to disable sourcemaps in the config file