Home does not contain an export named Home

Question

I was working with create-react-app and came across this issue where I get Home does not contain an export named Home  Here s how I set up my App js file  import React    Component   from  react   import logo from    logo svg   import    App css   import   Home   from    layouts Home   class App extends Component     render         return          lt div className  quot App quot  gt          Hello          lt Home   gt         lt  div gt               export default App   Now in my layouts folder I have the Home js file  which is setup like following  import React    Component   from  react    class Home extends Component     render         return          lt p className  quot App-intro quot  gt          Hello Man        lt  p gt               export default Home   As you can see I am exporting the Home component but I get an error in my console saying this   What is going on

User · Answer

Use  import Home from    layouts Home    rather than  import   Home   from    layouts Home    Remove    from Home

User · Answer

We also can use   import   Home   from    layouts Home      using export keyword before class keyword    export class Home extends React Component      render                               For default    import Home from    layouts Home      Default export class    export default class Home extends React Component      render                                Both case don t need to write   export default Home    after class

User · Answer

I just ran into this error message  after upgrading to nextjs 9 some transpiled imports started giving this error   I managed to fix them using syntax like this   import   as Home from    layouts Home

User · Answer

This is a case where you mixed up default exports and named exports   When dealing with the named exports  if you try to import them you should use curly braces as below   import   Home   from    layouts Home      if the Home is a named export   In your case the Home was exported as a default one  This is the one that will get imported from the module  when you don   t specify a certain name of a certain piece of code  When you import  and omit the curly braces  it will look for the default export in the module you   re importing from  So your import should be   import Home from    layouts Home      if the Home is a default export   Some references to look     https   developer mozilla org en-US docs Web JavaScript Reference Statements import https   developer mozilla org en-US docs Web JavaScript Reference Statements export https   medium com  trekinbami a-not-so-in-depth-explanation-of-es6-modules-import-and-export-13a80300f2f0

User · Answer

The error is telling you that you are importing incorrectly  The code you have now   import   Home   from    layouts Home     Is incorrect because you re exporting as the default export  not as a named export  Check this line   export default Home    You re exporting as default  not as a name  Thus  import Home like this   import Home from    layouts Home     Notice there are no curly brackets  Further reading on import and export

User · Answer

This is the solution   Go to your file Home js Make sure you export your file like this in the end of the file   export default Home

User · Answer

You can use two ways to resolve this problem  first way that i think it as best way is replace importing segment of your code with bellow one   import Home from    layouts Home    or export your component without default which is called named export like this   import React    Component   from  react    class Home extends Component      render            return           lt p className  App-intro  gt            Hello Man          lt  p gt                      export  Home

User · Answer

put export   Home    at the end of the Home js file

[javascript] Home does not contain an export named Home

Examples related to javascript

Examples related to reactjs

Examples related to ecmascript-6

Examples related to create-react-app