Breaking change in 7.0.1?

[ericelliott]

What is the current behavior?

I have a branch on a private project which makes one change:

-   "react-redux": "6.0.1",
+   "react-redux": "7.0.1",

This causes the following error message in the project:

The default export is not a React Component in page: "/"
Error: The default export is not a React Component in page: "/"
    at _callee3$ (/Users/me/vmtm/node_modules/next/dist/server/render.js:221:19)
    at tryCatch (/Users/me/vmtm/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/Users/me/vmtm/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/me/vmtm/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/Users/me/vmtm/node_modules/@babel/runtime/helpers/asyncToGenerator.js:12:30)
    at _next (/Users/me/vmtm/node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:9)

I understand that it's a major version bump, and a breaking change should be expected, but when I looked at the release notes for 7.0.1, I didn't see mention of anything that might break a next app with HOCs.

This project is using Next.js, with the following default code (__app.js):

import App, { Container } from 'next/app';
import React from 'react';
import { Provider } from 'react-redux';
import withRedux from 'next-redux-wrapper';
import initStore from '../redux/store';

class MyApp extends App {
  constructor(props) {
    super(props);
  }

  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps, store } = this.props;

    return (
      <Container>
        <Provider store={store}>
          <Component {...pageProps} />
        </Provider>
      </Container>
    );
  }
}

export default withRedux(initStore)(MyApp);

The page in question is a React component wrapped by a higher-order component that looks like this:

import { compose } from 'lodash/fp';
import withFeatures from './with-features';
import withEnv from './with-env';
import withLoader from './with-loader';
import withLayout from './with-layout';

export default compose(
  withEnv,
  withLoader,
  withLayout({ showFooter: true }),
  withFeatures,
);

That component currently works.

What is the expected behavior?

Not to break this code that works with v6.0.1.

Which versions of React, ReactDOM/React Native, Redux, and React Redux are you using? Which browser and OS are affected by this issue? Did this work in previous versions of React Redux?

  "react": "16.8.6",
  "react-dom": "16.8.6",
  "react-redux": "7.0.1",

Works with react-redux v6.0.1.

[markerikson]

It appears that Next.js is (was?) using a bad check for whether a value is a valid React component type. As of v7, we now return a React.memo() component type, which is an object and not a function, and I already added a mention of that to the release notes.

A quick search turns up these related Next issues:

vercel/next.js#5692
vercel/next.js#4055
vercel/next.js#5857

Sounds as if it may have been fixed already, and upgrading your Next version might resolve the issue.

[ericelliott]

Thanks for the quick response!

[markerikson]

Sure. Does bumping the Next version resolve things for you?

[ericelliott]

Bumping next to canary broke a ton of other things I don't have time to deal with, so I'm afraid I'll have to save this update for later. Thanks for pointing me in the right direction, anyway.