fix: add semicolon to avoid `Uncaught TypeError` on Webpack v5 by abhchand · Pull Request #561 · webpack/mini-css-extract-plugin

abhchand · 2020-08-05T15:41:36Z

A missing semicolon after the closing } when defining
installedCssChunks causes the object { "common": 0} to be
incorrectly interpreted as a function

This PR contains a:

Motivation / Use-Case

fixes #560

The compiled javascript pack is generated by Webpack v5 as follows:

...

/******/  // object to store loaded CSS chunks
/******/  var installedCssChunks = {
/******/    "common": 0
/******/  }/* webpack/runtime/jsonp chunk loading */
/******/  (() => {
/******/    // object to store loaded and loading chunks
/******/    // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/    // Promise = chunk loading, 0 = chunk loaded
/******/    var installedChunks = {
/******/      "common": 0
/******/    };

....

Breaking Changes

n/a

Additional Info

See: #560 The compiled javascript pack is generated as follows: ``` ... /******/ // object to store loaded CSS chunks /******/ var installedCssChunks = { /******/ "common": 0 /******/ }/* webpack/runtime/jsonp chunk loading */ /******/ (() => { /******/ // object to store loaded and loading chunks /******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched /******/ // Promise = chunk loading, 0 = chunk loaded /******/ var installedChunks = { /******/ "common": 0 /******/ }; .... ``` A missing semicolon after the closing `}` when defining `installedCssChunks` causes the object `{ "common": 0}` to be incorrectly interpreted as a function

jsf-clabot · 2020-08-05T15:41:38Z

All committers have signed the CLA.

codecov · 2020-08-05T15:43:15Z

Codecov Report

Merging #561 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #561   +/-   ##
=======================================
  Coverage   88.55%   88.55%           
=======================================
  Files           5        5           
  Lines         428      428           
  Branches       96       96           
=======================================
  Hits          379      379           
  Misses         47       47           
  Partials        2        2

Impacted Files	Coverage Δ
src/index.js	`87.85% <ø> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b146549...7000522. Read the comment docs.

alexander-akait · 2020-08-05T16:05:25Z

Very strange what CI failed 😕 Need investigate

abhchand · 2020-08-05T20:02:16Z

Yeah it seems it's failing for node v10 and webpack@next. I'm seeing 1 failing test when I try this locally on OS X (there seem to be more failures when the CI runs the same thing on Ubutnu though 🤔 )

This test is also failing on the latest master, so it's probably note related to my commit/fix.
More than likely it is something related to webpack@next compatibility.

Unfortunately I'm not sure I know enough about the plugin to easily debug this quickly

● TestCases › hmr should compile to the expected result

    expect(received).toEqual(expected) // deep equality

    - Expected
    + Received

    @@ -1,6 +1,30 @@
      /******/ (() => { // webpackBootstrap
    + /******/ 	// The module cache
    + /******/ 	var __webpack_module_cache__ = {};
    + /******/
    + /******/ 	// The require function
    + /******/ 	function __webpack_require__(moduleId) {
    + /******/ 		// Check if module is in cache
    + /******/ 		if(__webpack_module_cache__[moduleId]) {
    + /******/ 			return __webpack_module_cache__[moduleId].exports;
    + /******/ 		}
    + /******/ 		// Create a new module (and put it into the cache)
    + /******/ 		var module = __webpack_module_cache__[moduleId] = {
    + /******/ 			// no module.id needed
    + /******/ 			// no module.loaded needed
    + /******/ 			exports: {}
    + /******/ 		};
    + /******/
    + /******/ 		// Execute the module function
    + /******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
    + /******/
    + /******/ 		// Return the exports of the module
    + /******/ 		return module.exports;
    + /******/ 	}
    + /******/
    + /************************************************************************/
      /******/ 	/************************************************************************/
      // extracted by mini-css-extract-plugin
          if(false) { var cssReload; }
      ··
      /******/ })()

      21 |       const actualContent = fs.readFileSync(path.resolve(actual, file), 'utf8');
      22 |
    > 23 |       expect(actualContent).toEqual(content);
         |                             ^
      24 |     }
      25 |   }
      26 | }

      at compareDirectory (test/TestCases.test.js:23:29)
      at test/TestCases.test.js:99:13
      at compiler.close.err2 (node_modules/webpack/lib/webpack.js:123:6)
      at node_modules/webpack/lib/HookWebpackError.js:69:3
      at Hook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
      at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (node_modules/tapable/lib/Hook.js:18:14)
      at Cache.shutdown (node_modules/webpack/lib/Cache.js:150:23)
      at Compiler.close (node_modules/webpack/lib/Compiler.js:996:14)
      at compiler.run (node_modules/webpack/lib/webpack.js:122:14)
      at finalCallback (node_modules/webpack/lib/Compiler.js:367:32)
      at cache.storeBuildDependencies.err (node_modules/webpack/lib/Compiler.js:431:17)
      at node_modules/webpack/lib/HookWebpackError.js:69:3
      at Hook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
      at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (node_modules/tapable/lib/Hook.js:18:14)
      at Cache.storeBuildDependencies (node_modules/webpack/lib/Cache.js:122:37)
      at hooks.done.callAsync.err (node_modules/webpack/lib/Compiler.js:427:19)
      at Hook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
      at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (node_modules/tapable/lib/Hook.js:18:14)
      at emitRecords.err (node_modules/webpack/lib/Compiler.js:424:23)
      at Compiler.emitRecords (node_modules/webpack/lib/Compiler.js:741:39)
      at emitAssets.err (node_modules/webpack/lib/Compiler.js:416:11)
      at hooks.afterEmit.callAsync.err (node_modules/webpack/lib/Compiler.js:723:14)
      at Hook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
      at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (node_modules/tapable/lib/Hook.js:18:14)
      at asyncLib.forEachLimit.err (node_modules/webpack/lib/Compiler.js:720:27)
      at node_modules/neo-async/async.js:2818:7
      at done (node_modules/neo-async/async.js:3522:9)
      at alreadyWritten (node_modules/webpack/lib/Compiler.js:582:8)
      at outputFileSystem.readFile (node_modules/webpack/lib/Compiler.js:653:19)
      at node_modules/graceful-fs/graceful-fs.js:123:16

alexander-akait · 2020-08-06T10:37:27Z

Can you update snapshot?

abhchand · 2020-08-06T15:52:59Z

@evilebottnawi, @sokra - I added a new commit (bf2de3d) to update the snapshot for the failing test (test/cases/hmr/expected/webpack-5/main.js).

Everything passes for me locally now with webpack 5.

The CI is still failing for unrelated tests, and it seems to be because of a setup/configuration issue with the test directories. These are probably outside of the scope of this fix, right? Example:

 ● TestCases › js-hash should compile to the expected result

    ENOENT: no such file or directory, open '/home/runner/work/mini-css-extract-plugin/mini-css-extract-plugin/test/js/js-hash/style.922798e08e96756adb4a.1.css'

      19 |     } else if (stats.isFile()) {
      20 |       const content = fs.readFileSync(path.resolve(expected, file), 'utf8');
    > 21 |       const actualContent = fs.readFileSync(path.resolve(actual, file), 'utf8');
         |                                ^
      22 | 
      23 |       expect(actualContent).toEqual(content);
      24 |     }

      at compareDirectory (test/TestCases.test.js:21:32)
      at test/TestCases.test.js:104:13
      at compiler.close.err2 (node_modules/webpack/lib/webpack.js:123:6)
      at node_modules/neo-async/async.js:2830:7
      at done (node_modules/neo-async/async.js:2865:11)
      at node_modules/neo-async/async.js:2818:7
      at node_modules/webpack/lib/HookWebpackError.js:69:3
      at Hook.eval [as callAsync] (eval at create (node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)

Thanks again!

alexander-akait · 2020-08-06T16:07:45Z

Yes, it is outside, I will look at this tomorrow and we can do patch release

alexander-akait · 2020-08-06T17:19:48Z

@abhchand I think we need to add tests to avoid future regressions, can you do it? Just simple test (only for webpack@5)

abhchand · 2020-08-08T22:43:09Z

@evilebottnawi - I'll have to figure out how the tests work, so it might take me a few days. But sure, I'll give it a try.

Adding 2 tests: * `dependOn` - Checks that `dependOn` feature works * `dependOn-multiple-files-per-entry` - Webpack 5 supports specifying multiple files per entry point in combination with the `dependOn` key Motivated by the issue described in #560

abhchand · 2020-08-09T18:24:07Z

@evilebottnawi - I added 2 tests for the dependOn functionality that Webpack supports (7000522), since that's what caused the semi-colon error above.

1. `dependOn`

This tests that the dependOn keyword works correctly with MiniCSSExtractPlugin

  entry: {
    entry1: { import: './entryA.js', dependOn: 'common' },
    common: './entryB.js',
  },

2. `dependOn-multiple-files-per-entry`

This tests the issue that I opened (#560) related to how dependOn behaves with multiple files per entry, which is newly supported in Webpack 5.

  entry: {
    entry1: { import: ['./entryA.js', './entryB.js'], dependOn: 'common' },
    common: ['./entryC.js', './entryD.js'],
  },

Problem

I ran into one issue that you might know how to fix:

Both of these tests pass on Webpack 5, but they fail on Webpack 4 (on my local machine) because the webpack.config.js fails validation.

How do I make theses tests run only against webpack5?

Thanks.

alexander-akait · 2020-08-10T12:25:01Z

I think we can add filter.js file in each directory, where return true means run test return false means not run test, so we just will not run tests for webpack@5 on webpack@4

alexander-akait · 2020-08-10T12:25:20Z

But i think it is out work, not you, I will merge it as is and fix tests in near future (today)

alexander-akait · 2020-08-10T14:25:00Z

WIP on tests, thanks for the PR

abhchand · 2020-08-10T14:42:21Z

@evilebottnawi - Спасибо за вашу помощь :)

alexander-akait · 2020-08-10T14:46:52Z

@abhchand Thanks for using webpack

This latest build includes a fix required for Webpack5 See: webpack/mini-css-extract-plugin#561

abhchand mentioned this pull request Aug 5, 2020

Uncaught TypeError when using multiple files per entry on Webpack v5 #560

Closed

fix: updating hmr test snapshot to work with webpack 5

bf2de3d

test: add webpack5 tests for dependOn

7000522

Adding 2 tests: * `dependOn` - Checks that `dependOn` feature works * `dependOn-multiple-files-per-entry` - Webpack 5 supports specifying multiple files per entry point in combination with the `dependOn` key Motivated by the issue described in #560

alexander-akait merged commit 3974210 into webpack:master Aug 10, 2020

vankop mentioned this pull request Sep 21, 2020

chunk with dependOn results in invalid Js webpack/webpack#11505

Closed

abhchand added a commit to abhchand/girder that referenced this pull request Feb 14, 2021

Upgrading to mini-css-extract-plugin@0.10.0

81a93b5

This latest build includes a fix required for Webpack5 See: webpack/mini-css-extract-plugin#561

abhchand added a commit to abhchand/reely that referenced this pull request Feb 15, 2021

[Girder] Upgrading to mini-css-extract-plugin@0.10.0

83039fa

This latest build includes a fix required for Webpack5 See: webpack/mini-css-extract-plugin#561

snyk-bot mentioned this pull request Feb 22, 2022

[Snyk] Upgrade mini-css-extract-plugin from 0.9.0 to 0.12.0 dfds/micro-frontend-poc#9

Closed

abhisheksurpur mentioned this pull request Jul 12, 2024

[Snyk] Upgrade mini-css-extract-plugin from 0.5.0 to 0.12.0 happygears/aws-s3-bucket-list#32

Open

CxsLucyfer mentioned this pull request Jul 16, 2024

[Snyk] Upgrade mini-css-extract-plugin from 0.4.5 to 0.12.0 CxsLucyfer/vue-design-system#3

Open

mightysai1997 mentioned this pull request Aug 9, 2024

[Snyk] Upgrade mini-css-extract-plugin from 0.4.5 to 0.12.0 mightysai1997/react-typescript-samples#2

Open

jonkiky mentioned this pull request Sep 28, 2024

[Snyk] Upgrade mini-css-extract-plugin from 0.5.0 to 0.12.0 CBIIT/INS-WebPortal#339

Closed

Uh oh!

Conversation

abhchand commented Aug 5, 2020 • edited by alexander-akait Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation / Use-Case

Breaking Changes

Additional Info

Uh oh!

jsf-clabot commented Aug 5, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Aug 5, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

alexander-akait commented Aug 5, 2020

Uh oh!

abhchand commented Aug 5, 2020

Uh oh!

alexander-akait commented Aug 6, 2020

Uh oh!

abhchand commented Aug 6, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexander-akait commented Aug 6, 2020

Uh oh!

alexander-akait commented Aug 6, 2020

Uh oh!

abhchand commented Aug 8, 2020

Uh oh!

abhchand commented Aug 9, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

1. dependOn

2. dependOn-multiple-files-per-entry

Problem

Uh oh!

alexander-akait commented Aug 10, 2020

Uh oh!

alexander-akait commented Aug 10, 2020

Uh oh!

alexander-akait commented Aug 10, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

abhchand commented Aug 10, 2020

Uh oh!

alexander-akait commented Aug 10, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

abhchand commented Aug 5, 2020 •

edited by alexander-akait

Loading

jsf-clabot commented Aug 5, 2020 •

edited

Loading

codecov Bot commented Aug 5, 2020 •

edited

Loading

abhchand commented Aug 6, 2020 •

edited

Loading

abhchand commented Aug 9, 2020 •

edited

Loading

1. `dependOn`

2. `dependOn-multiple-files-per-entry`

alexander-akait commented Aug 10, 2020 •

edited

Loading