[FIXED] Why export default doesn't work in this simple code?

Issue

Why when I use export default on index.js module it says: export 'appReducers' (imported as 'appReducers') was not found in './reducers/index' (possible exports: default), but when I change it to module.exports the error go away, why is that?

At redux.js

import { appReducers } from './reducers/index'

const Store = () => {
  console.log(appReducers);
}

export default Store

in index.js

const appReducers = "hello world";
export default appReducers

in app.js

import React, { useState, useEffect, useMemo } from 'react';
import Store from './redux'

function App() {
  Store();
  return (
    <div>

    </div>
  );
}

export default App;

Solution

The problem is in redux.js. Instead of

import { appReducers } from './reducers/index'

You need

import appReducers from './reducers/index'

What you were doing before was a named import, not a default import.

Answered By - adsy

Answer Checked By - Mildred Charles (PHPFixing Admin)