Multiple Exports From ReactJS Component Library

Question

I'm trying to create a component library with multiple independent components folders. The end goal is to allow a user to do something like

import { Header } from 'component-library/theme/one' 
import { Header as HeaderTwo } from 'component-library/theme/two'

But when i try to import it, i get this errors:

I have structured folder like:

src
 -index.js
themes
 one
   - index.js
 two
   - index.js

Have you checked out this link: https://stackoverflow.com/questions/35485821/react-module-parse-failed — Onion, Mar 08 '21 at 18:59
@WendyZhang I already tried to config my webpack, but doesn't work — quirozcarlos, Mar 08 '21 at 19:25

score 0 · Answer 1 · answered Mar 08 '21 at 19:16

0

If you export your components like export default then you can import it with whatever name you want. import { whatever } from ....

answered Mar 08 '21 at 19:16

IWI

but my problem is the way to compile sub-folders, I need to use other components with `import { Header } from 'library/theme/two'`. in this case, I need to use Header from theme two – quirozcarlos Mar 08 '21 at 19:21

score 0 · Answer 2 · answered Mar 09 '21 at 03:02

I already fixed it, I changed my package.json with:

"main": "./_modules/index.js",
"exports": {
  ".": "./_modules/index.js",
  "./theme_two": "./_modules/themes/two/index.js"
},

So, if I want to add more themes, only should add the reference from _modules folder.

2 Answers2