خطأ عند إستخدام webpack في مكون React؟

الخطأ لديك في تصدير المكون 
هناك طريقتين 

1. default export

   //export default تقوم باستخدام 
   export class Navbar extends React.Component { // خطأ
       render(){
         return (
           <ul className="navbar navbar-full">
           ...
           </ul>
         );
       }
   }
   
   export default class Navbar extends React.Component {} // صح
   
   // عندها تقوم بإستدعاء المكون السابق كالتالي
   
   
   import Navbar from './components/navbar.jsx';
   
   export class App extends React.Component{
     render(){
       return(
           <Navbar />
           ...
       );
     }
         }

    

2. named export 
    

   // {} تقوم باستخدام 
   class Navbar extends React.Component 
       render(){
         return (
           <ul className="navbar navbar-full">
           ...
           </ul>
         );
       }
   }
   
   export { Navbar };  // هكذا
   
   // عندها تقوم بإستدعاء المكون السابق كالتالي
   
   
   import { Navbar } from './components/navbar.jsx';
   
   export class App extends React.Component{
     render(){
       return(
           <Navbar />
           ...
       );
     }
   }

    

هناك خطأ بسيط وهو حول ال export و ال import حيث نحتاج عند عمل import بالطريقة التي قمت بها أن يكون ال export default كالتالي

import React from 'react';

export class Navbar extends React.Component {//default لاحظ كلمة
    render(){
      return (
        <ul className="navbar navbar-full">
        ...
        </ul>
      );
    }
}

أما إذا أردت عمل import ولكن بدون استخدام ال default export أو تحتاج لاستخدام named export يجب عليك وضع ال {} حول الكائن الذي تريد إستدعائه كالتالي

import React from 'react';
import ReactDOM from 'react-dom';

import {Navbar} from './components/navbar.jsx';//{ } لاحظ ال 

export class App extends React.Component{
  render(){
    return(
        <Navbar />
        ...
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

الخطأ يطرأ لأنك تستخدم في التصدير named export وفي الاستيراد أن تستورده أنه default export وهذا خطأ فهناك فرق بين الاستخدامين فبالنسبة ل named export فالاستيراد يتم عن طريق ارفاق المستورد داخل {} وهذا ببساطة راجع لطبيعة عمل named export فيمكنك عن طريقها التصدير كم من مرة في ملف واحد

let myFunction = () => {
  console.log('myFunction');
};

let variable = 'variable';

export { myFunction, variable };

import myFunction from './defaultExport.js';

وعند الاستيراد نستورد كالتالي

import { myFunction, variable } from './namedExport.js';

أما بالنسبة ل default export  فهو يخولك للتصدير مرة واحدة فقط في ملف ما 

let myFunction = () => {
  console.log('myFunction');
};

export default myFunction;

ونقوم بالاستيراد كالتالي

import myFunction from './defaultExport.js';