[Solved] Uncaught TypeError: (0 , _reactRedux2.default) is not a function

Problem

The issue “Uncaught TypeError reactRedux2.default is not a function” and “‘react-redux’ does not contain a default export (imported as ‘connect’)”

OR

Attempted import error: ‘react-redux’ does not contain a default export (imported as ‘connect’).
console. @ index.js:1
overrideMethod @ react_devtools_backend.js:2430
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213

OR

Warning: React.createElement: type is invalid — expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Attempted import error: ‘react-redux’ does not contain a default export (imported as ‘connect’).

Solution

In my case, I have just spent some time debugging and learned a bit about the ES6 import syntax in the process to solve this issue.

import connect from 'react-redux'; will import the default export from the react-redux library. we will learn about named exports and default exports in ES6 modules in the last Tip section. This is the source of the error: Uncaught TypeError: (0, _reactRedux2.default) is not a function Changing it to import { connect } from 'react-redux'; will import the object from within the react-redux library named connect which in the particular case is what you want.

Tip: What Do Square Brackets or Named exports default exports in ES6 Modules Mean?

You have two types of exports:

ES6 Named and Default exports modules:

1. Named exports
2. Default exports, a maximum of one per module

Syntax:

// Module A
export const var1 = 1;
export const var2 = 2; // we can have more than one named exports
export default function foo () {}

Imports:

The type of export (i.e., named or default exports) affects how to import something:
For a named export we have to use curly braces {} and the exact name as the declaration (i.e. variable, function, or class) which was exported.

Syntax:

// Module B, imports from module A which is located in the same directory

import { var1 , var2 } from ‘./A’; // named imports
import ourFunction from ‘./A’; //default export foo()

Recap:

Use a comma-separated list within curly braces with the matching name of the export for named export.
Use a name of your choosing without curly braces for a default export.

Note:

Whenever you want to rename a named import this is possible via aliases. The syntax for this is the following:

import { var1 as myData } from ‘./A’;
Now we have imported var1, but the identifier is myData instead of var1.