Next.js: Next with Redux: "You must pass a component to the function returned by connect. Instead received undefined"

[0xsven]

This bug might not be caused by next.js directly but by one of the underlying libraries (probably babel?).

This is a small example project showing the issue: https://github.com/0xsven/next-redux-bug

The project using next.js and redux that results in an error: "You must pass a component to the function returned by connect. Instead received undefined". (Please bear with me it is not just a forgotten export)

The issue has to do with ./components/index.js which acts as a registry for all components. Importing a component that has a container child results in the error.

In the example project ./components/page/index.js has a container as a child. The import looks like that:

import { Header } from '../../components'

... it results in the error.

Importing it directly works fine:

import Header from '../../components/header'

I have no idea why, but would like to keep using the registry. Thank's for taking the time.

[benhjames]

Have a look at this: https://github.com/leebyron/ecmascript-more-export-from

It seems from the table that export Blah from 'blah' isn't ES6: instead try export { Blah } from 'blah' or export * from 'blah'!

[benhjames]

Sure, the import syntax is fine, but I don't believe the export lines here are: https://github.com/0xsven/next-redux-bug/blob/master/components/index.js

[0xsven]

That didn't work...

On Slack @timneutkens mentioned that code splitting won't properly work without using full paths, so I will probably move away from index.js registries

[benhjames]

To clarify, if you want to re-export a default export, you can try:

export { default as NamedExport } from 'blah'

Then you should be able to do import { NamedExport } from 'blah2'

Yes - code splitting is likely to fail that way so moving out from index files is probably best!

[0xsven]

Your syntax still doesn't prevent the error from happening.

[benhjames]

Weird, I cloned the repo and fixed the error by using the above syntax:

export { default as Header } from './header'
export { default as Page } from './page'

Try refreshing the page? :)

[0xsven]

Had to restart the server! Thank you, that solves it. This can be closed!