Question 72850 in Reactjs Question posted in
The new location for the React Documentation can be found here.

React and Redux / export 'default' was not found in 'react-redux', but it was exported – Reactjs

I’m having some troubles at the time to execute my Visual Studio Code project on browser.

Error.

export 'default' (imported as 'Redux') was not found in 'react-redux' (possible exports: Provider, ReactReduxContext, batch, connect, createDispatchHook, createSelectorHook, createStoreHook, shallowEqual, useDispatch, useSelector, useStore)

My code it’s like this.

src/index.js

import ReactDOM from "react-dom/client";
import Redux from "react-redux";
import Store from "./store/index";
import App from "./App";
import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Redux.Provider store={Store}>
    <App />
  </Redux.Provider>
);

src/store/index.js


const initialState = { counter: 0, visible: true };
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case "increment":
      return {
        counter: state.counter + 1,
        visible: state.visible,
      };
    case "decrement":
      return {
        counter: state.counter - 1,
        visible: state.visible,
      };
    case "switchVisibility":
      return {
        counter: state.counter,
        visible: !state.visible,
      };
    default:
      return state;
  }
};

const store = Redux.createStore(counterReducer);

export default store;

src/components/counter.js

import style from "./Counter.module.css";

const Counter = () => {
  const distpach = Redux.useDispatch();
  const counter = Redux.useSelector((state) => state.counter);
  const visibility = Redux.useSelector((state) => state.visibility);

  const incrementHandler = () => {
    distpach({ type: "increment" });
  };

  const decrementHandler = () => {
    distpach({ type: "decrement" });
  };

  const toggleCounterHandler = () => {
    distpach({ type: "switchVisibility" });};

  return (
    <main className={style["counter"]}>
      <h1>Redux Counter</h1>
      {visibility && <div className={style["value"]}>{counter}</div>}
      <div>
        <button onClick={incrementHandler}>Increment</button>
        <button onClick={decrementHandler}>Decrement</button>
      </div>
      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </main>
  );
};

export default Counter;

Image with error

The exports looks right, I don’t know what happen.
I think the way I’m calling the function Redux.createStore in the file src/store/index.js, is obsolete, but it’s the reason of my error?

Somebody know the way to fix this problem?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    How NAZIR HUSSAIN says, I had some issues in how I declared the imports and how I declared the export.

    The next, works for me!

    src/index.js

    import React from "react";
import ReactDOM from "react-dom/client";
import {Provider} from "react-redux";
import {store} from "./store/index";
import App from "./App";
import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

    and my file... src/store/index.js

    import {createStore} from "redux";

const initialState = { counter: 0, visible: true };
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case "increment":
      return {
        counter: state.counter + 1,
        visible: state.visible,
      };
    case "decrement":
      return {
        counter: state.counter - 1,
        visible: state.visible,
      };
    case "switchVisibility":
      return {
        counter: state.counter,
        visible: !state.visible,
      };
    default:
      return state;
  }
};

const store = createStore(counterReducer);

export { store };

    Thank you, a lot!


  2. 0

    dont make it complicated by importing Redux from 'react-redux',
    actually react-redux dont export default anything, so you can not import directly.

    on the other hand react-redux exports Provider, useDispatch, useSelector etc..
    so you should import like this

    import {Provider, useDispatch, useSelector, connect} from 'react-redux'

    and the use these directly

        <Provider store={Store}>
      <App>
   </Provider>

    you can understand it in your example code in this you export default store note that store with small s. and you are using Store with capital S

    here if you remove the default keyword then you need to import store as

    import { store } from './store/index';
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search