Laravel-mix: .extract() leads to empty .css files

[rderimay]

• Laravel Mix Version: [email protected] (npm list --depth=0)
• Node Version (node -v): v10.10.0
• NPM Version (npm -v): 6.5.0
• OS:

Description:

css files are empty (0 bytes), with no error, whenever a js file has been processed before.

  .js('resources/front/visitors/visitors.js', 'public/js')
  .sass('resources/front/visitors/sass/visitors.scss', 'public/css')
  .extract([....])

leads to a 0 bytes css file whenever

  .js('resources/front/visitors/visitors.js', 'public/js')
  .sass('resources/front/visitors/sass/visitors.scss', 'public/css')

creates the wanted css.

Steps To Reproduce:

Running npm run dev or npm run prod. Specifying the array of libs you want to extract (.extract([...])) or letting Mix do the guessing job (.extract()) does not change the problem.

Output in the first case:

 DONE  Compiled successfully in 11268ms
                     Asset      Size                                         Chunks             Chunk Names
/css/semantic-visitors.css   0 bytes                     /js/manifest, /js/visitors  [emitted]  /js/manifest, /js/visitors
         /css/visitors.css   0 bytes                     /js/manifest, /js/visitors  [emitted]  /js/manifest, /js/visitors
           /js/manifest.js  9.08 KiB                                   /js/manifest  [emitted]  /js/manifest
             /js/vendor.js  2.14 MiB                                     /js/vendor  [emitted]  /js/vendor
           /js/visitors.js  1.28 MiB                                   /js/visitors  [emitted]  /js/visitors

and in the second case:

 DONE  Compiled successfully in 11111ms
                     Asset        Size                                         Chunks             Chunk Names
/css/semantic-visitors.css     653 KiB                                   /js/visitors  [emitted]  /js/visitors
         /css/visitors.css    14.5 KiB                                   /js/visitors  [emitted]  /js/visitors
           /js/visitors.js    2.93 MiB                                   /js/visitors  [emitted]  /js/visitors

[rderimay]

Not sure if the roots of the problem could be the same as in this bug : #1889

[dolbex]

Same issue on 4.0.13

[randompixel]

Related to #1887 . Answer seems to be don't upgrade yet if using SCSS

[JeffreyWay]

No, answer is don't upgrade if you're using dynamic imports. See the Mix 4 release notes.

[dolbex]

Yeah, saw those - just missed them when trying to upgrade. I took a look at webpack 5 and it appears they are only at 20% :/

Biggest thing my team is missing from 2.x is the new multi-config that you dropped last month so we can do multiple tailwind configurations. Think it's even possible to get it in 2.x?

[nelson6e65]

Well... we have to do not use extract() then. :cry:

There is a note in extract-text-webpack-plugin that is maybe related with this:

:warning: Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

I'm having #1889 problem too. :cry:

But without extract(), all is working fine.

[njoguamos]

Same problem here. However, css compiles successfully when I remove extract()

[stephan-v]

You are telling me there is no way this can be fixed in the current setup?

[elramus]

Running into this as well. In my case, we've been using extract() just fine on v4 of Mix for a while, but I'm now implementing code splitting with dynamic imports using React lazy, and now SASS is compiling down to an empty CSS file. Removing extract() does not solve the issue though!

FWIW, I created a new, clean Laravel / React project and implemented both SASS compiling and code splitting, and things worked just fine. Added in extract() and we're back to empty CSS. Trying to nail down what the difference is, maybe that'll provide some clues.

Update: Looks like js() can cause this too. I had react() going, and then also js() for some separate, non-React stuff. So I had to disable js() and extract() before the CSS would compile properly while using dynamic imports. scripts() seems to play nice though.

[FireworksX]

This problem is not resolved? I also use extract and have problem with empty styles. "laravel-mix": "^4.0.7"

[viral-vector]

same issue as well on mix ^4.0.7

[vesaka]

Today I faced the same issue.
Without mix.extract() it works but I wanted it there.

So here's a workaround I found.
Separate the webpack.mix.js file into two files.

1. webpack.mix.js - it will serve the javascript compiling only. Remove any sass, less, or css file paths. Leave javascript filenames only.
   2 webpack.css.js (or name it whatever you want) - this one will serve the styles only. No javascript (unless it has no dynamic import syntax in it)

Next step is to add new scripts into your package.json file

"scripts": [
...
"css-watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules _--env.mixfile=webpack.css.mix_ --config=node_modules/laravel-mix/setup/webpack.config.js",
"css-dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules _--env.mixfile=webpack.css.mix_ --config=node_modules/laravel-mix/setup/webpack.config.js"
]

NOTE: On this step, make sure to match that --env.mixfile option with the second webpack file.

Final step: npm run dev and npm run css-dev
If you want to watch the files at the same time you'll need a second terminal window.
One should run and watch npm run watch and the second one - npm run css-watch

I hope it helps.

[plumpboy]

@vesaka you won't need 2 terminal windows, just npm run watch & npm run css-watch, or add a script "npm run watch-all" to run above scripts.
one more thing you will need merge the old manigest file with the new one as it will be replaced every time you build.
https://github.com/KABBOUCHI/laravel-mix-merge-manifest

[rmondesilva]

@vesaka you won't need 2 terminal windows, just npm run watch & npm run css-watch, or add a script "npm run watch-all" to run above scripts.
one more thing you will need merge the old manigest file with the new one as it will be replaced every time you build.
https://github.com/KABBOUCHI/laravel-mix-merge-manifest

Second command npm run css-watch will not work.
You can install something like concurrently to run these both the same time.

and maybe even better, instead of npm run watch for JS, rename it to npm run js-watch (better consistency too),
Then add again the npm run watch and replace its value to "concurrently \"npm run js-watch\" \"npm run css-watch\""

So that way, everything back to what they used to be. Same command. No hassle to inform co-devs.

[plumpboy]

@rmondesilva take a look at this repo https://github.com/euclid1990/laravel
i have test and use it, so i commit it work at least in ubuntu

[gtempesta]

Followed @vesaka's and @rmondesilva's suggestions and it's working fine on a fresh install of Laravel (using Laravel Mix v4.0.7).

[farums]

npm --section=app run watch -- --watch-poll & npm --section=admin run watch -- --watch-poll
и
"dev-all": "concurrently \"npm --section=app run dev\" \"npm --section=admin run dev\" --kill-others-on-fail",

windows 10 -- ok

[mcanvar]

I come up with this workaround by inspiring @vesaka 's answer. Instead of using different webpack config files I've controlled extracting and scss compiling with environmental variables:

So my compiling commands in package.json become:

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

And my dynamic control area in webpack.mix.js:

if (process.env.COMP_TYPE === 'css')
    mix
        .sass('css/main.scss', 'static/dist')
        .sass('css/vendor.scss', 'static/dist');
else
    mix
        .js('js/app.js', 'static/dist')
        .extract([
            'core-js/stable',
            'regenerator-runtime/runtime',
            'intersection-observer',
            'vue',
            'bootstrap-vue',
            'axios',
            'moment'
        ]);

And lastly if you need manifest files for dealing Browser Caching, either you can use @plumpboy 's solution or set publicPaths at the same way:

if (process.env.COMP_TYPE === 'css')
    mix.setPublicPath('static/dist/css');
else
    mix.setPublicPath('static/dist/js');

[chinloyal]

This is still an issue, even now in the 5.0 version. The workarounds are not suitable for me.

[irvv17]

Today I faced the same issue.
Without mix.extract() it works but I wanted it there.

So here's a workaround I found.
Separate the webpack.mix.js file into two files.

1. webpack.mix.js - it will serve the javascript compiling only. Remove any sass, less, or css file paths. Leave javascript filenames only.
   2 **webpack.css.js** (or name it whatever you want) - this one will serve the styles only. No javascript (unless it has no dynamic import syntax in it)

Next step is to add new scripts into your package.json file

"scripts": [
...
"css-watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules _--env.mixfile=webpack.css.mix_ --config=node_modules/laravel-mix/setup/webpack.config.js",
"css-dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules _--env.mixfile=webpack.css.mix_ --config=node_modules/laravel-mix/setup/webpack.config.js"
]

NOTE: On this step, make sure to match that --env.mixfile option with the second webpack file.

Final step: npm run dev and npm run css-dev
If you want to watch the files at the same time you'll need a second terminal window.
One should run and watch npm run watch and the second one - npm run css-watch

I hope it helps.

little archaic solution but very helpful

[irvv17]

This is still an issue, even now in the 5.0 version. The workarounds are not suitable for me.

Same problem here , thanks to post it.... thank god I dont update my webpack version to check if that work..

[ppshobi]

Same here, If I add mix.extract() results in proper js bundling but empties out the css files.

[paullaffitte]

Glad to see that I'm not the only one needing this to be fixed. By the way @JeffreyWay, could you reopen the issue please?

[jnickzlim]

Same here, getting empty app.css with .extract()

[ilamp]

Same thing is happening for one of my projects as well.

[keradan]

I have same problem :(

[ilamp]

@keradan For the time being you can probably use split you mix file into two and work that way. I'll post my setup shortly.

Install laravel-mix-merge-manifest
npm install laravel-mix-merge-manifest --save-dev

//webpack.css.mix.js

const mix = require('laravel-mix');
require('laravel-mix-merge-manifest');

mix.sass('resources/sass/app.scss', 'public/css')
  .version();

if (!mix.inProduction()) {
  mix.sourceMaps();
}

mix.mergeManifest();

//webpack.js.mix.js

const mix = require('laravel-mix');
require('laravel-mix-merge-manifest');

mix.react('resources/js/app.js', 'public/js')
  .extract([])
  .setPublicPath('public')
  .version();

if (!mix.inProduction()) {
  mix.sourceMaps();
}

mix.mergeManifest();

Update your package.json's scripts section to:

    "dev": "npm run development-js && npm run development-css",
    "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.js.mix",
    "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.css.mix",
    "prod": "npm run production-js && npm run production-css",
    "production-js": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.js.mix",
    "production-css": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.css.mix",
    "watch": "npm run development-js -- --watch & npm run development-css -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",

[chrisgrim]

@ilamp
I tried using your solution. If I run npm run watch it will only run the development-js. When I do a control-c to stop it, then it runs the development-css. Is this how it behaves for you?

[ilamp]

@ilamp
I tried using your solution. If I run npm run watch it will only run the development-js. When I do a control-c to stop it, then it runs the development-css. Is this how it behaves for you?

I've updated the instructions. Please try it now.

[HartleySan]

@ilamp
Like chrisgrim said, I'm doing exactly what you wrote, and I'm getting the same problem on the watcher. npm run dev works fine, but when I run npm run watch from a Visual Studio Code terminal window, I can save, for example, app.js and it builds, but if I try to save app.scss, nothing happens. If I reverse npm run development-js -- --watch and npm run development-css -- --watch, then just the CSS builds on save. Any ideas? Thank you.

[chrisgrim]

@HartleySan
Ilamps edit did work for me. Did you change the && to &?
```
old way
"watch": "npm run development-js -- --watch && npm run development-css -- --watch",

new way with only one &
"watch": "npm run development-js -- --watch & npm run development-css -- --watch",

[HartleySan]

@HartleySan
Ilamps edit did work for me. Did you change the && to &?

old way
"watch": "npm run development-js -- --watch && npm run development-css -- --watch",

new way with only one &
"watch": "npm run development-js -- --watch & npm run development-css -- --watch",

Yes, I did. I tried both & and &&, and got the same result.
Here's my scripts object in package.json:

"scripts": {
    "dev": "npm run development",
    "development": "npm run development-js && npm run development-css",
    "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.css.mix",
    "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.js.mix",
    "watch": "npm run development-js -- --watch & npm run development-css -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},

And here're my webpack.js.mix.js and webpack.css.mix.js files:

webpack.js.mix.js:

const mix = require('laravel-mix');
require('laravel-mix-merge-manifest');

mix
    .js('resources/js/app.js', 'public/js/')
    .extract(['vue'])
    .version();

mix.mergeManifest();

webpack.css.mix.js:

const mix = require('laravel-mix');
require('laravel-mix-merge-manifest');

mix
    .sass('resources/sass/vendor.scss', 'public/css/')
    .sass('resources/sass/app.scss', 'public/css/')
    .version();

mix.mergeManifest();

Any ideas? Thanks.

[chrisgrim]

Hmm I am relatively new to too this too, but let me post my mix

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

and my js and css mix files

const mix = require('laravel-mix');
require('laravel-mix-merge-manifest');

mix.sass('resources/sass/app-create.scss', 'public/assets')
    .sass('resources/sass/app-admin.scss', 'public/assets')
    .sass('resources/sass/app-lite.scss', 'public/assets')
    .sass('resources/sass/app.scss', 'public/assets')
    .mergeManifest();

if (mix.inProduction()) {
    mix.version();
}

const mix = require('laravel-mix');
require('laravel-mix-merge-manifest');

mix.js('resources/js/app.js', 'public/assets')
    .extract(['vue','vuelidate','leaflet','vuelidate-error-extractor','vue-cookies'])
    .mergeManifest()
    .webpackConfig({
    output: {
        chunkFilename: '[name].js?id=[chunkhash]',
    }
});


if (mix.inProduction()) {
    mix.version();
}

Also I am using iTerm for my editor? maybe that affects it.

[HartleySan]

@chrisgrim
Thanks for posting all that. I compared your scripts object to mine, character by character, and saw that you added the --watch option to development-js and development-css, which I didn't have.

All the same, after making the changes and trying, still, the same end result. I am using Windows 10, but with the Git Bash terminal integrated into Visual Studio Code, so not sure why that would matter. I will continue to investigate. Thanks.

[chrisgrim]

Sorry I couldn't help more. I will play with it a bit on my end and see if I can't find something else.

[ilamp]

@HartleySan Try using npm run watch-poll. I will see if I can test this on windows later.

[HartleySan]

@HartleySan Try using npm run watch-poll. I will see if I can test this on windows later.

Thanks for the reply, ilamp. I tried npm run watch-poll, but got the same result, which is to say, it still only builds either the CSS or JS, whichever is first in the watch command. I'm using Windows 10, by the way.

[gtempesta]

@rmondesilva was suggesting that without concurrently one of the two commands is not working. I installed it without trying other solutions and it has worked.

npm install concurrently --save-dev

I'm using two config files (webpack.mix.js and webpack.mix.css.js), and this is the relevant part of my package.json:

"scripts": {
  "css-dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --env.mixfile=webpack.mix.css --config=node_modules/laravel-mix/setup/webpack.config.js",
  "js-dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "development": "concurrently \"npm run css-dev\" \"npm run js-dev\"",
  "css-watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --env.mixfile=webpack.mix.css --config=node_modules/laravel-mix/setup/webpack.config.js",
  "js-watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "watch": "concurrently \"npm run css-watch\" \"npm run js-watch\"",
  "watch-poll": "npm run watch -- --watch-poll",
  "css-production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --env.mixfile=webpack.mix.css --config=node_modules/laravel-mix/setup/webpack.config.js",
  "js-production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "production": "concurrently \"npm run css-production\" \"npm run js-production\"",
  "dev": "npm run development",
  "prod": "npm run production"
}

Last two ones are obviously just aliases, and I don't believe I have ever used watch-poll. I hope this helps.

(I'm also using mergeManifest() in the two webpack.mix configuration files).

[HartleySan]

That npm module concurrently did the trick, gtempesta.
Thanks a lot.

[Ragash]

it's sad to see this issue still open after one year

[HartleySan]

it's sad to see this issue still open after one year

Indeed. So surprised why this hasn't been resolved yet. Really makes the build process, which is already a confusing black box, even more confusing.

[danialdezfouli]

It happens when I use React.lazy

[dkaufmann96]

Any news on this?

[Jossnaz]

@dkaufmann96 there is a gist with an example of concurrently and tailwind separately here: https://gist.github.com/Jossnaz/7cf182e794e515d068159ad71fcf7855

look at the yarn hot command
not sure how active @JeffreyWay still is on this project. Maybe he should onboard some people?
doesn't _seem_ to be very active on the project if you look here:
https://github.com/JeffreyWay?tab=overview&from=2020-09-01&to=2020-09-03

seems like he is busy with other interesting ideas

[JBtje]

A very simple example that causes this problem:

CSS file is generated w/o problem:

import en from './somefile';

CSS is 0 Bytes:

import('./somefile');

note that somefile is empty in my test.

Not sure if this is in any way helpfull... but who knows!

[dkaufmann96]

@Jossnaz thank you, I ended up using the workaround described in https://github.com/JeffreyWay/laravel-mix/issues/2070#issuecomment-503410615.
Lets hope this will be fixed eventually.

[JeffreyWay]

Just to clarify. This was a known issue with Mix and webpack 4. We tried for a long time to resolve it, but every option ended up breaking a different part of the Mix API.

The problem is solved in Mix v6 which now uses webpack 5.

[HartleySan]

Just to clarify. This was a known issue with Mix and webpack 4. We tried for a long time to resolve it, but every option ended up breaking a different part of the API.

The problem is solved in Mix v6 which now uses webpack 5.

Great to hear, Jeffrey. Any ETA on a Mix v6 release? Thank you.

[JeffreyWay]

This coming week.

[kissjacky]

This coming week.

any release of Mix v6 ? thx