Incorrect order of imports in the chunk when using dynamic imports and code splitting
- 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