Compiles in dev, fails in prod: TypeError: $ is not a function

• 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.

[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.

[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