wildpeaks/2020-package-webpack-configs

mini-css-extract-plugin 1.x

cecilemuller opened this issue · 5 comments

The update breaks some of the tests: #833
I probably need to solve #657 as well.

Hmm, I ran into something odd (which might be unrelated).

This fails:

import {myclass} from "./application.css";
console.log("[myclass]", myclass); // undefined

This works:

import myclasses from "./application.css";
const {myclass} = myclasses;
console.log("[myclass]", myclass); // the expected value

Yet it seems unlikely to come from Webpack or Typescript (despite being the most likely candidates) given tests don't fail unless I upgrade mini-css-extract-plugin.

It might be the combination of some overzealous optimization and the plugin changing the way it wraps the result that produces this behavior.

After creating a simpler test case, I can confirm that only the newer version of the CSS plugin triggers the "export not found in .css" issue, 0.11.3 works fine.

I'll simplify the test case further (for now I kept all loaders, to make sure it can reproduce the issue) to pinpoint more precisely what is causing it.

I think I found the issue: v1 exports as ES Module by default: https://github.com/webpack-contrib/mini-css-extract-plugin#esmodule as default export.

So I can make it either make it switch back to CommonJS (it works so far, but I'd rather not use CJS) or see if it can be tweaked (I suspect it needs both css-loader and the plugin exported as ESM to fix this properly).

After testing, no, adding esModule: true to css-loader isn't enough, so I'll just set esModule: false in the Mini CSS plugin, then it should work the same way as the old version.

esModule: false passes the tests 🎉