Vuetify: [Bug Report] Css Map on server with router:base

[greaka]

Versions and Environment

Vuetify: 1.0.3
Vue: 2.5.13
Browsers: Chrome 64.0.3282.167
OS: Windows 10

Steps to reproduce

Make a project and use the base option of vue-router.

example from nuxt.config.js:

module.exports = {
  router: {
    base: '/gw2-treasury/'
  }
}

Expected Behavior

vuetify should reflect that option

Actual Behavior

vuetify does not look use the base option

Reproduction Link

https://github.com/vuetifyjs/nuxt

[KaelWD]

This is related to our build process, has nothing to do with your router configuration.

More context, from discord:

[dhampik]

@KaelWD @johnleider @Greaka Can you confirm that it's really fixed in vuetify 1.0.5?
I just tried to do the following:
~
vue init vuetifyjs/nuxt vuetify-test
cd vuetify-test
yarn install
yarn run dev
~
I open developer tools in Chrome and refresh the page and I still see source maps 404 errors from nuxt.
vuetify 1.0.5 is used.
PS. https://github.com/vuetifyjs/nuxt/issues/26 duplicates this issue.

[KaelWD]

Which ones are failing? All the vuetify/src/stylus/components/*.css.map links didn't actually exist and were invalid, they are the only ones I removed. If you want to load the main vuetify.js.map then you need to use something like source-map-loader

Also this is literally a non-issue anyway: they were only requested if someone opens devtools, and your production build should be stripping those comments so it would only ever happen in development.

[dhampik]

@KaelWD Well, for me it does not seem that they are removed. After doing the above steps, I still get the following output from nuxt dev server:

Please, click here to expand full nuxt output

OPEN http://localhost:3000

nuxt:render Rendering url / +0ms
nuxt:render Data fetching /: 1ms +0ms
nuxt:render Rendering url / +6s
nuxt:render Data fetching /: 0ms +6s
nuxt:render Rendering url /assets/style/app.css.map +218ms
{ statusCode: 404,
path: '/assets/style/app.css.map',
message: 'This page could not be found' }
nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_app.css.map +24ms
{ statusCode: 404,
path: '/node_modules/vuetify/src/stylus/components/_app.css.map',
message: 'This page could not be found' }
nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_cards.css.map +17ms
{ statusCode: 404,
path: '/node_modules/vuetify/src/stylus/components/_cards.css.map',
message: 'This page could not be found' }
nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_navigation-drawer.css.map +22ms
{ statusCode: 404,
path: '/node_modules/vuetify/src/stylus/components/_navigation-drawer.css.map',
message: 'This page could not be found' }
nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_footer.css.map +19ms
{ statusCode: 404,
path: '/node_modules/vuetify/src/stylus/components/_footer.css.map',
message: 'This page could not be found' }
nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_overlay.css.map +29ms
{ statusCode: 404,
path: '/node_modules/vuetify/src/stylus/components/_overlay.css.map',
message: 'This page could not be found' }
nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_lists.css.map +21ms
{ statusCode: 404,
path: '/node_modules/vuetify/src/stylus/components/_lists.css.map',
message: 'This page could not be found' }
nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_icons.css.map +18ms
{ statusCode: 404,
path: '/node_modules/vuetify/src/stylus/components/_icons.css.map',
message: 'This page could not be found' }
nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_avatars.css.map +35ms
{ statusCode: 404,
path: '/node_modules/vuetify/src/stylus/components/_avatars.css.map',
message: 'This page could not be found' }
nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_buttons.css.map +27ms
{ statusCode: 404,
path: '/node_modules/vuetify/src/stylus/components/_buttons.css.map',
message: 'This page could not be found' }
nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_progress-circular.css.map +25ms
{ statusCode: 404,
path: '/node_modules/vuetify/src/stylus/components/_progress-circular.css.map',
message: 'This page could not be found' }
nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_content.css.map +23ms
{ statusCode: 404,
path: '/node_modules/vuetify/src/stylus/components/_content.css.map',
message: 'This page could not be found' }
nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_grid.css.map +23ms
{ statusCode: 404,
path: '/node_modules/vuetify/src/stylus/components/_grid.css.map',
message: 'This page could not be found' }
nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_toolbar.css.map +25ms
{ statusCode: 404,
path: '/node_modules/vuetify/src/stylus/components/_toolbar.css.map',
message: 'This page could not be found' }

[marianagarciaferreira]

same problem

[KaelWD]

If you are importing vuetify's Stylus instead of precompiled CSS, you'll have to make similar config changes in your own project.

[dhampik]

Could you, please, provide some examples how to configure vuetify with nuxt properly or maybe point to some documentation? I was using "official" vuetifyjs/nuxt and I haven't found proper configuration there.

[DanjBethel]

@KaelWD anything further on the above comment? having the same issue

[movepixels]

I have the same problem. Downloaded the "official" vuetifyjs/nuxt package, installed no errors. Run dev all good. Hit refresh F5, I am bombarded with the continuous flow of:

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_alerts.css.map +1s


{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_alerts.css.map',
  message: 'This page could not be found' }
  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_icons.css.map +490ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_app.css.map +20ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_avatars.css.map +211ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_badges.css.map +5ms


{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_icons.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_app.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_avatars.css.map',
  message: 'This page could not be found' }
  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_bottom-navs.css.map +573ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_bottom-sheets.css.map +4ms

  nuxt:render Rendering url /assets/style/app.css.map +2ms


{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_badges.css.map',
  message: 'This page could not be found' }
  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_dialogs.css.map +60ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_overlay.css.map +68ms


{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_bottom-sheets.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/assets/style/app.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_bottom-navs.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_dialogs.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_overlay.css.map',
  message: 'This page could not be found' }
  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_breadcrumbs.css.map +570ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_buttons.css.map +20ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_progress-circular.css.map +3ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_button-toggle.css.map +2ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_cards.css.map +37ms


{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_button-toggle.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_buttons.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_breadcrumbs.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_progress-circular.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_cards.css.map',
  message: 'This page could not be found' }
  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_carousel.css.map +532ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_jumbotrons.css.map +4ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_input-groups.css.map +26ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_selection-controls.css.map +3ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_progress-linear.css.map +31ms


{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_carousel.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_input-groups.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_selection-controls.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_jumbotrons.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_progress-linear.css.map',
  message: 'This page could not be found' }
  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_chips.css.map +551ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_tables.css.map +3ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_data-table.css.map +5ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_text-fields.css.map +10ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_select.css.map +43ms


{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_data-table.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_chips.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_tables.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_text-fields.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_select.css.map',
  message: 'This page could not be found' }
  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_dividers.css.map +548ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_menus.css.map +3ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_subheaders.css.map +3ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_lists.css.map +7ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_small-dialog.css.map +49ms


{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_lists.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_menus.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_dividers.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_subheaders.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_small-dialog.css.map',
  message: 'This page could not be found' }
  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_date-picker-title.css.map +577ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_date-picker-header.css.map +4ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_date-picker-table.css.map +3ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_date-picker-years.css.map +7ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_pickers.css.map +47ms


{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_date-picker-table.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_date-picker-title.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_date-picker-header.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_date-picker-years.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_pickers.css.map',
  message: 'This page could not be found' }
  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_expansion-panel.css.map +546ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_footer.css.map +4ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_content.css.map +3ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_grid.css.map +9ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_navigation-drawer.css.map +46ms


{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_content.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_expansion-panel.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_footer.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_grid.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_navigation-drawer.css.map',
  message: 'This page could not be found' }
  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_pagination.css.map +553ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_parallax.css.map +4ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_radio-group.css.map +5ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_sliders.css.map +4ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_snackbars.css.map +51ms


{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_sliders.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_radio-group.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_parallax.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_pagination.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_snackbars.css.map',
  message: 'This page could not be found' }
  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_speed-dial.css.map +573ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_steppers.css.map +7ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_switch.css.map +3ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_system-bars.css.map +2ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_tabs.css.map +52ms


{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_system-bars.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_switch.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_speed-dial.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_steppers.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_tabs.css.map',
  message: 'This page could not be found' }
  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_time-picker-title.css.map +547ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_time-picker-clock.css.map +4ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_toolbar.css.map +3ms

  nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_tooltips.css.map +9ms


{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_time-picker-title.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_tooltips.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_time-picker-clock.css.map',
  message: 'This page could not be found' }

{ statusCode: 404,
  path: '/node_modules/vuetify/src/stylus/components/_toolbar.css.map',
  message: 'This page could not be found' }

This does not show anywhere in DevTools but in the node server, so not only is it not supposed to happen, it also takes development longer since every change I have to wait for this to run then have access to the actual site.

Anyone else?

[KaelWD]

What options did you choose when setting up the template?

[movepixels]

A-La-Carte

[KaelWD]

Nuxt only has an option to completely remove CSS sourcemaps as far as I can tell, so that's something to bring up with them if you need sourcemaps for your own CSS

https://nuxtjs.org/api/configuration-build/#csssourcemap

[movepixels]

Even adding that in did not solve the issue.
Might just scrap it all together and do it manually.

[chanlito]

@movepixels Did you manage to find a way to fix this issue? currently I'm setting cssSourceMap to false.

[movepixels]

Even with setting that param to false I still get 100 lines of no map found error. Takes like 30 seconds to rebuild after any save then this foolishness....

I'm about to scrap it all together and do it manually. Use the nuxt template and add in vuetify manually. If it happens again I'm moving to element or something else.

But if I do find a solution I will be sure to post.

Dave

Sent from my iTypeWritter.

On Apr 27, 2018, at 10:13 AM, Chanlito [e-mail] wrote:

@movepixels Did you manage to find a way to fix this issue? currently I'm setting cssSourceMap to false.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[gomezmark]

same problem here

[movepixels]

This ended up working for me in the end:

build: {

cssSourceMap: false, // add this into the nuxt.config

extend (config) {

  config.devtool = false

},

Dave Maharaj

Owner / Designer / Developer

[e-mail] [email protected]

http://www.movepixels.com/ www.movepixels.com
709-757-9457

From: gomezmark [mailto:[email protected]]
Sent: Tuesday, June 5, 2018 8:28 AM
To: vuetifyjs/vuetify [e-mail]
Cc: Dave Maharaj [e-mail]; Mention [e-mail]
Subject: Re: [vuetifyjs/vuetify] [Bug Report] Css Map on server with router:base (#3403)

same problem here

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/vuetifyjs/vuetify/issues/3403#issuecomment-394667533 , or mute the thread https://github.com/notifications/unsubscribe-auth/AB0KcU_r3hqhDHeyqHpiftwlLcBBzOUvks5t5mRNgaJpZM4SUvm8 .

[wahengchang]

@movepixels you are the king !!

[woodgates]

@movepixels

Hi

I was geting this error:
{ statusCode: 404,
path: '/node_modules/vuetify/src/stylus/main.css.map',
message: 'This page could not be found' }

and I fixed it with your solution, thanks!

[bulwarkext]

@movepixels your solutions worked like a charm. Great!!!