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

Viewed 2397

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');
1 Answers

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?

Related