evanw / evanw/esbuild

Incorrect order of imports in the chunk when using dynamic imports and code splitting

Open
#3,585 0 comments 3 reactions 0 assignees View on GitHub
Dominant language
Go
Stars
40.1k
Forks
1.3k
PR merge metrics
No merged PRs in 30d

Description

Potentially related to #399 or #2983 - if so, feel free to close as duplicate.

Here is the [reproduction](https://github.com/web-padawan/test-esbuild-import). Run `npm i && npm run build && npm start` and check the console.

The issue manifests when having two dynamic imports in `src/app-element.js` (with static imports, everything works fine).

Content of imported files

- [`@vaadin/checkbox/vaadin-checkbox.js`](https://github.com/vaadin/web-components/blob/main/packages/checkbox/vaadin-checkbox.js)
```js
import './theme/lumo/vaadin-checkbox.js';
export * from './src/vaadin-checkbox.js';
```
- [`@vaadin/checkbox/theme/lumo/vaadin-checkbox.js`](https://github.com/vaadin/web-components/blob/main/packages/checkbox/theme/lumo/vaadin-checkbox.js)
```js
import './vaadin-checkbox-styles.js'; // order of these two imports matters
import '../../src/vaadin-checkbox.js';
```
- [`@vaadin/checkbox-group/vaadin-checkbox-group.js`](https://github.com/vaadin/web-components/blob/main/packages/checkbox-group/vaadin-checkbox-group.js)
```js
import './theme/lumo/vaadin-checkbox-group.js';
export * from './src/vaadin-checkbox-group.js';
```
- [`@vaadin/checkbox-group/theme/lumo/vaadin-checkbox-group.js`](https://github.com/vaadin/web-components/blob/main/packages/checkbox-group/theme/lumo/vaadin-checkbox-group.js)
```js
import '@vaadin/checkbox/theme/lumo/vaadin-checkbox.js';
import './vaadin-checkbox-group-styles.js';
import '../../src/vaadin-checkbox-group.js';
```

The underlying logic used by these web components assumes that `theme` files end up in the bundle **before** `src `files.
When using static imports, this works as expected and the output of files in the bundle matches the order of imports:

```
// node_modules/@vaadin/checkbox/theme/lumo/vaadin-checkbox-styles.js
// node_modules/@vaadin/checkbox/src/vaadin-checkbox-mixin.js
// node_modules/@vaadin/checkbox/src/vaadin-checkbox-styles.js
// node_modules/@vaadin/checkbox/src/vaadin-checkbox.js
```

However, when using dynamic imports and code splitting, file from `theme` folder is bundled **after** the `src` files:

```
// node_modules/@vaadin/checkbox/src/vaadin-checkbox-mixin.js
// node_modules/@vaadin/checkbox/src/vaadin-checkbox-styles.js
// node_modules/@vaadin/checkbox/src/vaadin-checkbox.js
// node_modules/@vaadin/checkbox/theme/lumo/vaadin-checkbox-styles.js
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the linked reproduction and run `npm i && npm run build && npm start`; inspect `src/app-element.js` and compare the generated chunk order for dynamic versus static imports. Trace esbuild's code-splitting import ordering until the theme files precede the src files, then verify the console output and generated bundle.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
build-system
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.