[playground] Stencil build errors out about importing packages during rollup

[cf19drofxots]

This is the error when yarn build is executed in packages/dapp-high-roller:

$ stencil build
[28:55.1]  @stencil/core v0.15.2 🌯
[28:55.1]  build, app, prod mode, started ...
[28:55.1]  transpile started ...
[28:55.8]  transpile finished in 686 ms
[28:57.9]  module map started ...
[28:57.9]  generate styles started ...
[28:58.0]  compile global style start ...
[28:58.1]  compile global style finish in 102 ms
[28:58.1]  generate styles finished in 146 ms
[28:58.5]  module map finished in 547 ms

[ ERROR ]  Rollup: Missing Export: src/data/counterfactual.js:1:9
           'types' is not exported by ../cf.js/dist/index.js

      L1:  import { types } from "@counterfactual/cf.js";
      L2:  import { createProviderConsumer } from "@stencil/state-tunnel";

[28:58.5]  build failed in 3.39 s

1. 'types' is not exported by ../cf.js/dist/index.js occurs because the dist file for cf.js does not have the right format. It's using cjs which is meant for NodeJS, not ES.

When stencil build is doing its rollup, it's expecting an export to be present as is the format for the esm build format.

2. Changing the build format solves said issue, though because the dependencies of the imports (for eg, ethers) seemingly not being distributed for the ES format either, a similar errors occurs.

$ stencil build
[32:45.5]  @stencil/core v0.15.2 🌯
[32:45.5]  build, app, prod mode, started ...
[32:45.6]  transpile started ...
[32:46.3]  transpile finished in 692 ms
[32:48.4]  module map started ...
[32:48.4]  generate styles started ...
[32:48.4]  compile global style start ...
[32:48.5]  compile global style finish in 106 ms
[32:48.5]  generate styles finished in 154 ms
[32:49.1]  module map finished in 704 ms

[ ERROR ]  Rollup: Missing Export: ../cf.js/dist/index.esm.js:1:9
           'ethers' is not exported by ../../node_modules/ethers/index.js

      L1:  import { ethers } from 'ethers';
      L2:  import { Node } from '@counterfactual/common-types';

[32:49.1]  build failed in 3.56 s

Since we don't have control over the imported libraries' distribution formats, we're required to use a rollup plugin which converts cjs (the format that the libraries do support) to esm (for ES modules).

However, configuring the stencil rollup configuration to use rollup-plugin-commonjs results in the stencil build hanging. No further Stencil documentation or issues offer further help on resolving this at the moment.

[joelalejandro]

Why was this closed @snario? This is still a problem. We're working around it with IIFEs.

[snario]

@joelalejandro @cf19drofxots any thoughts on the fix?

[snario]

Some overlapping work with counterfactual/monorepo#692

[snario]

Stencil recommends installing some libraries for rollup but unfortunately we hit this bug: ionic-team/stencil#1305

[snario]

I also think that this issue is relevant: ethers-io/ethers.js#145

[Alonski]

@joelalejandro @snario @cf19drofxots Lets move this to the new dapps-bots repo?

[joelalejandro]

Sure thing. Transferring.

[joelalejandro]

Done!