Laravel-mix: Mix not exporting the same js if sass is involved

[RomainGoncalves]

Hey

• Laravel Mix Version: ^0.8.8
• Node Version (node -v): 7.7.3
• NPM Version (npm -v): 4.1.2
• OS: Mac Sierra

Description:

Not sure really how to explain this. I created a new folder, yarn add laravel-mix. And then setup for Mix to compile react. Somehow when I use this:

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

mix.webpackConfig({
        output: {
            library: 'walterwhite',
            libraryTarget: 'umd',
            umdNamedDefine: true
        }
    })
    .react('src/index.js', 'dist/js')
    .browserSync('mysite.dev');

Then everything works fine. My library is exported, I can then use it in another project no problem.
However, if I add a line to compile SASS at the same time, like so:

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

mix.webpackConfig({
        output: {
            library: 'walterwhite',
            libraryTarget: 'umd',
            umdNamedDefine: true
        }
    })
    .react('src/index.js', 'dist/js')
    .sass('src/app.scss', 'dist/css')
    .browserSync('mysite.dev');

It doesn't compile properly anymore and my library is un-usable. No matter where I place the sass compile, wether it is above, under react or even in a separate instance of mix, it doesn't work. There are no failures, warnings or errors being displayed.

I had a look at what is compiled and there is a slight difference between the 2 configs like for example the number of exports is greater by 1 when I add sass. Maybe there's a reason for that

Does that make sense to someone?

Thanks for any help

[JeffreyWay]

I'm not sure, but we're adding a mix.standaloneSass() option to the next tagged release that would run Sass separate from your Webpack build. So this would fix that.

[lazabogdan]

Jizaz, this took a few hours of my life.

Sure, we could use standaloneSass like @JeffreyWay suggested however the library's css won't have auto vendor prefixes etc. Not cool.

Ok, so @RomainGoncalves you can fix this by adding a mock entry first.

mix.js('node_modules/laravel-mix/src/builder/mock-entry.js', 'mix.js')
  .react('src/index.js', 'dist/js')
  .sass('src/app.scss', 'dist/css')

And then just add /mix.js to .gitignore.
Voila!

[gavatwork]

Jizaz, this took a few hours of my life.

Sure, we could use standaloneSass like @JeffreyWay suggested however the library's css won't have auto vendor prefixes etc. Not cool.

Ok, so @RomainGoncalves you can fix this by adding a mock entry first.

mix.js('node_modules/laravel-mix/src/builder/mock-entry.js', 'mix.js')
  .react('src/index.js', 'dist/js')
  .sass('src/app.scss', 'dist/css')

And then just add /mix.js to .gitignore.
Voila!

Thank you soooo much! This was a problem with librarytarget var and window too. Works a charm.