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


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


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


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’).


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


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


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.


// 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()


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.


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.

Shivaraju M

Over 3+ years experience in IT industry, good knowledge in . Net-based Web applications, windows applications, web services, and SPAs. I have played multiple roles related to technical delivery in multiple domains while working on over 10+ technologies. I am currently focused on continuous improvement and agile project management.

Post a Comment

Previous Post Next Post