Next.js: HMR with certain dynamic routes doesn't work (e.g. `[name]`)

[damianfrizzi]

Bug report

When using the new dynamic routing feature the parameters are correctly recognized and passed to the router but HMR doesn't work properly.

To Reproduce

1. Go to https://github.com/damianfrizzi/nextjs9HMR
2. Install and run yarn dev
3. Make a change to pages/index.tsx -> HMR works
4. Make a change to pages/project/[owner]/[name].tsx -> HMR doesn't work

Expected behavior

A change to [name].tsx should trigger HMR.

System information

• OS: macOS
• Browser (if applies): Chrome
• Version of Next.js: 9.0.0

[huv1k]

Hey @damianfrizzi, thanks for trying the new version of Next.js, I just reproduced this bug. We will fix it as soon as possible.

[joeponzio]

Adding to this issue - HMR is also not working with a component in a directory inside of pages. So I don't know if it's a dynamic route issue or just a directory issue.

pages/login.js <- HMR works everywhere
pages/Login/index.js <- HMR doesn't work anywhere and requires a stop and restart of dev

Components in other directories don't break HMR. For example, a component in components/Logos/MyLogo/index.js doesn't break HMR, so it seems to be isolated to directories inside of pages.

[ijjk]

Note: this is specific to the dynamic route [name] since it is special in webpack if you use another route like [id] HMR should work as expected.

[stevefan1999-personal]

Workaround: use a dollar sign as a marker:

pages/user/[$id]/summary.tsx
pages/company/[$name]/index.tsx

Downside: makes you think of PHP & Perl & JQuery, they are all the worst thing in the developer world

[wilsonpage]

@ijjk I see the issue with params other than [name]:

UPDATE:

Ignore this, it was an issue with my now.json routes.

[Timer]

@wilsonpage FYI you do not need now.json routes when using Next.js' dynamic routing.

[wilsonpage]

@Timer I'm using routes to resolve other requests eg. /favicon.ico and /api/*. But seeing some funny behaviour 404s etc using now dev. Trying to get a config that works, but it's still a little opaque to me.

[wilsonpage]

My now.json looks like this atm:

  "builds": [
    { "src": "api/*.js", "use": "@now/node" },
    {
      "src": "app/next.config.js",
      "use": "@now/next",
      "config": {
        "includeFiles": ["app/articles/**"]
      }
    },
    { "src": "app/static", "use": "@now/static" }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/api/proxy.js?path=$1"
    },
    {
      "src": "/(https?|spotify):.+",
      "methods": ["GET"],
      "dest": "/api/redirector.js"
    },
    {
      "src": "/",
      "methods": ["POST"],
      "dest": "/api/public.js"
    },
    {
      "src": "/(service-worker.js(?:.map)?)",
      "dest": "/app/_next/static/$1",
      "headers": {
        "Cache-Control": "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0"
      }
    },
    {
      "src": "/_next/static/(.+)",
      "dest": "/app/_next/static/$1",
      "headers": {
        "Cache-Control": "public, max-age=31536000"
      }
    },
    {
      "src": "/(manifest.json|robots.txt|sitemap.xml)",
      "dest": "/app/static/$1"
    },
    {
      "src": "/(favicon.ico|apple-touch-icon.png)",
      "dest": "/app/static/icons/$1"
    },
    {
      "src": "/static/(.*)",
      "dest": "/app/static/$1"
    },
    {
      "src": "/_next/(.*)",
      "dest": "/app/_next/$1"
    }
  ],

Not sure why I need the last route, but it 404s otherwise.