Dynamic imports are causing code splitting issues in webpack

[dgoemans]

Checkboxes for prior research

• I've gone through Developer Guide and API reference
• I've checked AWS Forums and StackOverflow.
• I've searched for previous similar issues and didn't find any solution.

Describe the bug

After upgrading to AWS SDK for JavaScript v3 (from 3.398.0 to 3.682.0), we encountered an issue where Webpack splits the build output into multiple chunks/folders containing AWS-related code (e.g., 699.js, etc).

Despite having Webpack configured to bundle all modules into a single JavaScript file, these chunks were still generated. Investigation revealed that several AWS SDK modules, such as @aws-sdk/credential-provider-env and @aws-sdk/credential-provider-http, use dynamic imports internally, triggering this behavior.

Regression Issue

• Select this option if this issue appears to be a regression.

SDK version number

@aws-sdk/client-*@3.682.0

Which JavaScript Runtime is this issue in?

Node.js

Details of the browser/Node.js/ReactNative version

Node 18

Reproduction Steps

1. Use Webpack to bundle a project that imports AWS SDK v3 components (e.g., S3Client, DynamoDBClient).
2. Configure Webpack with optimization.splitChunks: false and runtimeChunk: false to prevent code splitting.
3. Observe that Webpack still splits certain AWS SDK modules into separate chunks/folders.

Observed Behavior

Instead of bundling all the dependencies into a single file, the code is split into separate chunks. When enabling named chunk IDs you can see that most of them are from the credentials providers, where dynamic imports are used.

Expected Behavior

Webpack should bundle all imported AWS SDK modules into the main JavaScript output, without creating additional chunks, especially when code splitting is explicitly disabled.

Possible Solution

Modifying webpack config to add aliases to force a non-dynamic import:

 resolve: {
    alias: {
      '@aws-sdk/credential-provider-env': path.resolve(
        __dirname,
        'node_modules/@aws-sdk/credential-provider-env/dist-cjs/index.js'
      ),
... insert all other modules here
  }
}

Additional Information/Context

Issue was already reported here:
#5990
by @nikimicallef

[dgoemans]

Update:
Some nicer, future proof, options to prevent the code splitting from happening with Dynamic imports:

1. You can force the max chunks using the webpack.optimize.LimitChunkCountPlugin. This will force all smaller chunks into the main chunk, and prevent splitting the bundle.

    new optimize.LimitChunkCountPlugin({
      maxChunks: 1,
    }),

2. You can explicitly disable chunk loading per entry point:

entry: {
  service1: {
    import: path.resolve(__dirname, 'service1.ts'),
    chunkLoading: false
  }
}

[kuhe]

This is an intentional and configurable webpack behavior. We do not plan to change it, since many users are relying on the code-splitting behavior, and configuration of webpack allows opting out.

[dgoemans]

I understand that it's intentional behavior, but it was introduced without any mention (that i could find) in the release notes. This meant that between minor updates, stuff broke. I noticed some docs (a footnote) about this eventually, but with no reasonable solution. As I found in the closed issues, seems to have affected others too, and I assume some of them have simply left it at an old version, which wasn't an option for us and is generally not a good long term thing.

At the very least, this issue, with a solution, is important as documentation for others who encounter the same problem, but I would suggest adding some expanded docs for this.