fix: rollup bundles don't resolve fast-element utilities

[radium-v]

🐛 Bug Report

It seems that Rollup doesn't support the use of the exports field in package.json.

Probably related:

• https://github.com/rollup/rollup/issues/3514
• https://github.com/rollup/plugins/issues/1192
• https://github.com/rollup/plugins/issues/1058
• https://github.com/rollup/plugins/issues/208

🤔 Expected Behavior

Rollup should be able to resolve and handle imports from @microsoft/fast-element/utilities.

😯 Current Behavior

An error is present when running build:rollup in @microsoft/fast-foundation (other packages which use Rollup may also be affected):

(!) Plugin typescript: @rollup/plugin-typescript TS2307: Cannot find module '@microsoft/fast-element/utilities' or its corresponding type declarations.
src/design-token/design-token.ts: (13:50)

13 import { composedContains, composedParent } from "@microsoft/fast-element/utilities";
                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/index.ts: (68:50)

68 export { composedParent, composedContains } from "@microsoft/fast-element/utilities";
  

💁 Possible Solution

We could divert the Rollup builds to use the already-built dist files (generated by build:tsc before rollup runs) until Rollup receives proper exports support.

[EisenbergEffect]

I think it technically builds the bundle correctly..but yeah there's some sort of issue with Rollup not handling this right. It might be worth us contributing to rollup to fix this so that customers don't get confused/frustrated. I'm not sure if they've got an issue open or not yet.

[EisenbergEffect]

Oh, I see you linked the issues above 😝

[tebinraouf]

It's probably related to this so I'd leave the comment here instead of creating a new issue. While testing the FAST Foundation components v3.0.0-alpha.15, I get the following error:

> [email protected] start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   1.92 MB | 
polyfills.js          | polyfills     | 318.03 kB | 
styles.css, styles.js | styles        | 210.10 kB | 
main.js               | main          |  47.96 kB | 
runtime.js            | runtime       |   6.53 kB | 

                      | Initial Total |   2.49 MB

Build at: 2022-10-07T03:07:02.956Z - Hash: fa73df67e6f62584 - Time: 4465ms

Error: node_modules/@microsoft/fast-foundation/dist/dts/index.d.ts:50:50 - error TS2307: Cannot find module '@microsoft/fast-element/utilities' or its corresponding type declarations.

50 export { composedParent, composedContains } from "@microsoft/fast-element/utilities";
                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.

Here is a sample Angular project to show the error: https://github.com/tebinraouf/fast-alpha-angular-project

I do see there is a TODO to remove it and when I do so, it works as expected. Wondering when we can remove? https://github.com/microsoft/fast/blob/master/packages/web-components/fast-foundation/src/index.ts#L53-L54

[EisenbergEffect]

I forgot about this one. @janechu Do you know if we still need this for the CLI?

[janechu]

This is not needed by the CLI.