question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ES6 Re-exports doesn't resolve inner types

See original GitHub issue

Hi there! Need some help with this plugin setup as I’m not able to get proper types. Not sure if it’s the plugin or a typescript config.

I’m trying to create a react component library with components namely exported from an entry file and each of them re-exported by their own barrel:

├── src
│   ├── Foo
│   │   ├── Foo.tsx
│   │   └── index.ts
│   ├── Bar
│   │   ├── Bar.tsx
│   │   └── index.ts
└── index.ts

And after compiling get two files: index.js and index.d.ts. But the d.ts file does not include the inner component types. It’s just a single line with an export.

export { default as Bar, default as Foo };

Reproduction

By having a project set up like:

// Foo/Foo.tsx
import { FC } from "react";

const Foo: FC<{
  name: string;
}> = ({ name }) => <h2>Foo {name}</h2>;

export default Foo;

// Foo/index.ts
export { default } from "./Foo";

// index.ts
export { default as Foo } from "./Foo";
// rollup.config.js
import ts from "rollup-plugin-ts";

export default {
  input: "./src/index.ts",
  output: {
    dir: "./build",
    format: "es",
  },
  external: ["react/jsx-runtime"],
  plugins: [ts()],
};

Results in a in a d.ts file like:

export { default as Foo };

But if instead of using re-export use import and then export works fine.

// Foo/index.ts
import Foo from "./Foo";
export default Foo

Expected Result

import { FC } from 'react';

interface BarProps {
    lastName: string;
}
declare const Bar: FC<BarProps>;

interface HelloWorldProps {
    name: string;
}
declare const Foo: FC<HelloWorldProps>;

export { Bar, Foo };

Actual Results

export { default as Bar, default as Foo };

Environment

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
wessbergcommented, Apr 15, 2022

That’s great, I’ll point to that issue in the release notes.

0reactions
diego-torocommented, Apr 15, 2022

That’s awesome! and… Oh shut. Just filed a new issue for it https://github.com/wessberg/rollup-plugin-ts/issues/178 You can close it right away.

Read more comments on GitHub >

github_iconTop Results From Across the Web

17 - Stack Overflow
1 Answer 1 · That case can be shortened to export {default} from './inner.js'; · @PhysRex Whether one can omit the file extension...
Read more >
export - JavaScript - MDN Web Docs
Every module can have two different types of export, named export and default export. You can have multiple named exports per module but...
Read more >
16. Modules - Exploring JS
The imports of an ES6 module are read-only views on the exported entities. That means that the connections to variables declared inside module...
Read more >
Export and Import - The Modern JavaScript Tutorial
Here are all types of export that we covered in this and previous articles. ... Standalone export: ... Re-export: ... Import: Importing named...
Read more >
Documentation - Modules - TypeScript
Inside a script file variables and types are declared to be in the shared ... If you have a file that doesn't currently...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found