Skip to content

Dynamic imports with a dynamic expression are not chunked/loaded correctly #1636

Open

Description

@gliptic

Dynamic imports with a dynamic expression (e.g. import(/* webpackMode: "lazy" */ `./${name}`)) are not chunked and/or loaded correctly when called from a TypeScript file, even if explicitly using the 'lazy' mode.
They work correctly when done from a JavaScript file leading me to think the bug is in ts-loader.
Example repo at the bottom.

Expected Behaviour

A chunk should be built for every separate .ts file; a.ts, b.ts and c.ts. Calling import should only load the chunk associated with that .ts file.
This works when the dynamic import is done from a .js file.

Actual Behaviour

a.ts, b.ts and c.ts are put together in the same chunk. In our actual application, they are put in separate chunks (because of the sizes?), but all of them are loaded at the same time when the dynamic import is done instead of only the chunk for the requested module, resulting in hundreds of requests.

Steps to Reproduce the Problem

Run npm install && npm run build in the linked repo. You can see that only one file called Content_sync_recursive_.js is created in the build folder instead of three separate ones.

Location of a Minimal Repository that Demonstrates the Issue.

https://github.com/gliptic/dynamicimportbug

Activity

  1. changed the title [-]Dynamic imports with a dynamic expressions are not chunked/loaded correctly[/-] [+]Dynamic imports with a dynamic expression are not chunked/loaded correctly[/+] on Oct 20, 2023
  2. NathZ1 commented on Dec 14, 2023

    @NathZ1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions