Laravel-mix: Error with Vue lazy loading components: "Failed to resolve async component"

[romanzipp]

• Laravel Mix Version: 4.0.15
• Node Version: 11.13.0
• NPM Version: 6.7.0
• OS: Ubuntu 16.10

Description:

When using Vue async components, and building my application in development mode (run dev or run watch) I receive the following error.
But after saving any file to trigger another build, everything works perfectly.

[Vue warn]: Failed to resolve async component: function () {
    return __webpack_require__.e(/*! import() | components */ "components").then(__webpack_require__.bind(null, /*! ./components/partials/navigation/Navigation.vue */ "./resources/js/app/components/partials/navigation/Navigation.vue"));
  }
Reason: TypeError: Cannot read property 'call' of undefined

All JS chunk files are loaded correctly as seen in network debugging.

The Navigation.vue component seems to be the first partial which is included in my base App component.

I've splitted all partial Vue components to components.js and router view files to routes.js (using webpackChunkName magic comment with the import function)

Just running run watch / run dev:

             Asset      Size      Chunks             Chunk Names
        /js/app.js  2.31 MiB     /js/app  [emitted]  /js/app
...
  js/components.js  1.11 MiB  components  [emitted]  components
      js/routes.js   516 KiB      routes  [emitted]  routes

Saving any file to trigger re-building:

                                     Asset      Size                     Chunks             Chunk Names
                                /js/app.js  2.32 MiB                    /js/app  [emitted]  /js/app
...
                          js/components.js   1.1 MiB                 components  [emitted]  components
                              js/routes.js   513 KiB                     routes  [emitted]  routes
           js/vendors~components~routes.js  19.5 KiB  vendors~components~routes  [emitted]  vendors~components~routes

What I've tried

• Replace all webpack resolve aliases with relative paths
• I stubmled across an issue where the the webpack [chunkhash] placeholder in the output.chunkFilename webpack option causes an issue
• Modifying webpack optimization.splitChunks.chunks option

webpack.mix.js

const mix = require('laravel-mix');
const fs = require('fs');
const webpack = require('webpack');
const tailwind = require('tailwindcss');
const path = require('path');
const glob = require('glob');
const exec = require('child_process').exec;
const pwa = require('sw-precache-webpack-plugin');

mix.webpackConfig({
    output: {
        chunkFilename: 'js/[name].js',
    },
    plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ],
});

mix.version();

// ...

mix.js('resources/js/app/app.js', 'public/js/app.js');

Loading Vue partial components

Vue.component('navigation', () => import(/* webpackChunkName: "components" */ './components/partials/navigation/Navigation.vue'));

Loading Vue routes

import auth from './auth';

let routes = [{
    path: '/',
    name: 'home',
    component: () => import(/* webpackChunkName: "routes" */ '../components/views/Index'),
}];

export default routes.concat(
    auth
);

[romanzipp]

Update / Workaround (?)

I just noticed that all failing components contain <style> tags. After removing these everything works normally on dev and production builds.