Laravel-mix: Empty 0 bytes css output when using dynamic imports

[bert-w]

• Laravel Mix Version: 5.0.0
• Node Version (node -v): 12.9.1
• NPM Version (npm -v): 6.11.3
• OS: Windows 10

Description:

Css outputs 0 bytes in specific setup, see reproduction below.

Steps To Reproduce:

package.json

"scripts": {
    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"dependencies": {
    "cross-env": "^6.0.0",
    "laravel-mix": "^5.0.0"
  }

input file 1: test1.js

function test() {
    alert('my test alert');
}

let b = import('./test_import.js');

console.log(b.someFunc());

input file 2: test2.js

function test2() {
    alert('my test alert 2');
}

input file 3: test_import.js

export default {
    someFunc() {
        return 5;
    }
}

input file 4: test.scss

body {
    background: red;
    p {
        color: blue;
    }
}

mix file webpack.mix.js

let mix = require('laravel-mix');

mix.webpackConfig({
    output: {
        publicPath: 'public',
        chunkFilename: 'public/chunks/[name].js'
    }
});

mix.js('./test2.js', 'public');
mix.js('./test1.js', 'public');
mix.sass('./test.scss', 'public');

Run npm run dev.

output:

  /public/test1.js   8.77 KiB                 /public/test1  [emitted]  /public/test1
  /public/test2.js   4.38 KiB                 /public/test2  [emitted]  /public/test2
public/chunks/0.js  480 bytes                             0  [emitted]
   public/test.css    0 bytes  /public/test1, /public/test2  [emitted]  /public/test1, /public/test2

Ways to fix this specific instance so it outputs the test.css correctly (no clue why these fixes work):

• Swap the 2 mix.js scripts (first 1 then 2)
• Use mix.scripts(['/public/test2.js'], 'public/output.js');
• Remove the dynamic import in the test1.js script

[roitto]

https://github.com/JeffreyWay/laravel-mix/releases/tag/v4.0.0

If your project heavily uses JavaScript dynamic imports, you may need to hold off until the release of webpack 5 early next year. There are known compile issues related to this that we cannot fix until then. Once webpack 5 is out, Mix will be updated shortly after. If you're unfamiliar with dynamic imports, then this very likely won't affect your project.

... Still waiting for that webpack 5 though..

[btica-ro]

Any chances to fix this?
I used Symfony Encore https://github.com/symfony/webpack-encore which also a wrapper over webpack and dynamic imports works great.

[jsgv]

I have tried laravel-mix 3, 4 & 5, but none of them work.

I do have dynamic imports and need to use it alongside css file builds.
Is there any workaround?
Would webpack by itself be enough to get it to work?

[TheAggressive]

Has anyone tried this with the new sass modules system?
http://sass.logdown.com/posts/7858341-the-module-system-is-launched

[matejsvajger]

@jsgv I worked around it by creating two webpack.mix.js config files. One for JS with dynamic imports and one for css build. Then expanded the build scripts in package.json something like this:

{
    "development": "npm run development-css && npm run development-js",
    "development-js": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.mix.js",
    "development-css": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.mix.css.js",
}

It's not optimal, and you loose versioning of one file since the manifest gets updated after each build, but if that's not a deal breaker it's a fast workaround.

[SiroDiaz]

I come here with the same issue. And i'm thinking to move to a "bare metal" solution, writing my own Webpack config file. A shame... but code splitting is required in the app i'm working on. Subscribed to this issue and waiting a solution.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.