Invalid CSS asset filenames generated, breaks site operation

[IlyaSemenov]

Versions

• nuxt: 2.14.17
• node: 10.15.3

Reproduction

https://github.com/IlyaSemenov/nuxt-css-invalid-filename-reproduction

Steps to reproduce

Using Node 10.15.3 and yarn 1.22.5:

yarn
yarn nuxt build

(See README in the reproduction repo.)

What is Expected?

Build completes successfully. All generated filenames are valid.

What is actually happening?

Build completes successfully, however one of the filenames is invalid: pages/123456789_123456789_123456789_123456789_/pages/test1/test/pages/test2/pages/test2/index/pages//6c0ffc7c.c67c3ba.css. Note the double slash near the end (pages//6c0ffc7c.c67c3ba.css).

This invalid filename goes to the manifest. When these static assets are deployed onto certain CDNs (such as Amazon S3 compatible storages), they wouldn't load, for example:

schools//8be984b7.6b1ee97.css -> 403 Access Denied
schools/8be984b7.6b1ee97.css -> 200 OK

Moreover, this broken chunk completely breaks <nuxt-link>'s pointing to the affected page! (Not included in the minimal reproduction, although it's not hard to add.)

Additional context

This is a regression introduced with #7463 where the css/images/video URLs were changed to include [name].

Also, the documentation misleadingly lists the old defaults:

css: ({ isDev }) => isDev ? '[name].css' : '[contenthash].css'

which is not true anymore.

[Geminii]

Hi @IlyaSemenov,
I reproduced your problem but it seems due to your file named : 123456789_123456789_123456789_123456789_.vue
The underscore at the end of your file causes this side effect about filenames. Because i think, it will be interpretate as a dynamic page.

If you want to keep the name with _ at the end, you can use :

build: {
   extractCSS:true,
   filenames: {
      css: ({ isDev }) => (isDev ? '[name].css' : '[id].[contenthash].css')
   }
}

Hope this help you :)

[IlyaSemenov]

The underscore at the end of your file cause this side effect about filenames.

Of course this it not true. I updated the reproduction repository to demonstrate that (simply renamed the file to 123456789_123456789_123456789_123456789x.vue, the problem persisted).

And of course it doesn't have anything to do with the file name being 40 symbols length either. I am experiencing the same problem in my real project with 'normal' file names. In the reproduction repo, I was simply creating randomly named files until I managed to reproduce the bug.

Because i think, it will be interpretate as a dynamic page.

No, It won't. A dynamic page starts with an underscore, not ends with it. Besides, what's wrong with dynamic pages? It's not webpack business at all, it's something that is handled on a completely different level (vue-router). From webpack's point of view, "dynamic" pages are no different from non-dynamic.

If you want to keep the name with _ at the end, you can use :

Thank you, I understand how it works. Please consider this a bug report, not a support request.

[stale]

Thanks for your contribution to Nuxt!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[IlyaSemenov]

1. The problem repeats on the latest nuxt-edge@2.15.0-26788356.847d4ae0
2. The steps to reproduce are outlined in the reproduction repository (https://github.com/IlyaSemenov/nuxt-css-invalid-filename-reproduction): yarn && yarn nuxt build

[markkarimov]

I have a similar issue with loading a chunk, it tries to retrieve _nuxt/vendors/pages/campaigns/_id/contributors/pages/campaigns/_id/index/pages/campaigns/_id/transactions//a030a1aa.3261ee4.js (note the double forward slash before the js file), and that breaks the loading of the page.

[stale]

Thanks for your contribution to Nuxt!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[IlyaSemenov]

1. The problem repeats on the latest nuxt-edge@2.15.0-26870440.3b02beb0
2. The steps to reproduce are outlined in the reproduction repository (https://github.com/IlyaSemenov/nuxt-css-invalid-filename-reproduction): yarn && yarn nuxt build

[ghost]

Same here. I cant find a pattern on when this happens

[claudiolcastro]

@danielroe @pi0 Its seems that the issue was resolved just for the css files case. I'm having the same problem here with app and chunk files names.
//475b6968.b5e6a74.js Nux version: 2.15.0

[alexcroox]

I too am having the same issue in SSR with some JS assets having last double slash @pi0 could this be re-opened?

I'm using:

filenames: {
      app: ({ isDev }) => (isDev ? '[name].js' : '[name]-[contenthash].js'),
      chunk: ({ isDev }) => (isDev ? '[name].js' : '[name]-[contenthash].js'),
      css: ({ isDev }) => (isDev ? '[name].css' : '[name]-[contenthash].css'),
      img: ({ isDev }) => (isDev ? '[path][name].[ext]' : 'img/[name]-[contenthash:7].[ext]'),
      font: ({ isDev }) => (isDev ? '[path][name].[ext]' : 'fonts/[name]-[contenthash:7].[ext]'),
      video: ({ isDev }) => (isDev ? '[path][name].[ext]' : 'videos/[name]-[contenthash:7].[ext]')
    },

[pi0]

@alexcroox please use a new bug report issue with reproduction or steps 🙏 (generally adding [name] to prod js assets is not best idea)

[alexcroox]

Apologies, removing [name] has fixed this for me for JS assets