Mini-css-extract-plugin: Compiles in dev, fails in prod: TypeError: $ is not a function

[emilmuller]

• Operating System: Windows 10
• Node Version: 12.13.1
• NPM Version: 6.12.1
• webpack Version: 4.41.2
• mini-css-extract-plugin Version: 0.8.0

Expected Behavior

Compiles successfully

Actual Behavior

Crashes when using prod config. Dev works fine. Getting about a gazillion errors. It seems, for every .ts or .tsx files that imports a sass file. Error is always:

TypeError: $ is not a function

If I set prod and dev webpack config files to be identical, it suffices to set --mode=production when running webpack, to trigger the crash.

Here is one for of a very simple react component that imports _index.scss:

ERROR in ./Client/src/components/common/ValidationMessage/_index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: $ is not a function
    at Object.<anonymous> (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:2936:1)
    at __webpack_require__ (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:21:30)
    at Object.<anonymous> (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:2886:1)
    at __webpack_require__ (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:21:30)
    at Object.<anonymous> (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:1983:26)
    at __webpack_require__ (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:21:30)
    at Object.<anonymous> (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:3994:33)
    at __webpack_require__ (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:21:30)
    at Object.<anonymous> (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:2859:15)
    at __webpack_require__ (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:21:30)
    at Object.<anonymous> (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:1921:33)
    at __webpack_require__ (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:21:30)
    at Object.<anonymous> (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:1216:1)
    at __webpack_require__ (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:21:30)
    at Object.<anonymous> (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:92:1)
    at __webpack_require__ (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:21:30)
    at Object.<anonymous> (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:2467:23)
    at __webpack_require__ (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:21:30)
    at Object.<anonymous> (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:458:24)
    at __webpack_require__ (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:21:30)
    at Object.<anonymous> (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:1122:1)
    at __webpack_require__ (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:21:30)
    at Object.<anonymous> (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:404:27)
    at __webpack_require__ (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:21:30)
    at Object.<anonymous> (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:2298:16)
    at __webpack_require__ (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:21:30)
    at Object.<anonymous> (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:1689:37)
    at __webpack_require__ (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:21:30)
    at Object.<anonymous> (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:2259:1)
    at __webpack_require__ (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:21:30)
    at Object.<anonymous> (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:622:16)
    at __webpack_require__ (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:21:30)
    at Object.<anonymous> (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:273:1)
    at __webpack_require__ (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:21:30)
    at Object.<anonymous> (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:131:1)
    at __webpack_require__ (C:\Users\emimue\source\repos\eco\node_modules\css-loader\dist\cjs.js??ref--6-1!C:\Users\emimue\source\repos\eco\node_modules\postcss-loader\src\index.js??ref--6-2!C:\Users\emimue\source\repos\eco\node_modules\sass-loader\dist\cjs.js??ref--6-3!C:\Users\emimue\source\repos\eco\Client\src\components\common\ValidationMessage\_index.scss:21:30)
 @ ./Client/src/components/common/ValidationMessage/index.tsx 1:0-39 8:15-25 10:100-110 14:15-25
 @ ./Client/src/components/pages/SignupPage/index.tsx
 @ ./Client/src/index.tsx

Code

// some npm scripts:
"clean": "npm run clean:scripts",
"clean:scripts": "node ./node_modules/rimraf/bin.js ./wwwroot",
"build:scripts:dev": "npm run clean:scripts && node ./node_modules/webpack-cli/bin/cli.js --config Client/webpack.config.dev.js --mode=development",
"build:scripts:prod": "npm run clean:scripts && node --max-old-space-size=2048 ./node_modules/webpack-cli/bin/cli.js --config Client/webpack.config.prod.js --mode=production",

Please see this gist for webpack.config.dev.js and webpack.config.prod.js: https://gist.github.com/emilmuller/22b8f05e1294126edb94662015c39f4c

How Do We Reproduce?

I am unable to publish my source code due to this being an enterprise application.

Debugging?

I would really like to try and debug this myself, but unsure how to. The stack traces don't make no sense as they refer to line numbers that do not exist. I'm assuming these line numbers occur after transpilation.

[alexander-akait]

Please create reproducible test repo, without this we can't help and issue will be closed, thanks

[alexander-akait]

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!

[timwright12]

I have the same error happening on this branch: https://github.com/timwright12/webpack-starter/tree/update-all-broken

[EnjoyChan]

any solution?

[eugenegantz]

I have same problem when "module:@babel/preset-env" option useBuiltIns = "usage".
Changing to useBuiltIns = "entry" solved this problem.
Probably it could help you.

[EvgSur]

I have the same error happening on this branch: https://github.com/timwright12/webpack-starter/tree/update-all-broken

so did you cope with this issue?

[HXWfromDJTU]

I have same problem when "module:@babel/preset-env" option useBuiltIns = "usage".
Changing to useBuiltIns = "entry" solved this problem.
Probably it could help you.

same issue here,and "entry" replacement also works

[jameswilddev]

Same issue here, using "entry" also works.

[PatrickHollweck]

I found a solution to this problem! It happens when you use babel and transpile your node_modules!

Explanation

Before mini-css can extract your CSS it is put into a js module by css-loader as a string. This javascript module will then be detected by babel any processed like any other javascript file. Since you guys use usage with babel-preset-env babel will include an import to a core-js polyfill for anything it deems necessary. These core-js polyfills use a function named $ from core-js to do their poly filling work. This function is not available when mini-css gets the code, which leads to this error.

Solution

Disallow css-loader to be transpiled by babel by excluding it from your node_modules rule.
I found this to work just fine: exclude: /node_modules\/(css-loader)/,.

This way...

• All other node modules will still be transpiled
• You can keep using the usage babel-preset-env mode

See this stack-overflow issue: https://stackoverflow.com/questions/58489738/minicssextractplugin-error-on-entry-point-build

[khadro]

@PatrickHollweck

This answer took me hours to find, but triggered just the right part to fix my issue. I was seeing a "$ is not defined" error, but only while my webpack was trying to build a CSS file. If I removed the CSS file everything worked.

So for anyone else who is using Yarn2, don't be stupid like me. Don't forget to add your "./.yarn/cache/** rule to your ignored list in your webpack watcther. You're going to have a bad time.