Exclude node module from sideEffects - webpack treeshaking

Question

We have a SPFx webpart project which renders Adaptive cards - this project generate bundles using Webpack via gulp-tasks.

We also have a (ESM/esnext) typescript library (SPPacking library) which has a lot of utility functions.

 |-- My-SPFx-Webpart
    |-- package.json
    |-- node_modules
      |-- Common-Library  
         |--node_modules
            |-- AdaptiveHtml implementing 'toJson' 
         |--Utils.ts file consuming node_module_1 as 'import AdaptiveHtml from "adaptive-html";

While trying to setup TreeShaking in the webpart project, we get Cannot read property 'toJson' of undefined We believe one the modules utilized by the library project is being shaken off and we want to avoid tree-shaking for that module (or the file consuming the module).

Utils is used in all the files of the SPFX Webpart.

In the package json of SPFx Webpart, is there a way to mark Utils.ts as having sideEffects?

Things we tried,

package.json

{
  "name": "My SPFx Webpart",
  "sideEffects": [
    "Common-Library",       //tried to mark the whole node_module as sideEffect - not working
    "Common-Library/Utils,  //tried to mark the exported module as sideEffect - not working
    "AdaptiveHtml",         //tried to mark the exported affected node_module as sideEffect - not working

  ],

Please help us to mark the node_modules or sub-modules as sideEffect in package json.

Answer 1

I think you have to specify whole path.

Do this:

"sideEffects": ["./node_modules/Common-Library/Utils]