-
Notifications
You must be signed in to change notification settings - Fork 91
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Sourcemap points to missing source files #290
Comments
Hello @KaelWD , here is the reproduction: https://stackblitz.com/edit/nuxt-starter-ttbwg5?file=nuxt.config.ts |
@BayBreezy using your config, explicitly adding
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 |
@KaelWD Note that i get the following warning if I delete everything and i do a fresh npm install: |
I'm having the same issue, my settings are like @BayBreezy showed. The project works fine, but I can't remove the warnings |
@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 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 :( |
This comment was marked as duplicate.
This comment was marked as duplicate.
I can also confirm this issue when running I already had
in place before, so that's present, but not fixing the issue. I'm using this with nuxt3: This is from my nuxt.config.ts:
Trying
as temporary workaround in tsconfig.json didn't help either. |
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as duplicate.
This comment was marked as duplicate.
@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
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
(3) server/plugins/vuetify.fix.ts
That's it! Everything works smoothly and perfectly, only thing that still need attention is that last point and the warnings. |
You can add import type { RenderResponse } from 'nitropack'
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook('render:response', (response: RenderResponse) => {
response.body = response.body.replaceAll('/_nuxt/\0', '/_nuxt/')
})
}) |
For the devs: But that doesn't fix the sourcemap warnings.
(Your SCSS is also affected) So my (nuxt 3.2.2) nuxt.config.ts (minimalistic) looks like this:
The difference to @Dinuz config is: My vuetify.scss contains just:
One thing still not clear to me: |
For me, the SASS variable didn't even work before Vuetify v3.1.2 // 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
); |
Are there any downsides to disabling the sourcemap from the nuxt.config file? I am not sure how this sourcemap thing works. |
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:
![sourcemap_enabled](https://user-images.githubusercontent.com/125742475/219943978-c0d8568d-189f-4a8b-b611-adc9c07073fd.png)
Sourcemaps disabled:
![sourcemap_disabled](https://user-images.githubusercontent.com/125742475/219943984-6c5c0c18-18e0-4e0c-853c-bc2ca7cc47ab.png)
|
@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 |
@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. |
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.
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.
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? |
Where fixed version https://github.com/userquin/vuetify-nuxt-module/blob/main/package.json#L72 |
Hi @KaelWD As pointed out here by the My question is if those changes could be applied here so we could use the plugin with no further issues in nuxt? |
@ricardoaat just switch to this package. it works perfectly and it instantly gets updates and bugfixes. The only weakness of this package is how it treats sass variables (it's somehow hacky) |
Thank you @mostafaznv, I will give it a try. |
Confirm, |
i try install vuetify-nuxt-module and make me the same error in console with a space in nuxt folder.... ERROR (node:33760) [DEP0170] DeprecationWarning: The URL virtual:nuxt:C:/Users/test/ .nuxt/paths.mjs is invalid. Future versions of Node.js will throw an error. |
Hello Everyone, after taking lots of my hair off i finally went to this conversation and i can confirm that the plugin work perfectly as long as you add the piece of code from @Talla2XLC in your nuxt.config.ts. Thanks everyone |
Is there no better way to use SCSS variables and still have a good style loading with vuetify + nuxt? It really is the biggest paint point for me with vuetify. |
I also have some weird issues with the community module, but I think the best course of action is to contribute to the community module. Especially since John mentioned in VueConf2023 that they are not planning on officially supporting Nuxt at the moment. Either that or parting from Vuetify... I've considered it with all these weird SSR errors |
This statement sounds peculiar to me. I am of the opinion that if the community had to choose between Nuxt or Vuetify, they would opt for Nuxt without a second thought. It's noteworthy that nearly all developers in the community are closely monitoring NuxtUI developments and are contemplating a potential move to that framework (some have already moved to other frameworks like Quasar). Vue is exceptional, but I'm uncertain why the maintainers of its major projects seem to be neglecting themselves. |
I had similar issues as @oemer-aran and I never really understood why the accepted solution was to leverage the whole nuxt-vuetify-module. So, by copy & pasting the stylesPlugin.ts from this repo and making a few minor changes (which is exactly what the community module does) I discovered that you can make it work with nuxt + ssr. Hope it helps! |
@paro-paro thank you so much. it's working! |
Anyone here integrated vuetify with tailwind? In my project, Vuetify is incorporated, and I use vite-plugin-vuetify for treeshaking purposes. I've turned off Vuetify's CSS helpers and implemented Tailwind CSS. Tailwind CSS functions perfectly except when used within a Vuetify component. For instance, a Vuetify component like VCard is styled with Then, trying to apply a Tailwind class such as Given that vite-plugin-vuetify creates separate CSS files for each Vuetify component, like , Specifying 'injectPosition' as 'last' doesn't solve this issue. Upon inspecting the DOM, I noticed that the Tailwind class is indeed applied but is negated by the existing |
@stephenjason89 You have to use a prefix with your tailwind classes. See more about setting it up in your TW config here: https://tailwindcss.com/docs/configuration#prefix |
@BayBreezy thank you for the link, however prefix didn't do the trick for me. To increase the specificity I found that setting I hope it helps anyone having the same issue. |
@stephenjason89 No prob. |
Just bumped into the same issue, although I disabled Vuetify's color packs and utilities, but Tailwinds styles always has lower priority than Vuetify components styles due to style tags' loading order, no matter set But the Selector strategy config did the trick perfectly, thanks @stephenjason89 🎉 One thing to remind is that |
@ricardoaat same problem here , did you find any solution ? i'm currently working with nuxt 3.7 and vuetify 3.3 using vite-plugin-vuetify as well |
The warning is still there. Vuetify 3 / Nuxt 3 |
I have same problem too. Do you have any solution? |
Any update ? |
i overwrote my components creating some class with !important statement , that be more specific than vuetify classes |
no update? |
getting the same error after I upgraded from vite 5.x to 6.0.1 when I run
my vitest.config.ts:/// <reference types="vitest" />
import { defineConfig } from 'vitest/config';
const isCI = Boolean(process.env.CI ?? process.env.JOB_NAME) || true;
export default defineConfig({
test: {
dir: 'src/__tests__',
environment: 'happy-dom',
reporters: ['verbose', ...(isCI ? ['vitest-sonar-reporter', 'junit'] : [])],
outputFile: {
junit: 'test-output/junit.xml',
'vitest-sonar-reporter': 'test-output/sonar-report.xml',
},
coverage: {
enabled: false,
provider: 'istanbul',
reportsDirectory: 'test-output/coverage',
reporter: ['html', 'cobertura', 'clover', 'lcov', 'text'],
exclude: ['**/node_modules/**', '**/__tests__/**', '**/tests-e2e/**', '.eslint*'],
},
exclude: ['**/tests-e2e/**'],
},
}); |
@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:
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?
The text was updated successfully, but these errors were encountered: