I'm trying to write a library with TypeScript and Parcel. Everything's fine until i try to import it in another app.
In the library is a index.ts
file which gathers the components and exports them:
import Component1 from "./components/Component1";
import Component2 from './components/Component2';
export {
Component1,
Component2,
};
After building i get index.js
, index.css
and index.d.ts
.
In the index.d.ts
file the export
has been converted to export default
:
export default Component1;
export default Component2;
I linked my library with yarn to my consumer app. When i want to import { Component1 } from 'myLibrary';
i get the following error: Module '"myLibrary"' has no exported member 'Component1'. Did you mean to use 'import Component1 from "myLibrary"' instead?
. Now when i try to import default (like it is in the index.d.ts
) import Component1 from 'myLibrary';
the error changes to: Attempted import error: 'myLibrary' does not contain a default export (imported as 'Component1').
Why does the export
conversion happen and how can i circumvent this?
EDIT: The Library gets built and bundled by parcel, the consumer gets handled by react-scripts. After Mr.Manhattans suggestion:
index.ts:
export {Component1} from "./components/Component1";
export {Component2} from './components/Component2';
generated index.d.ts:
export {Component1} from "./components/Component1";
export {Component2} from './components/Component2';
consumer:
function App() => {
render(
<>
<Component1 />
<Component2 />
</>
)
};
Error:
./src/App.tsx
[1] Attempted import error: 'Component2' is not exported from 'myLibrary'.
you can direcly export:
export Component1 from "./components/Component1";
export Component2 from './components/Component2';
You're trying to re-export a named export that doesn't exist. Try re-exporting the default instead:
export { default as Component1 } from './components/Component1';
export { default as Component2 } from './components/Component2';