Chunk / Dynamic import not created for monorepo package

Bug report

What is the current behavior?

I am using webpack within a monorepo:

my-app/
  packages/
    package-a/
      src/
        anotherFunc.js
        index.js.            <- Webpack entry point
      webpack.config.js
    package-b/src/
      myExpensiveFunc.js
      myFunc.js
      index.js
      

package-b is a dependency of package-a. package-b does not have an own webpack build step as package-a has the webpack build process and just consumes the source files directly of package-b. When I do a dynamic import in package-a of a file in the same package, webpack creates a chunk.

But when I do a dynamic import in myFunc.js of myExpensiveFunc.js, webpack does not create a chunk:

package-a/src/index.js:

import { myFunc } from "@scope/package-b";

// This one does correctly create a chunk
document.addEventListener("my-custom-event", () => import("./anotherFunc").then(console.log));

// This not
document.addEventListener("my-custom-event", myFunc);

package-b/src/index.js:

export * from "./myFunc";
export * from "./myExpensiveFunc";

package-b/src/myFunc.js

function myFunc() {
  import("./myExpensiveFunc").then(({ myExpensiveFunc }) => {
    console.log(myExpensiveFunc);
  });
}

export { myFunc };

My webpack.config.js:

module.exports = {
  // [...]
  splitChunks: {
    chunks: "all",
    minSize: 0
  }
}

If the current behavior is a bug, please provide the steps to reproduce.

Will provide a repo once I know if it is a desired behavior.

What is the expected behavior?

myExpensiveFunc should be placed into an own chunk. I checked the code of webpack, but I could not find out if dynamic imports are permitted in dependencies of the package. If it is allowed, is there a way to “debug” chunk creation and print e.g. why a chunk was not created?

Other relevant information: webpack version: 5.74.0 Node.js version: 14.20.0 Operating System: Linux 5.10.0-9-amd64 #1 SMP Debian 5.10.70-1 (2021-09-30) x86_64 GNU/Linux Additional tools: None

[matzeeable]

Hey @alexander-akait !

Unfortunately, dependOn is not an option as it is not that dynamic and needs adjustments in the webpack.config itself. I gave webpackMode: "lazy" a try, but unfortunately it does not work as expected: https://stackblitz.com/edit/github-uymwfx-mvoaar?file=packages/package-b/src/myFunc.js

import { myFunc } from '../../package-b/index.js'

This is not correct. The file is imported through the dependency name:

import { myFunc } from "package-b"

[matzeeable]

@alexander-akait Thanks for your reply.

Why you need it?

We are working on a cookie banner solution and here we are in the process of outsourcing JavaScript that is not yet used when the website loads. In this way, we can also achieve corresponding improvements in our Web Vitals Score.

You can set the same values

Thanks for the tip, I tried with sideEffects: true, usedExports: true and now the chunks are created. Great!