Webpack dependencies from index.ts resolved in wrong order

Question

We heavily rely on moduleResolution: 'node' in our latest project. We generated index.ts barrels to simpify the import statements. However, when building the app with webpack, the modules seem to be resolved in the wrong order:

I have a file iconSet.ts

export var IconSet = {
    Add: 'icon-add',
    Remove: 'icon-remove'
}

a second file icons.ts, which imports the IconSet variable

import { IconSet } from '.'

export var Icons = {
    Add: IconSet.Add,
    Remove: IconSet.Remove
}

and a index.ts file, that rollsup all exports like

export * from './icons'
export * from './iconSet'

When importing the Icons variable in an app.ts, icons.ts is provided before inconSet.ts was processes.

import { Icons } from '.'
console.log(Icons); // <- Cannot read property 'Add' of undefined

I thought webpack would take care of this.

Here is a minimal repo to reproduce the problem: https://github.com/eulbot/webpack-es6-index-barrels

Answer 1

We've faced similar problem in our projects. As a solution we used changing order of export lines, e.g.: export * from './iconSet' export * from './icons'

Should work.

It looks like if ClassA imports ClassB, then ClassB should be placed before ClassA in the index.d.ts file.

Also, you might consider importing classes from each other and not from the index.d.ts. We found that if classes are imported directly from class files (e.g. IconSet would be imported from the iconSet.ts file), then Webpack + ts-loader correctly import dependencies.