Core-JS "3" using v3.6.5 results in mini-css-extract-plugin error but v2.6.11 does not
- 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
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