Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ES6 Re-exports doesn't resolve inner types #176

Closed
diego-toro opened this issue Apr 10, 2022 · 7 comments
Closed

ES6 Re-exports doesn't resolve inner types #176

diego-toro opened this issue Apr 10, 2022 · 7 comments

Comments

@diego-toro
Copy link

diego-toro commented Apr 10, 2022

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

@diego-toro diego-toro changed the title How to bundle d.ts into single file? How to bundle d.ts into single file when using barrels? Apr 10, 2022
@diego-toro diego-toro changed the title How to bundle d.ts into single file when using barrels? Bundling d.ts doesn't work with inner es6 barrels Apr 10, 2022
@diego-toro diego-toro changed the title Bundling d.ts doesn't work with inner es6 barrels ES6 Re-exports doesn't resolve inner types Apr 15, 2022
@wessberg
Copy link
Owner

Hey there. This problem has been fixed in v2.0.6

@diego-toro
Copy link
Author

@wessberg thank you very much! Just saw an issue tho. The resulting d.ts have some extra defaults aliases. Not sure if its intentional.

import { FC } from "react";
interface BarProps {
    lastName: string;
}
declare const Bar: FC<BarProps>;
declare const __default: typeof Bar;  // <== This one
interface HelloWorldProps {
    name: string;
}
declare const Foo: FC<HelloWorldProps>;
declare const __default$0: typeof Foo;  // <== This one
export { __default as Bar, __default$0 as Foo };

Also seems the watch mode breaks when editing style files. Just updated the sample repo to include postcss. Here is the error that pops up after trying to edit the .module.scss on watch mode

[!] (plugin Typescript) TypeError: Cannot read properties of null (reading 'length')
TypeError: Cannot read properties of null (reading 'length')
    at iterateCommentRanges (/Users/diegotoro/code/rollup-ts-reexport-bug/node_modules/typescript/lib/typescript.js:10470:45)
    at reduceEachLeadingCommentRange (/Users/diegotoro/code/rollup-ts-reexport-bug/node_modules/typescript/lib/typescript.js:10561:16)
    at Object.getLeadingCommentRanges (/Users/diegotoro/code/rollup-ts-reexport-bug/node_modules/typescript/lib/typescript.js:10576:16)
    at Object.getJSDocCommentRanges (/Users/diegotoro/code/rollup-ts-reexport-bug/node_modules/typescript/lib/typescript.js:15302:16)
    at addJSDocComment (/Users/diegotoro/code/rollup-ts-reexport-bug/node_modules/typescript/lib/typescript.js:31050:42)
    at parseSourceFileWorker (/Users/diegotoro/code/rollup-ts-reexport-bug/node_modules/typescript/lib/typescript.js:31023:34)
    at Object.parseSourceFile (/Users/diegotoro/code/rollup-ts-reexport-bug/node_modules/typescript/lib/typescript.js:30855:26)
    at Object.createSourceFile (/Users/diegotoro/code/rollup-ts-reexport-bug/node_modules/typescript/lib/typescript.js:30653:29)
    at CompilerHost.constructSourceFile (/Users/diegotoro/code/rollup-ts-reexport-bug/node_modules/rollup-plugin-ts/dist/cjs/index.js:7700:37)
    at CompilerHost.add (/Users/diegotoro/code/rollup-ts-reexport-bug/node_modules/rollup-plugin-ts/dist/cjs/index.js:7660:37)


@wessberg
Copy link
Owner

wessberg commented Apr 15, 2022

Hi there. Yes, these are intentional and part of how exported bindings are aliased locally when brought together. The output in your example is exactly as intended. A little verbose, sure, but only something you'll see rarely when re-exporting default exports from other modules under other names.

As for the second part of your question about watch mode , I'll look into it and see what if I can make sense if it, but it would be great if we could track it in a separate issue ☺️

@diego-toro
Copy link
Author

sure! I'll open a new one. Thanks!

@wessberg
Copy link
Owner

I've managed to track down and isolate the problem. It is a regression in the new version. Thanks for letting me know this early before anyone else runs into it!

@diego-toro
Copy link
Author

That's awesome! and... Oh shut. Just filed a new issue for it #178 You can close it right away.

@wessberg
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants