babel / babel/babel

Core-JS "3" using v3.6.5 results in mini-css-extract-plugin error but v2.6.11 does not

Open
#11,518 2 comments 8 reactions 0 assignees View on GitHub
i: needs triage
Dominant language
TypeScript
Stars
44k
Forks
6k
Avg merge
5d 15h
Merged PRs (30d)
23

Description

## Bug Report

I have set up my Webpack 4 config to handle `babel-loader` like this:

```
{
module : {
rules : [{
test : /\.js$/,
// Some module should not be transpiled by Babel
// See https://github.com/zloirock/core-js/issues/743#issuecomment-572074215
exclude: ['/node_modules/', /\bcore-js\b/, /\bwebpack\/buildin\b/, /@babel\/runtime-corejs3/],
loader : "babel-loader",
options : {
babelrc : false,
// Fixes "TypeError: __webpack_require__(...) is not a function"
// https://github.com/webpack/webpack/issues/9379#issuecomment-509628205
// https://babeljs.io/docs/en/options#sourcetype
sourceType : "unambiguous",
presets : [
["@babel/preset-env", {
// Webpack supports ES Modules out of the box and therefore doesn’t require
// import/export to be transpiled resulting in smaller builds, and better tree
// shaking. See https://webpack.js.org/guides/tree-shaking/#conclusion
modules : false,
// Adds specific imports for polyfills when they are used in each file.
// Take advantage of the fact that a bundler will load the polyfill only once.
useBuiltIns : "usage",
corejs : {
version : "3",
proposals : true
}
}]
]
}
}
}
}
```
I expect my build to build but it does not. I get an error stating:

> Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
> TypeError: Cannot convert undefined or null to object
> at hasOwnProperty ()
> at module.exports.module.exports (C:\Site\node_modules\css-loader\dist\cjs.js!C:\Site\src\assets\css\site.css:115:25)

There is nothing wrong with the CSS file at all, and nothing at line 115 that is invalid. I know this because the same error occurs with an empty CSS file!

If I run the same build but downgrade to `core-js@2.6.11` in my `package.json` and change `corejs: { version: "3" }` to `corejs: { version: "2" }` then everything compiles fine.

In my `node_modules` and my own code I am unable to find anything that starts with `import 'core-js/es6/'` or `import 'core-js/es7/array'`.

What is the fix for this?

**Environment**
- Babel version(s): "@babel/cli": "^7.8.4", "@babel/core": "^7.9.6", "babel-loader": "^8.1.0",
- Node/npm version: v13.13.0
- OS: Windows 10
- How you are using Babel: `loader` in Webpack 4

**Possible Solution**
import 'core-js/es6/'; and import 'core-js/es7/'; should be changed to `import 'core-js/es/';` but I have no code in my project anywhere (including node_modules) that uses such import statements

Contributor guide

Open the contributing guide

Research direction

Start with the Webpack 4 babel-loader configuration and the listed Babel, core-js, mini-css-extract-plugin, and css-loader versions. Reproduce the build with core-js 3.6.5 and then 2.6.11, comparing the resulting loader error and stack location in css-loader. Done means the build succeeds with core-js 3 without requiring changes to the CSS.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, javascript, webpack
Domain
build-system, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.