CODEWITHSUNDEEP
javascriptreactjstypescriptwebpack
newBieDev
newBieDev

Reputation: 504

Multiple Exports From React Component Library

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

import One from 'component-library' 
import Two from 'component-library'
<One/>
<Two/>

But I haven't been able to get anything to work.

My current layout is 

src
 -index.tsx
 -components
  -one
  -two

An example of what my code looks like:

One.tsx

export default class One {
 ...
}

and then in my root index.tsx

import {default as One} from './components/one/One.tsx'
import {default as Two} from './components/two/Two.tsx'

export {
  one,
  two
}

This however doesn't work and returns undefined when attempting to import as demonstrated above. I was however able to get this to work only using one component and export {default} from './components/one/One.tsx' or just doing import One from '.components/one/One.Tsx' so I think my build process should be fine. In that case the component displayed correctly in my other project.

I've also tried modifying my structure and how I'm importing, for example using an index.tsx file in each of the components and exporting/importing from there. All of these have netted the same, returning undefined.

How can I export these correctly so that each one is discretely importable in a 3rd party project?

Upvotes: 4

Views: 5216

Answers (2)

Bankim Sutaria
Bankim Sutaria

Reputation: 61

Try with below code:

import one from './components/one/One.tsx';
import two from './components/two/Two.tsx';

export const One = one;
export const Two = two;

Then you can use it like below:


import {One, Two} from 'component-library';

<One/>
<Two/>

Upvotes: 0

Sean Vieira
Sean Vieira

Reputation: 159895

Like Highlander, there can be only one default export from a given module. You can get the imports you want by importing distinct modules:

import One from 'component-library/One';
import Two from 'component-library/Two';

Or, you can use named exports and imports:

import { One, Two } from 'component-library';

But you can't have the same import return two different things based on the import name.

Upvotes: 4

Related Questions