Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Load a Universal React Named Exported Component with the Key Option


    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.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Man: 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.

    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.

    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.

    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.