Chunking seems not to be working when importing from packages in monorepo

[Poolshark]

I'm trying to figure this out since days now but I simply can't get my head around what's going on. I further don't know if this problem is babel related or if it originates from webpack.

I have a monorepo with 3 apps which all rely on components from packages

frontend/
  apps/       <-- each app is a package in the scope of the Monroe
    app1/
    ...
  packages/   <-- this is a package in the monorepo scope
    components/
    providers/
    ...

Inside app specific components I import eg. components like

import { MyComponent } from 'packages/components';

Inside packages I have aliased imports, eg. requesting a component in providers

import { MyComponent } from 'frontend/components';

The tsconfig.json in packages defines the local aliases

{
  ...
  "paths": {
    "frontend/components": ["./components"],
    ...
}

In my webpack.config.ts I define the aliases like

{
  resolve: {
    alias: {
      components: resolve(__dirname, "../../../frontend/apps/campus/src/components") // <-- resembles the absolute path to the config file
    }
  }
}

It all works but when I check my bundle I get a main chunk with the entire content from packages? Does that have something to do with my aliases or should I do something with my chunk settings?

Here's a screenshot from the bundle analyzer:

Especially interesting is the iconpack_default, from which I dynamically import icons. I would have expected this to put every icon inside a separate chunk...

I know, this might be quite vague but I'd appreciate any kind of push in the right direction!

Thanks! 🙌

[vankop]

it looks like your imports example is not related to including all packages, you can try to use https://statoscope.tech/ to check what modules request packages/*

[Poolshark]

Thank you!

Tested this but unfortunately it had no effect. Moreover, it seems that now all .ts files which do include any React specific code (eg. hooks), will be included in the bundle. So

const test = () => {
  return "Hello World!";
}

is not included (unused), whereas

import { useEffect } from 'react';
const test = {
  useEffect(() => { 
    //do nothing 
  }, []);
  return "Hello World!";
}

is automatically included although not used in App.tsx 🙈

I'm sorry for this mess and I'm pretty sure I'm just missing a minor config here. Funny enough, if I change all my imports in App.tsx to the exact file position (eg. import { test } from 'packages/test') it works as expected. But the import via the index.ts causes all files to be included in the bundle.

[vankop]

But the import via the index.ts causes all files to be included in the bundle.

As I said you need to set sideEffects flag correctly or result of ts transpiling is commonjs this prevents tree-shaking. You can try to create small reproducible repo I will take a look

[Poolshark]

Hey!

I have played around with the sideEffects flag but so far nothing did the job. Guess just setting it to false does not do the trick.

Anyway, I have managed to create a minimal example from my (quite complex) monorepo, which actually shows the problem. I hope this works for you!

@vankop I really appreciate the time you spending helping me out here! Thank you so much! 🙌

PS.: Let me know if the minimal example is sufficient.

[vankop]

you should set optimization.sideEffects=true https://github.com/Poolshark/webpack-minimal-example/blob/master/config/webpack/config/apps.webpack.ts#L107 this will enable side effects plugin on webpack side.

---

This should help

[Poolshark]

Hi!

Thank you very much! This solved the problem! 🙌

It's just very weird that I had to set sideEffetcs: false in the package.json of the frontend package and sideEffects: true in optimization.sideEffects of. the Webpack config but I guess this is how it is.

Anyway, thanks so much for your help!