Dynamic import - when webpack doesn't tell you about module not found

One fine day I encountered a situation where a vue component is undefined. This is pretty rare as most vue components are based on .vue files in my project. If the file itself is not found, this should be thrown out from eslint all the way to webpack loader. But nobody made a noise. Therefore it misdirected debugging badly.

Turned out, the file is indeed not found. But because of the way it’s imported, no one can spot the error before runtime:

export default (name, index = false) => () => import(`@/views/${name}${index ? '/index' : ''}.vue`);

So dynamic import, draft stage 3 as we spoke. It’s always the case where with more expressiveness comes less chances for static analysis.

Written on October 1, 2018