Exported type definition is different from original

[jeanverster]

Hi there! I'm running into an issue where the exported type definition differs from the type definition of the actual component. For instance, if I hover over the Box component where it's being defined, I get the following type definition:

const Box: React.ForwardRefExoticComponent<Pick<BoxProps, keyof CommonProps | "translate" | StandardSystemKeys | "slot" | "title" | "children" | "component" | "sx" | "key" | ... 246 more ... | "onTransitionEndCapture"> & React.RefAttributes<...>>

But after I've run microbundle build the definition for Box is missing all the props:

declare const Box: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;

Any ideas why that might be?

[rschristian]

A reproduction would help.

Does tsc output correctly?

[jeanverster]

Apologies, I realise the issue description above wasn't very helpful. For what it's worth I've done a bit more digging, and when I tried to create a minimal repro and all seemed to work as expected, but we are using microbundle in a rush monorepo to bundle components, so when I recreated a simple rush project I could recreate the issue. The repo can be found here.

You may need to globally install @microsoft/rush if you haven't already.. Then to replicate:

1. In root dir run rush update
2. Cd into the libraries/components directory and run rushx build and rushx build-tsc and observe the different outputs in lib/Box/Box.d.ts

I do realise this could potentially be some issue with using microbundle in a rush monorepo - but I'm a bit confused as to why that might be. Any insight would be appreciated!

[rschristian]

Thanks, that helped a lot.

We use rollup-plugin-typescript2 for working with TS, and it doesn't seem like it supports symlinks very well at the moment, see: https://github.com/ezolenko/rollup-plugin-typescript2/issues/234

If you delete node_modules, and reinstall in libraries/components with NPM or Yarn (v1), everything will work as expected.

There's a number of other issues with that plugin in monorepos too (like #808) so maybe I'll take a look and see if there are any alternatives out there that handle some of these things better. TS is quite difficult to bundle correctly, especially in Rollup, so this isn't a criticism of that plugin.

[jeanverster]

@rschristian awesome, thanks for the heads up. I had no idea about the symlink issues. After switching to yarn instead of pnpm I can confirm that the types are getting bundled correctly 👍 Gonna go ahead and close this as I don't think this is necessarily an issue with microbundle itself

[rschristian]

I had no idea either, so I'm glad you brought this up.

I'm actually going to reopen this, as I think it's quite useful for tracking and catching other users who run into this. While there's not much we can do here (short of migrating), this might become a more common issue with pnpm gaining some traction recently.