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

cf19drofxots commented 5 years ago

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

'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.

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 commented 5 years ago

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

snario commented 5 years ago

@joelalejandro @cf19drofxots any thoughts on the fix?

snario commented 5 years ago

Some overlapping work with counterfactual/monorepo#692

snario commented 5 years ago

Stencil recommends installing some libraries for rollup but unfortunately we hit this bug: https://github.com/ionic-team/stencil/issues/1305

snario commented 5 years ago

I also think that this issue is relevant: https://github.com/ethers-io/ethers.js/issues/145

Alonski commented 5 years ago

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

joelalejandro commented 5 years ago

Sure thing. Transferring.

joelalejandro commented 5 years ago

Done!

counterfactual / dapps-bots

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