In our latest project, moduleResolution: 'node' plays a crucial role. We utilized index.ts barrels to streamline the import statements. However, during the app build process with webpack, it appears that the modules are being resolved in an incorrect order:
For instance, we have a file named iconSet.ts
export var IconSet = {
Add: 'icon-add',
Remove: 'icon-remove'
}
Then, there is another file called icons.ts, which imports the IconSet variable
import { IconSet } from '.'
export var Icons = {
Add: IconSet.Add,
Remove: IconSet.Remove
}
Lastly, there is an index.ts file that consolidates all exports like so:
export * from './icons'
export * from './iconSet'
The issue arises when importing the Icons variable in app.ts, as icons.ts gets processed before iconSet.ts:
import { Icons } from '.'
console.log(Icons); // <- Cannot read property 'Add' of undefined
It was expected that webpack would handle this problem seamlessly.
To replicate the problem, a minimal repository has been created: https://github.com/eulbot/webpack-es6-index-barrels