Router trailing slash not behaving as expected.

[michaelpumo]

Versions

• nuxt: v2.14.7
• node: v14.15.0

Reproduction

Code:
https://codesandbox.io/s/nuxt-glitches-eb37j

Preview:
https://csb-eb37j.netlify.app/

Steps to reproduce

1. Go to the preview link.
2. Click the mountains button (this takes you to a new page via router push).
3. Notice the URL is without a slash at the end (correct).
4. Hard refresh the page and it's forward to a URL with a slash (incorrect).

What is Expected?

There should never be a slash at the end of the URL.

In the nuxt.config.js file we have specified:

router: {
  trailingSlash: false
}

What is actually happening?

A 301 redirect is occurring and placing a slash at the end.

This is not unique to Netlify as it also happens locally when running npm run generate followed by npm run start. Note that this does NOT occur when running npm run dev. It seems to only be in a production build.

The docs state that this should not be the case if setting the value to false and not undefined.
https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#trailingslash

Tested in full static mode using target: 'static'

[timothymarois]

I also see this issue, it happens on production when running the generate for static.

[davydnorris]

same

[pi0]

This should be fixed in v2.14.8. Please reopen if not.

[madsh93]

Hi

I was experiencing the same issue. I updated to 2.14.8 as @pi0 suggests. This fixes the issue, but creates another.
When javascript is allowed everything seems good, no trailing slash is added when refreshed. But when javascript is blocked I get blank screen unless I add trailing slash manually, then everything works as it should again. This leads to error in 10-20% of times when javascript is enabled.

How do I remove trailing slashes from server side?

[danielroe]

@madsh93 If it's a static/generated site, then it is not a Nuxt issue and you should look into your server or web host's settings. (If it's nuxt build && nuxt start, then do let me know more details and I can investigate.)

Note there is a related issue with nuxt generate && nuxt start - see #8684 - but you shouldn't be serving a production static site with nuxt start in any case.

[madsh93]

@danielroe yes, the error indeed is when using nuxt start. I can also replicate this error also on a relatively new project without many dependencies.
However, I can live with Nuxt Start not being reliable, but things get weird when I deploy on Cloudflare Workers. My issue now is that I receive what feels like a hydration error as it only occurs randomly. Only on first time visit or when cache is cleared. On my PC its only about 10% of the time, but on my phone its each time. I will need to investigate further to find the source of the issue.

[madsh93]

@danielroe after further investigation my hydration error was caused by removing components: true from nuxt config. I manually imported with following:

components: {
ImageLoader: () => import('/components/common/ImageLoader'),
ProductList: () => import('/components/ModelsPage/ProductList'),
Alternatives: () => import('~/components/ModelsPage/Alternatives')
},
This caused hydration error, but I don't know why.

I thought it was related, because adding trailing slash fixed it - which is then related to the nuxt start error I believe.

[joaolcorreia]

Hey I updated to 2.15.7 and when generating static in production Nuxt still adds the trailing slash, even with trailingSlash: false!
I didnt use nuxt start, I used a simple python server on dist.

When running in development the trailingSlash: false is respected and behavior consistent with: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#trailingslash

Any ideas?

[pjatx]

@joaolcorreia did you manage to fix this? bumping into the same issue

[aabele]

@pjatx same problem here + in my case this breaks nuxt content hence users get 404 after refresh.

[pjatx]

@aabele I ended up just moving to trailing slashes in the router and sitemap configs to keep the project moving ¯_(ツ)_/¯

[joaolcorreia]

@pjatx I was thinking a url without a trailing slash is a file and with trailing is a directory. I ended up using a trailing slash on everything and solved the problem. I wasn't wrapping my head around this properly I guess.

[pjatx]

@joaolcorreia yeah, it's more of stylistic concern these days with modern frameworks. Browsers will serve whatever index.html file is in the directory unless you specify something else.

[potykion]

@joaolcorreia I figured it out. You should set generate.subFolders to false in your nuxt.config.js and no more redirects in production will be occurred

[rosto94]

Bump. Having the same issue on version 2.15.8. I don't undersand why it was closed with no solution.

[Abdulsametileri]

Any update?

[danielroe]

If you are encountering this issue, please try with nuxt-edge, as we have a PR merged that may well solve this with the release of 2.16. If the issue persists, please open a new issue 🙃

[jrgcb]

this works for me:

generate: {
    subFolders: false
}

[eakoriakin]

As mentioned above by others, adding this to nuxt.config.js (nuxt 2.15.8) worked in my case as well.

generate: {
  subFolders: false
}