Version 3.0.0-alpha.0 not compatible with Laravel-mix 6.0.0-alpha.1

[gags88]

Hi,

I was using v2 with laravel-mix 5 as below:

mix.react('resources/js/app.js', 'public/js').reactCSSModules('[name]__[hash:base64]').sass('resources/sass/app.scss', 'public/css');

and now updating laravel-mix to v 6.0.0-alpha.1 and laravel-mix-react-css-modules to 3-aplha, it is no more working.

In Laravel-mix v 6.0.0-alpha.1, syntax has been updated to

mix.js('resources/js/app.js', 'public/js').react().reactCSSModules('[name]__[hash:base64]').sass('resources/sass/app.scss', 'public/css');

Above line does not work in case of CSS modules.

[leinelissen]

Hi there, thanks for your report! Could you help me out by dumping the webpack config and pasting the resulting config here? That'll be a massive help in veryfying what's going wrong.

Cheers, Lei

[gags88]

Hi @leinelissen ,

Here we go

WebpackConfig:

production: true, hmr: false, hmrOptions: { host: 'localhost', port: '8080' }, postCss: [], autoprefixer: {}, publicPath: 'public', runtimeChunkPath: null, notifications: false, sourcemaps: false, resourceRoot: '/', imgLoaderOptions: { enabled: true, gifsicle: {}, mozjpeg: {}, optipng: {}, svgo: {} }, fileLoaderDirs: { images: 'images', fonts: 'fonts' }, babel: [Function: babel], processCssUrls: true, terser: { parallel: true, terserOptions: [Object] }, cssNano: {}, cleanCss: {}, webpackConfig: { output: {} }, babelConfig: { presets: [Array] }, clearConsole: true, vue: {}, merge: [Function: merge] }

Mix Object:

Mix { paths: Paths { rootPath: '/Users/xxx/xxxx/xxxx/xxx' }, manifest: Manifest { manifest: {}, name: 'mix-manifest.json' }, dispatcher: Dispatcher { events: { init: [Array], 'loading-entry': [Array], 'loading-rules': [Array], 'loading-plugins': [Array], configReady: [Array] } }, tasks: [ VersionFilesTask { data: [Object], assets: [], isBeingWatched: false } ], bundlingJavaScript: true, components: Components { components: [ cssWebpackConfig: [CssWebpackConfig], notifications: [Notifications], purifyCss: [PurifyCss], extend: [Extend], browserSync: [BrowserSync], webpackConfig: [WebpackConfig], js: [JavaScript], react: [React], sass: [Sass], dump: [LaravelMixDump], version: [Version], disableNotifications: [DisableNotifications] ] }, registrar: ComponentRegistrar { components: { js: [Function (anonymous)], preact: [Function (anonymous)], react: [Function (anonymous)], coffee: [Function (anonymous)], typeScript: [Function (anonymous)], ts: [Function (anonymous)], less: [Function (anonymous)], sass: [Function (anonymous)], stylus: [Function (anonymous)], postCss: [Function (anonymous)], css: [Function (anonymous)], cssWebpackConfig: [Function (anonymous)], browserSync: [Function (anonymous)], combine: [Function (anonymous)], scripts: [Function (anonymous)], babel: [Function (anonymous)], styles: [Function (anonymous)], minify: [Function (anonymous)], copy: [Function (anonymous)], copyDirectory: [Function (anonymous)], autoload: [Function (anonymous)], alias: [Function (anonymous)], vue: [Function (anonymous)], version: [Function (anonymous)], extend: [Function (anonymous)], extract: [Function (anonymous)], extractVendors: [Function (anonymous)], notifications: [Function (anonymous)], disableNotifications: [Function (anonymous)], disableSuccessNotifications: [Function (anonymous)], purifyCss: [Function (anonymous)], webpackConfig: [Function (anonymous)], dumpWebpackConfig: [Function (anonymous)], dump: [Function (anonymous)], then: [Function (anonymous)], after: [Function (anonymous)], override: [Function (anonymous)], sourceMaps: [Function (anonymous)], setPublicPath: [Function (anonymous)], setResourceRoot: [Function (anonymous)], options: [Function (anonymous)], when: [Function (anonymous)], babelConfig: [Function (anonymous)], before: [Function (anonymous)], inProduction: [Function (anonymous)], reactCSSModules: [Function (anonymous)], dd: [Function (anonymous)] } } }

[leinelissen]

Hi there! Sorry for the long wait, busy weeks and all.

Apparently, Laravel Mix added support for CSS Modules in v6 (see https://github.com/JeffreyWay/laravel-mix/pull/2578). This means you would no longer need to use this plugin to get everything working. Rather, if you import a file ending in .module.css, Laravel Mix will automatically convert it as if it's a CSS Module. If you need any of the stuff that's provide by the react-css-modules-babel-plugin, you can just create a .babelrc file and include the config that is generated by this function.

That all being said, if you do need the control over the naming, I will push a small update to ensure it keeps working. Nonetheless, thanks for your support!

[leinelissen]

I just published v3.0.0-alpha.1, which should resolve the issues you mentioned. Update by calling npm install laravel-mix-react-css-modules@next. Cheers!

[gags88]

Sure.. Thanks for the update. I will try and let you know how it goes