[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’).
import React from 'react';
import * as redux from 'redux';
import connect from 'react-redux';

console.log(connect);

const reducer = (state,action) => {
  console.log('state', action);
  return state;
};

const store = redux.createStore(reducer, { counter: 0 });
console.log('getstate', store.getState());
store.dispatch({ type :'jyothi'});

class App extends React.Component {
  render() {
...........

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.

Default image
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.

Leave a Reply