stencil icon indicating copy to clipboard operation
stencil copied to clipboard

bug: React binding output is not tree shakable

Open Arvind6353 opened this issue 3 years ago • 4 comments

Prequisites

Stencil Version

2.8

Current Behavior

Hi Team,

I am trying to use framework binding with react.

I used the below config and create a bundle and imported it in a react app as below

  reactOutputTarget({
      componentCorePackage: 'fw-design-core',
      proxiesFile: '../react/src/components.ts',
      //loaderDir: 'dist/loader',
      includeDefineCustomElements: true,
    }),


 import { FwButton } from "fw-design-react";

 <div className="App fw-dark-theme">
      {/* <my-component first="first"></my-component> */}
        <FwButton color="primary"
      onFwClick={ e => console.log("event triggerd")}
      >Primary button</FwButton>
    </div>
  );

The webcomponent lib holds 2 components my-component and fw-button.

Am using only fw-button in the code. When I run npm run build (create-react-app).

I am seeing many chunk files generated and one of the chunk file related to "my-component" though this is not being used .

Expected Behavior

I assume ideally with tree shaking the above chunk file should not be generated since "my-component" is not being used.

Can you please help with this ?

Code Reproduction URL

https://github.com/Arvind6353/react-wc/blob/master/src/App.js#L4

@johnjenkins @dmartinjs

Additional Information

No response

Arvind6353 avatar Sep 15 '21 12:09 Arvind6353