Next v6 page transition error

[seanconnollydev]

After upgrading to next 6.0.0, when running Next in dev mode, page transitions sometimes get stuck rendering the current page rather than rendering the next page.

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When clicking a <Link /> in dev mode, after the page bundle builds, the client should navigate to the linked page.

The behavior is inconsistent and I have not been able to reproduce this issue when the page is already built.

Current Behavior

After the next page bundle builds, the client re-renders the current page.

Steps to Reproduce (for bugs)

1. Run next in dev mode (I am using a custom Express server, so the dev command is node server.js
2. Go to a page in the browser
3. Click a <Link /> to second page
4. Wait a bit for the second page to build
5. The browser location changes to the second page's url, but you're still on the first page

Refreshing the page renders the second page correctly.

Context

This is preventing us from upgrading to Next 6.0.0

Your Environment

Tech	Version
next	6.0.0
node	8.10.0
OS	Mac OSX
browser	Chrome 65.0.3325.181

[kheruc]

I noticed the same issue, but it doesn't happen often for me. I saw this message in the console:
Hard reloading due to no default component in page: /

[timneutkens]

could you provide a repository to reproduce, thanks 🙏

[seanconnollydev]

@timneutkens here you go: https://github.com/goldenshun/next-with-page-transition-issues

Its strange, but in order to reproduce:

• There needs to be the withRoot higher order component
• and both pages need to reference semantic-ui-react components

I'm not sure if the issue is with semantic-ui-react or not, but this was not an issue in Next v5.

[timneutkens]

For whatever reason it's related to withRoot, this works:

export default (Component) => {
  return (props) => <Component {...props} />
}

[seanconnollydev]

@timneutkens changing the contents of withRoot.js to your recommendation does not fix the issue. When retesting, you need to kill your dev server to ensure the page bundle gets rebuilt (this is part of the issue). I updated the repo with your simplified withRoot and if you pull that down, you should still be able to repro.

[seanconnollydev]

So this fixes it for me:

class WithRoot extends React.Component {
    render() {
      return (
        <WrappedComponent {...this.props} />
      );
    }
  }

where this breaks:

const WithRoot = (props) => {
  return <WrappedComponent {...props} />;
}

and this breaks:

const WithRoot = (props) => (
  <WrappedComponent {...props} />;
)

I do not understand why these yield different behavior.

[Asherlc]

Experiencing this issue as well, blocking our upgrade to 6.0

[eli0shin]

+1 for this issue. It is blocking me from upgrading our project to v6

[seanconnollydev]

@eli0shin Try adding "plugins": ["@babel/plugin-proposal-class-properties"] to your .babelrc if you don't already have it. We have gone through a few other changes so I don't know if this was the solution, but we were able to upgrade to 6.0 and have not seen this issue again.

[Everettss]

@goldenshun "plugins": ["@babel/plugin-proposal-class-properties"] is not fixing this issue. Problem is releated with react-hot-loader version 4.1.0 and above. If you downgrade it with:

npm i react-hot-loader@4.0.1 --save-exact

and then remove dir:

node_modules/next/node_modules/react-hot-loader

This code will work:

const WithRoot = (props) => {
    return <WrappedComponent {...props} />;
}

This can be related with gaearon/react-hot-loader#873

[Everettss]

@timneutkens The problem is real. This PR gaearon/react-hot-loader#977 is going to fix this issues.

[timneutkens]

@Everettss we've been having so many issues with react-hot-loader lately that we decided that it makes more sense to go for consistency between client/server rendering by removing react-hot-loader from Next.js. To compare create-react-app also doesn't include react-hot-loader by default.

You'll obviously still be able to use it using a custom .babelrc.

[Everettss]

@timneutkens Unfortunately this problem is not going to be solved by gaearon/react-hot-loader#977. I was fooled by npm link since it creates a symlink for react-hot-loader with node_modules (in my case containing devDependencies). It was working fine for version 4.1.0 and above because there was react in react-hot-loader/node_modules!

You can reproduce this by doing:

cp -r node_modules/react node_modules/next/node_modules/react-hot-loader/node_modules/react

Now all navigation works but in console appears error:

React-hot-loader: fatal error caused by  ƒ Container() {
    (0, _classCallCheck2.default)(this, Container);
    return (0, _possibleConstructorReturn2.default)(this, (Container.__proto__ || (0, _getPrototypeOf.default)(Container)).apply(this…  - no instrumentation found.  Please require react-hot-loader before React. More in troubleshooting.

[ex3ndr]

I have found workaround that works with YARN, just overwrite dependency in package.json:

"depdendencies": {
  ....
   "react-hot-loader": "4.0.1",
   ....
},
"resolutions": {
    "next/**/react-hot-loader": "4.0.1"
},

[Everettss]

@ex3ndr Yes but you will be not able to use new 16.3 react lifecycles (unless you are ready to see an enormous amount of errors in console caused by RHL)

[timneutkens]

FYI react-hot-loader has been removed in next@canary.

[timneutkens]

Also @goldenshun can you try next@canary there are a few patches for issues similar to your initial post.

[ex3ndr]

@timneutkens I have tried canary, but does this mean that i will be unable to auto-refresh page? It is just not working at all at canary.

[timneutkens]

Please provide a reproduction.

[seanconnollydev]

@timneutkens next@canary is working well for me, thanks! 👍

[landerton]

FYI: Was still an issue for me in next v6.1.0 until I removed a bit of service worker logic I had in my config: https://github.com/ooade/NextSimpleStarter/blob/master/next.config.js#L13

[timneutkens]

Going to close this. Should be fixed on stable, but if it still happens try next@canary.