React JS: Component Not Exported

Question

I have below folder structure of my project :-

Within GlobalStore.js , I have code ->

import React from 'react'

const GlobalContext=React.createContext();
const GlobalProvider=GlobalContext.Provider;
const GlobalConsumer=GlobalContext.Consumer;


export default {GlobalProvider,GlobalConsumer}

In App.js I have below code -

import logo from './logo.svg';
import './App.css';
import Login from './Components/Login';
import { store } from "./GlobalStorage/store";
import   {GlobalProvider,GlobalConsumer} from "./GlobalStore";
function App() {
  return (
    <div className="App">
      <GlobalProvider value={store}> 
     <Login></Login>
     </GlobalProvider>
    </div>
  );
}

export default App;

Though I have exported GlobalProvider from GlobalStore.js , Application is throwing below error -

Failed to compile.

./src/App.js
Attempted import error: 'GlobalProvider' is not exported from './GlobalStore'.

Answer 1

You are exporting an object with properties GlobalProvider and GlobalConsumer as the default export from GlobalStore.js. Remove the default keyword and it will work as expected with regular named exports.

export { GlobalProvider, GlobalConsumer };