Export multiple classes in ES6 modules

Question

I m trying to create a module that exports multiple ES6 classes  Let s say I have the following directory structure   my   -- module       -- Foo js      -- Bar js      -- index js   Foo js and Bar js each export a default ES6 class      Foo js export default class Foo        class definition       Bar js export default class Bar        class definition     I currently have my index js set up like this   import Foo from    Foo   import Bar from    Bar    export default     Foo    Bar      However  I am unable to import  I want to be able to do this  but the classes aren t found   import  Foo  Bar  from  my module     What is the correct way to export multiple classes in an ES6 module

User · Answer

For exporting the instances of the classes you can use this syntax       export index js const Foo   require    my module foo    const Bar   require    my module bar     module exports         Foo   new Foo        Bar   new Bar          import and run method const  Foo Bar    require  module name    Foo test

User · Answer

export in index js export   default as Foo   from    Foo   export   default as Bar   from    Bar       then import both import   Foo  Bar   from  my module

User · Answer

For multiple classes in the same js file  extending Component from  wordpress element  you can do that      classes js import   Component   from   wordpress element    const Class1   class extends Component      const Class2   class extends Component      export   Class1  Class2    And import them in another js file   import   Class1  Class2   from    classes

User · Answer

Hope this helps      Export  file name  my-functions js  export const MyFunction1        gt     export const MyFunction2        gt     export const MyFunction3        gt         if using  eslint   airbnb  then you will see warning  so do this  const MyFunction1        gt     const MyFunction2        gt     const MyFunction3        gt      export  MyFunction1  MyFunction2  MyFunction3       Import import   as myFns from    my-functions    myFns MyFunction1    myFns MyFunction2    myFns MyFunction3         OR Import it as Destructured import   MyFunction1  MyFunction2  MyFunction3   from    my-functions       AND you can use it like below with brackets  Parentheses  if it s a function     AND without brackets if it s not function  eg  variables  Objects or Arrays    MyFunction1    MyFunction2

User · Answer

webdeb s answer didn t work for me  I hit an unexpected token error when compiling ES6 with Babel  doing named default exports    This worked for me  however      Foo js export default Foo         bundle js export   default as Foo   from    Foo  export   default as Bar   from    Bar          and import somewhere   import   Foo  Bar   from    bundle

User · Answer

Try this in your code   import Foo from    Foo   import Bar from    Bar       without default export     Foo    Bar      Btw  you can also do it this way      bundle js export   default as Foo   from    Foo  export   default as Bar   from    Bar  export   default   from    Baz      and import somewhere   import Baz    Foo  Bar   from    bundle    Using export   export const MyFunction        gt     export const MyFunction2        gt      const Var   1  const Var2   2   export      Var     Var2         Then import it this way import     MyFunction    MyFunction2    Var    Var2    from    foo-bar-baz     The difference with export default is that you can export something  and apply the name where you import it      export default export default class UserClass     constructor             import it import User from    user

[javascript] Export multiple classes in ES6 modules

Examples related to javascript

Examples related to module

Examples related to export

Examples related to ecmascript-6

Examples related to babeljs