laravel-mix produces empty (0 bytes) .css files WITHOUT dynamic imports and .extract

Question

I'm getting empty .css files without using .extract and import() When I'm running npm run dev

My webpack.mix.js:

let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js').sourceMaps()
    .js('resources/assets/js/admin.js', 'public/js').sourceMaps()
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/admin.scss', 'public/css');

mix.copyDirectory('resources/assets/img', 'public/img');

The strange thing here is that if I remove one of .js mixes it works. For example this works:

mix.js('resources/assets/js/app.js', 'public/js').sourceMaps()
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/admin.scss', 'public/css');

this also works:

mix.js('resources/assets/js/admin.js', 'public/js').sourceMaps()
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/admin.scss', 'public/css');

But I need to generate admin.js (or app.js) after that. Which is not very handy. Any ideas what I'm doing wrong?

My environment is:

Laravel Mix Version: 5.0.0
Node Version: 11.0.0
NPM Version: 6.10.3
OS: macOS High Siera / Ubuntu 18.04 LTS

I'm sure that I have no dynamic imports, because I'm upgrading from laravel-mix v.3. But also I checked my code. And if I have dynamic imports, none of my examples will work.

EDIT: I found that the problem is in my admin.js file which imports:

import router from './router'

and in /router/index.js there is another import:

import routes from './routes.js'

and the problem seеms to be in routes.js file which looks like that:

const routes = [
    {
        path: '/',
        component: resolve => require(['../views/admin/dashboard/dashboard.vue'], resolve),
        meta: {
            title: "Dashboard",
        }
    },
];
export default routes

But, I can't still explain where is the dynamic import here?!?!? Or how this works:

mix.js('resources/assets/js/admin.js', 'public/js').sourceMaps()
    .sass('resources/assets/sass/admin.scss', 'public/css');

If you claim that it's WITHOUT dynamic imports, wouldn't it be wise to include your JS files code in the question? — Salim Djerbouh, Oct 09 '19 at 13:57
@Saly3301, yes it seems that problem is in file related to admin.js but how then this works: mix.js('resources/assets/js/admin.js', 'public/js').sourceMaps() .sass('resources/assets/sass/admin.scss', 'public/css'); ? — dust_bg, Oct 10 '19 at 07:10

score -1 · Answer 1 · answered Oct 10 '19 at 07:25

I changed this:

component: resolve => require(['../views/admin/dashboard/dashboard.vue'], resolve),

to this:

component: require('../views/admin/dashboard/dashboard.vue').default,

and now it works. This article was very helpful: What exactly is Hot Module Replacement in Webpack?

laravel-mix produces empty (0 bytes) .css files WITHOUT dynamic imports and .extract

1 Answers1