CODEWITHSUNDEEP
javascriptreactjsredux
C Sharper
C Sharper

Reputation: 8626

React JS: Component Not Exported

I have below folder structure of my project :-

enter image description here

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'.

Upvotes: 3

Views: 1668

Answers (1)

Tholle
Tholle

Reputation: 112777

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

Upvotes: 2

Related Questions