Next.js: Index routes won't be executed in client when index.js is located in /index/index.js

[adlk]

Bug report

When you build next.js when the index page is located in /index/index.js instead of /index.js The client side script will not be executed when you access http://localhost/.

The built index page will register with /index (as shown below)

(window.__NEXT_P = window.__NEXT_P || []).push(["/index", function () {
  var e = n("gDgk");
  return {
    page: e.default || e
  }
}])

Moving the index.js to the pages root will restore the wanted behaviour.
It took a while for me to figure out what the actual issue is as it's working just fine in dev mode.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Check out https://github.com/adlk/nextjs-index-issue
2. Run npm install && npm run build && npm start
3. Check in DevTools if you have a log with Home: component did mount

System information

• Version of Next.js: 8.0.0

[nathfreder]

I'm pretty sure https://github.com/zeit/next.js/issues/6292 is a duplicate of this.

[newsroomdev]

I was also having this issue when running the start command with NODE_ENV=production, and I fixed it by moving index.js to the root of pages/

[jakeFeldman]

Bug Report

I believe this should be reopened. The issue still persists while using a custom server.

To reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

git clone [email protected]:jakeFeldman/next-index-bug.git
cd next-index-bug 
yarn install
yarn build
yarn start
# Open at http://localhost:3000

Navigate to the posts page with the link, then try to navigate back to the index page by clicking the home link

System Info

• next: 8.0.4-canary.6 (Should include the fix from PR https://github.com/zeit/next.js/pull/6423)
• node: v11.6.0
• yarn: 1.12.3
• express: 4.16.4
• react & react-dom: 16.8.3

[nathfreder]

Yeah, I'm still having the issue.

[notthatnathan]

I was also having this issue when running the start command with NODE_ENV=production, and I fixed it by moving index.js to the root of pages/

Same, works in dev env, but breaks in production. Affects all pages nested like /pages/index/index.js, /pages/login/index.js, etc.

Using a custom server, though page routes are just passed to handle(req, res).

Oh, and if the index route is initially loaded, it works fine _and_ other routes (like /login) which are nested in folders work fine, too. But if you start with a route that has a top level route, the nested folder routes don't work.

pages
  index
    index.js
  login
    index.js
  about.js

With that folder structure, starting on domain.com or domain.com/login works fine when clicking to another page. But starting on domain.com/about does not.

[notthatnathan]

This doesn't work either, same issue:

pages
  index
    images
    index.css
  login
    login.css
  index.js
  login.js
...

[notthatnathan]

Still broken on latest canary.

[eliotyork]

I'm seeing this too. Can we reopen this?

[timneutkens]

Unlikely it's the same exact issue as you can see here tests were added: https://github.com/zeit/next.js/pull/6516/files

You can file a new issue with a clear and concise reproduction, that's much more productive than commenting "same issue" on a closed issue.

[eliotyork]

Right you are @timneutkens. Turns out it was an issue with importing css on the index.js page using @next/css.

[notthatnathan]

@eliotyork Could you elaborate on that? Were you able to get it working?