My APP.js file cannot get another component.
I am trying to import MainComponent to the app.js component but it cannot fetch the component. Please help me resolve this prooblem.

The error

ERROR in ./src/App.js 10:35-39
export 'Main' (imported as 'Main') was not found in './myComponents/mainComponent' (possible exports: default)

Here is my Main Component.

import React from 'react';
import ContentThree from './d53-content';

 function Main(){
  
    return (
      <div>
          < Header />
          <div className="container">
             <div className='col-12 col-md-4'></div>
             </div>
          </div>
         </Header>
      </div>
    );
}
export default Main;

Here is my app.js file*

import React, { Component } from 'react';
import { Main } from './myComponents/mainComponent';


function App(){
  
    return (
            <div>
              < Main />
            </div>
    ); 
}

export default (App);

CodePudding user response：

import React from 'react';

import ContentThree from './d53-content';

function Main(){

return (
  <div>
      < Header /> --- 1
      <div className="container">
         <div className='col-12 col-md-4'></div>
         </div>
      </div>
     </Header> -- 2
  </div>
);

} export default Main;

1. here above in header component the first tag is self closed.
2. and here this is a closing tag change the first one to just and opening tag like or remove the second closing tag

CodePudding user response：

Please use

import Main from './myComponents/mainComponent';

instead of

import { Main } from './myComponents/mainComponent';

Reason: You are exporting the default component using export default Main which means it's a single component you are exporting. SO you need to export it directly instead of seperating it.

But still, if you want to use like import {Main} '../location_of_file' then you need to export it like

export function Main(props){
// code
} 

And also check your Header tab. You are closing it already and then why you are using to close it.