React CSS modules with laravel mix

I want to use react-css-modules with laravel mix. I always will get the following output when I ran yarn run dev. It only work fine when I am using laravel mix 0.10.0 but it wont work for other laravel mix version. Got anyone have any ideas on it?

Error(terminal)

Last login: Mon Aug 21 16:11:43 on ttys005
☁  ~  cd Developer/vanilla-project
☁  vanilla-project  yarn run dev
yarn run v0.24.6
$ npm run development

> @ development /Users/davidong/Developer/vanilla-project
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 95% emitting

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                             4:39:02 PM

 error  in ./resources/assets/js/components/Sample/SampleComponent/SampleComponent.scss

Module build failed:
    color: red;
              ^
      Invalid CSS after "module.exports": expected "{", was '= {"error":"SampleC'
      in /Users/davidong/Developer/vanilla-project/resources/assets/js/components/Sample/SampleComponent/SampleComponent.scss (line 2, column 16)

 @ ./resources/assets/js/components/Sample/SampleComponent/SampleComponent.scss 4:14-471
 @ ./resources/assets/js/components/Sample/SampleComponent/SampleComponent.js
 @ ./resources/assets/js/containers/Sample/SampleContainer.js
 @ ./resources/assets/js/pages/SamplePage.js
 @ ./resources/assets/js/routes.js
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

        Asset      Size  Chunks                    Chunk Names
   /js/app.js   1.22 MB       0  [emitted]  [big]  /js/app
 /css/app.css   0 bytes       0  [emitted]         /js/app
css/style.css  50 bytes       0  [emitted]         /js/app
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/davidong/.npm/_logs/2017-08-21T08_39_03_196Z-debug.log
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

webpack.mix.js

let mix = require('laravel-mix');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.webpackConfig({
    module: {
        rules: [{
            test: /resources\/assets\/js\/.+?\.scss$/,
            loader: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass-loader'
            })
        }]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'css/style.css',
            allChunks: true
        })
    ],
    resolve: {
        modules: [
            path.resolve('./resources/assets/js'),
            path.resolve('./node_modules')
        ]
    }
});

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