React JS：组件未导出

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 };