Load a Universal React Named Exported Component with the Key Option

Tim Kindberg
InstructorTim Kindberg
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 6 years ago

It’s not uncommon to export a component as a named export as opposed to a default export. The key option in the universal higher-order component allows you to select which named export in the module that you’d like to load.

Man: [00:00] When you use universal and you tell it to import a file, it automatically pulls out the default export. If we look at fu, we can see that I'm exporting fu as the default. If I look at bar, I'm also exporting bar as the default. When I load those files, that's working but if I were to delete these defaults and only export fu and bar as named exports, when I save, it's going to tell me that the export wasn't found.

[00:36] It's actually showing me, I think, the default error component. The way you can fix this is two ways. It's actually one option called key. You can actually just pass it a string. You give it the name of the named export that you want to pull out of that module. Out of the fu file, I'd like to pull out the fu export.

[01:03] When I save that and refresh, I can now load fu. An alternative, if you need to do a little bit more with the module, is you can pass key a function. When you pass a function, you'll actually receive the full module that was loaded. You just need to return the export that you're looking for.

[01:26] There's two different ways you can do it. You can pass a string or a function. Now when I refresh, both fu and bar are loading their named exports.

egghead
egghead
~ just now

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today