Nuxt.js: dynamic routes can't handle .js in the url

[remy]

Versions

• nuxt: v2.13.3
• node: v12.14.0

Reproduction

Live example: https://codesandbox.io/s/charming-mclean-qvctm?file=/pages/test/_pkg.vue

Navigate to https://qvctm.sse.codesandbox.io/test/foo.js and Nuxt returns /* script not found */. Anything else renders correctly.

This is a straight copy of the template.nuxtjs.org with a new directory and a dynamic vue file called _pkg.vue which passes the param into the template.

If the path has .js in it, the dynamic route seems to completely fail to pass this to vue.

What is Expected?

The template to render.

What is actually happening?

Something internal to Nuxt is throwing up the /* script not found */

[galvez]

That's due to the automatic routes generator based on pages/ folder.

You can always use extendRoutes:

export default {
  router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'custom',
        path: '/foobar/:id(.*)',
        component: resolve(__dirname, 'src/pages/index.vue')
      })
    }
  }
}

$route.params.id should be available and capturing dots.

[galvez]

That is not to say this can't be fixed. It probably can. I'll take a look.

[galvez]

@pi0 can we tweak it here?

$ git diff
diff --git a/packages/utils/src/route.js b/packages/utils/src/route.js
index cc619c18..4e641c80 100644
--- a/packages/utils/src/route.js
+++ b/packages/utils/src/route.js
@@ -224,7 +224,7 @@ const getRoutePathExtension = (key) => {
   }

   if (key.startsWith('_')) {
-    return `:${key.substr(1)}`
+    return `:${key.substr(1)}(.*?)`
   }

I have no time to put together a PR, but I think that should be it.

[remy]

I did hope there would be work around I could add myself, so for that: thank you.

[remy]

Darn - that work around actually didn't work:

• route handler change: https://codesandbox.io/s/charming-mclean-qvctm?file=/nuxt.config.js:1347-1359
• failing url: https://qvctm.sse.codesandbox.io/test/foo.js

[stale[bot]]

Thanks for your contribution to Nuxt.js!
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.

[galvez]

Hi @remy I think that has got more to do with CodeSandbox since /test/foobar.a works.

They probably have a server rule associated with URLs ending in .js.

@pi0 Closing this issue, but perhaps you'll want to make note of my suggestion above?

[remy]

The problem, even with the fix is present in my codebase. I don't think this has anything to do with codesandbox...

[galvez]

Yep -- it's serve-placeholder. You can disable it via

https://nuxtjs.org/api/configuration-render/#fallback

[Atinux]

@remy we actually use server-placeholder to avoid calling the server-side rendering for static files by default.

You can disable it since you want to also manage these extensions in your nuxt.config.js with:

export default {
  render: {
    fallback: false
  }
}

Code: https://codesandbox.io/s/youthful-jackson-3ii8f?file=/nuxt.config.js:840-874

Demo: https://3ii8f.sse.codesandbox.io/test/foo.js