192

I am receiving the following error when trying to run my React app:

./src/components/App/App.js
Attempted import error: 'combineReducers'
is not exported from '../../store/reducers/'.

Here's how I'm exporting combineReducers:

import { combineReducers } from 'redux';
import userReducers from './userReducers';
import articleReducers from './articleReducers';

export default combineReducers({
    userReducers,
    articleReducers
});

and here's how I'm importing it in App.js:

import { combineReducers } from '../../store/reducers';

What's incorrect in how I'm exporting combineReducers?

vvvvv
  • 25,404
  • 19
  • 49
  • 81
Andrew
  • 3,839
  • 10
  • 29
  • 42

9 Answers9

408
import { combineReducers } from '../../store/reducers';

should be

import combineReducers from '../../store/reducers';

since it's a default export, and not a named export.

There's a good breakdown of the differences between the two here.

Colin Ricardo
  • 16,488
  • 11
  • 47
  • 80
19

i had the same issue, but I just typed export on top and erased the default one on the bottom. Scroll down and check the comments.

import React, { Component } from "react";

export class Counter extends Component { // type this  
export default Counter; // this is eliminated
karel
  • 5,489
  • 46
  • 45
  • 50
jmisael56yahoocom
  • 191
  • 1
  • 2
14

I guess I am coming late, but this info might be useful to anyone I found out something, which might be simple but important. if you use export on a function directly i.e

export const addPost = (id) =>{
  ...
}

Note while importing you need to wrap it in curly braces i.e. import {addPost} from '../URL';

But when using export default i.e

const addPost = (id) =>{
  ...
}

export default addPost

Then you can import without curly braces i.e. import addPost from '../url';

I hope this helps anyone who got confused as me.

Henry Woody
  • 14,024
  • 7
  • 39
  • 56
Micheal N.D
  • 410
  • 5
  • 8
2

This is another option:

export default function Counter() {

}
Jöcker
  • 5,281
  • 2
  • 38
  • 44
Lloyd Janse van Rensburg
  • 21
  • 1
2

Take into consideration that if you are using a named export you don't need curly brackets:

export const Component

->

 import {ComponentName}

Only the default exported component be imported with curly brackets:

export default

->

import ComponentName
Sterling Diaz
  • 3,789
  • 2
  • 31
  • 35
0

Maybe i'm late too but i had a similar problem with folders inside of component folder. i changed the folder's name with Capital letter. it worked for me.

Carlos Espinoza Garcia
  • 87
  • 1
  • 11
0

If changing the import doesn't help maybe you just need to run yarn install or npm install (or whatever you're using) and restart your server. Worked for me.

Shashii
  • 1
0

Be sure to Capitalize the name of the constant variable you're exporting inside the component. When you Import the component elsewhere you should also check that its first letter is capitalized since this is one of the ways React uses to identify its components.

inside component:

import React from 'react';

export const Component =  (props) => (...)

And then, when importing:

import {Component} from '../location/file'
Edward Anthony Escudero Bowie
  • 11
  • 1
0

Consider checking for any file renamings that git hasn't been instructed to track with git mv

Jackalakalaka
  • 91
  • 1
  • 7
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 27 '22 at 10:07