TypeError: Cannot read property 'get' of undefined when used with webpack 5 #1129

capaj · 2018-12-23T21:59:55Z

Expected behaviour

TypeError should not be thrown

Current behaviour

TypeError is thrown

Environment

capaj@capaj-i7-4771:~/git_projects/looop/project-alpha$ node -e "var os=require('os');console.log('Node.js ' + process.version + '\n' + os.platform() + ' ' + os.release())"
Node.js v8.11.4
linux 4.18.0-12-generic
capaj@capaj-i7-4771:~/git_projects/looop/project-alpha$ npm --version
6.4.1

capaj@capaj-i7-4771:~/git_projects/looop/project-alpha$ npm ls html-webpack-plugin
looop@ /home/capaj/git_projects/looop/project-alpha
└─┬ @storybook/react@4.1.2
  └─┬ @storybook/core@4.1.2
    └── html-webpack-plugin@4.0.0-beta.5

I have webpack@5.0.0-alpha.1

/home/capaj/git_projects/looop/project-alpha/node_modules/html-webpack-plugin/lib/compiler.js:341
    const timestamp = fileTimestamps.get(fileDependency);
                                     ^

TypeError: Cannot read property 'get' of undefined
    at childCompiler.fileDependencies.some (/home/capaj/git_projects/looop/project-alpha/node_modules/html-webpack-plugin/lib/compiler.js:341:38)
    at Array.some (<anonymous>)
    at isChildCompilerCacheOutdated (/home/capaj/git_projects/looop/project-alpha/node_modules/html-webpack-plugin/lib/compiler.js:340:59)
    at Object.hasOutDatedTemplateCache (/home/capaj/git_projects/looop/project-alpha/node_modules/html-webpack-plugin/lib/compiler.js:321:16)
    at compiler.hooks.thisCompilation.tap (/home/capaj/git_projects/looop/project-alpha/node_modules/html-webpack-plugin/index.js:132:25)
    at SyncHook.eval [as call] (eval at create (/home/capaj/git_projects/looop/project-alpha/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Compiler.newCompilation (/home/capaj/git_projects/looop/project-alpha/node_modules/webpack/lib/Compiler.js:526:30)
    at hooks.beforeCompile.callAsync.err (/home/capaj/git_projects/looop/project-alpha/node_modules/webpack/lib/Compiler.js:567:29)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/capaj/git_projects/looop/project-alpha/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:6:1)
    at Compiler.compile (/home/capaj/git_projects/looop/project-alpha/node_modules/webpack/lib/Compiler.js:562:28)
    at compiler.hooks.watchRun.callAsync.err (/home/capaj/git_projects/looop/project-alpha/node_modules/webpack/lib/Watching.js:107:19)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/capaj/git_projects/looop/project-alpha/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at compiler.cache.endIdle.err (/home/capaj/git_projects/looop/project-alpha/node_modules/webpack/lib/Watching.js:70:33)
    at AsyncParallelHook.eval [as callAsync] (eval at create (/home/capaj/git_projects/looop/project-alpha/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:6:1)
    at Cache.endIdle (/home/capaj/git_projects/looop/project-alpha/node_modules/webpack/lib/Cache.js:39:22)
    at Watching._go (/home/capaj/git_projects/looop/project-alpha/node_modules/webpack/lib/Watching.js:68:23)

Sorry I don't have a minimal webpack.config.js

The text was updated successfully, but these errors were encountered:

jantimon · 2018-12-23T22:13:23Z

Thanks that was already mentioned here.

I don't understand completely why and how the filestamps api changed.

Could anyone please provide some insides or pull request to make html-webpack-plugin compatible with webpack 5?

Can anyone please give me some hints how and why the timestamps api changed?

I am using it here to find out wether the html template has to be recompiled.

For webpack 4 it just loops over all compilation file dependency timestamps.
Is getFileTimestamp as fast as that look up or will it add an additional fs lookup?

sibelius · 2019-01-05T11:30:34Z

here are another error we are getting on webpack 5

 TypeError: Cannot add property htmlWebpackPluginAlterChunks, object is not extensible
@entria/web:     at compiler.hooks.compilation.tap.compilation (/Users/sibelius/Dev/entria/entria-fullstack/node_modules/html-webpack-plugin/index.js:59:56)

you can run it here entria/entria-fullstack#46

it is using 3.2.0

sibelius · 2019-01-05T11:31:26Z

4.0.0-beta.5 works on our config

jantimon · 2019-01-06T17:50:16Z

Thanks for the feedback 👍

matheus1lva · 2019-01-07T23:52:47Z

Although It works on the first build, as you save a file and it is on watch mode, we get the same error, more details here: entria/entria-fullstack#46 (comment) running 4.0.0-beta.5

jantimon · 2019-01-08T08:40:26Z

Oh sorry you are right - its a breaking change of webpack 5.
I already tried to get some insides on this:

webpack/webpack#8537 (comment)

Crash after editing a JS file while webpack-dev-server watches for changes:
const timestamp = fileTimestamps.get(fileDependency);
TypeError: Cannot read property 'get' of undefined
    at childCompiler.fileDependencies.some (/node_modules/html-webpack-plugin/lib/compiler.js:341:38)
webpack-dev-server: 3.1.12 and html-webpack-plugin: 4.0.0-beta.5
Can anyone please give me some hints how and why the timestamps api changed?

I am using it here to find out wether the html template has to be recompiled.

For webpack 4 it just loops over all compilation file dependency timestamps.
Is getFileTimestamp as fast as that look up or will it add an additional fs lookup?

Maybe @sokra can help us here.

matheus1lva · 2019-01-21T11:54:11Z

friendly ping @sokra

sokra · 2019-01-21T13:44:40Z

There is a new API in FileSystemInfo.

FileSystemInfo.createSnapshot(startTime, files, directories, missing, options, callback) creates a snapshot of the filesystem to check for validity later.

FileSystemInfo.checkSnapshotValid(snapshot, callback) checks if a the filesystem changed (for the passed files and directories) compared to the snapshot.

jantimon · 2019-01-21T14:10:47Z

This is the first time I see the FileSystemInfo.createSnapshot api and I must say it is impressive.
It abstracts the entire "do I have to recompile" problem in a very simple way! 👍

Will FileSystemInfo also be back ported to webpack 4 in order to help use so we can support webpack 4 and 5 with one code base?

Is a snapshot automatically created for every compilation or for every compiler?
If not is there an util to create a snapshot for all dependencies of a given compiler?

benmccann · 2019-04-04T03:23:17Z

@sokra do you have any thoughts on @jantimon's question #1129 (comment)?

edit: I see some of the same question also asked in webpack/webpack#8982

jantimon · 2019-05-27T08:41:13Z

@sokra added webpack/webpack#8982 to the "probably" list:

lets see if this moves to yes in the next weeks.

PutziSan · 2019-07-30T14:38:04Z

Hi, no matter if FileSystemInfo also comes for weppack 4, html-webpack-plugin has to be adapted for webpack 5 in any case and use the new FileSystemInfo API, right? Does this new implementation already exist somewhere, so that we can use html-webpack-plugin with webpack 5?

jantimon · 2019-07-30T15:42:14Z

@PutziSan that's correct do you want to start and send a pull request?

PutziSan · 2019-07-31T10:11:14Z

I had patched my packages already, but it's more quick-and-dirty:
This change-comparison reflects the changes I've made locally, so everything is working fine with Webpack 5 again. I didn't really understand the previous caching algorithm and adapted it in the easiest way for me, that's certainly not right for all cases and needs to be looked at again. Also, it doesn't fit perfectly yet, because the first time you render it, it also returns that the cache is invalid.
Unfortunately, I don't have time to understand or improve it any further. But if someone wants a (not perfect) solution with Webpack 5 for now, he can use my changes as a patch.
[edit: added some code, that I forgot to commit]

jantimon · 2019-07-31T11:05:38Z

@PutziSan wow cool thanks a lot I'll take a look at it! 💯

egemon · 2019-10-17T10:50:15Z

Does anyone make it work with webpack 5?)

RichiCoder1 · 2019-10-18T18:50:03Z

The above patch appears to work for me still for Webpack 5.0,0-beta0

jwarkentin · 2019-10-20T04:25:20Z

If anyone is looking for a quick solution, I can't vouch for the correctness of this but it seems to work for me. Install the patch-package NPM module and set the postinstall script as instructed. Then, create a directory named "patches" and a file named something like "html-webpack-plugin+4.0.0-beta.8.patch" with the following contents:

diff --git a/node_modules/html-webpack-plugin/lib/compiler.js b/node_modules/html-webpack-plugin/lib/compiler.js
index 8960360..2f431d7 100644
--- a/node_modules/html-webpack-plugin/lib/compiler.js
+++ b/node_modules/html-webpack-plugin/lib/compiler.js
@@ -336,9 +336,9 @@ function isChildCompilerCacheOutdated (mainCompilation, childCompiler) {
     return false;
   }
   // Check if any dependent file was changed after the last compilation
-  const fileTimestamps = mainCompilation.fileTimestamps;
+  const fileTimestamps = mainCompilation.fileSystemInfo._fileTimestamps;
   const isCacheOutOfDate = childCompiler.fileDependencies.some((fileDependency) => {
-    const timestamp = fileTimestamps.get(fileDependency);
+    const timestamp = fileTimestamps.get(fileDependency).timestamp;
     // If the timestamp is not known the file is new
     // If the timestamp is larger then the file has changed
     // Otherwise the file is still the same

Run npx patch-package and it will at least stop the build from crashing and seems to allow proper hot reloading when I edit things so far.

elchicofrommo · 2020-03-18T02:31:48Z

Hey team, so I did the patch locally and it worked for me but I'm not checking in my node_module into my repo so I have to re-apply every time I deploy to a new env. There has to be a better way than this while we're waiting for a solution to get pushed. I'm newish to node/npm. I suppose I could maintain my own repo of http_webpack_plugin and install that but is that the best way to go?

AlonMiz · 2020-03-18T07:42:22Z

u can use patch-packageuntil a proper fix will be available

Hey team, so I did the patch locally and it worked for me but I'm not checking in my node_module into my repo so I have to re-apply every time I deploy to a new env. There has to be a better way than this while we're waiting for a solution to get pushed. I'm newish to node/npm. I suppose I could maintain my own repo of http_webpack_plugin and install that but is that the best way to go?

jwarkentin · 2020-03-18T08:12:13Z

For anyone interested in an even quicker and dirtier foolproof patch, here's what I'm doing now:

npm i patch-package
Open package.json and add this in the scripts section:
```
"postinstall": "patch-package"
```
Create a patches directory in your project root, add a file named html-webpack-plugin+4.0.0-beta.11.patch and paste the following in the file:

diff --git a/node_modules/html-webpack-plugin/lib/compiler.js b/node_modules/html-webpack-plugin/lib/compiler.js
index a13abf3..011294d 100644
--- a/node_modules/html-webpack-plugin/lib/compiler.js
+++ b/node_modules/html-webpack-plugin/lib/compiler.js
@@ -335,6 +335,7 @@ function isChildCompilerCacheOutdated (mainCompilation, childCompiler) {
   if (!childCompiler.compilationStartedTimestamp) {
     return false;
   }
+  return true;
   // Check if any dependent file was changed after the last compilation
   const fileTimestamps = mainCompilation.fileTimestamps;
   const isCacheOutOfDate = childCompiler.fileDependencies.some((fileDependency) => {

If you don't need to run an npm install and just need to apply the patch, run npx patch-package or npm run postinstall.

@elchicofrommo I added the step-by-step here for your benefit. Hope it helps!

jantimon · 2020-03-18T14:26:32Z

Has anyone already tried to use the new FileSystemInfo api to solve this?
Would love to release it as alpha as soon as it works out.

saravanan10393 · 2020-03-22T17:47:03Z

even in 4.0.0-beta.14 of html-webpack plugin i am getting this error
`
/app/node_modules/html-webpack-plugin/lib/compiler.js:341
const timestamp = fileTimestamps.get(fileDependency);

  TypeError: Cannot read property 'get' of undefined
  at /app/node_modules/html-webpack-plugin/lib/compiler.js:341:38

`

is there any timeline to fix this bug. i am using v5.0.0.beta.14 of webpack.

fivethreeo · 2020-03-29T23:17:21Z

I think it might be possible to do some conditionals with webpack.version to make PutziSan‘s changes backward compatible.

fivethreeo · 2020-03-31T00:00:09Z

I forked this repo and cherry picked PutziSan’s changes, working on fixing tests so they pass on webpack5. If I get it fixed I will release a scoped package until changes can be incorporated in master.

jantimon · 2020-03-31T07:39:26Z

@fivethreeo if we have a working solution I would love to release it as html-webpack-plugin 5 alpha however the current solution is using an unsupported private feature of webpack which might break once they publish the new major

I am happy to publish it as alpha if anyone has time to develop a solution based on the new FileSystemInfo.createSnapshot proposed by the webpack core team

fivethreeo · 2020-03-31T23:51:21Z

I got all tests but two to work in webpack5 with snapshot solution. But testing is a bit cumbersome since the webpack recompilation simulator does not currently support webpack5. Should the next release be backward compatible?

fivethreeo · 2020-03-31T23:52:33Z

A alpha release sounds great 😀

elchicofrommo · 2020-04-01T00:12:23Z

I'm new to webpack and open source contributing. I'd love to help out. Where do I find the api specs? Also I've been looking around this repo for the tests but i'm not seeing them. Its probably something obvious I'm just overlooking. Any pointers?

fivethreeo · 2020-04-01T00:23:35Z

They are in spec/

ibufu · 2020-04-01T03:20:41Z

Thank @PutziSan! I forked the version of @PutziSan and published it to npm as a temporary solution.

npm i html-webpack-plugin-compatible-5 -D

elchicofrommo · 2020-04-02T15:27:55Z

@jantimon are you still working on that alpha? It might be a nice intermediary until a final solution can be completed.

fivethreeo · 2020-04-02T15:37:48Z

@elchicofrommo https://github.com/fivethreeo/html-webpack-plugin/tree/webpack5-dev just a testing dep needs to be updated first

jantimon · 2020-04-02T16:08:26Z

Wow @fivethreeo that looks amazing 👍👍

fivethreeo · 2020-04-02T16:16:05Z

But regarding backward compatibility. Just keep both solutions until we deprecate webpack4?

jantimon · 2020-04-02T16:17:42Z

What about having two compiler.js files? One for webpack 4 and one for webpack 5?

fivethreeo · 2020-04-02T16:25:11Z

Yes, that might be the best solution.

…

On Thu, 2 Apr 2020 at 18:18, Jan Nicklas ***@***.***> wrote: What about having two compiler.js files? One for webpack 4 and one for webpack 5? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1129 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAADGXAJOUBPKQW4OIEQJ3RKS3DRANCNFSM4GMAANFA> .

-- Øyvind Saltvik

jantimon · 2020-04-02T16:50:26Z

Added some feedback to your pr here: #1390

fivethreeo · 2020-04-02T19:52:36Z

Typescript did not like two webpack versions.

fivethreeo · 2020-04-02T20:16:20Z

I think we need to do paralell releases with typescript. Unless there is a way to do dynamic typedef imports.

jantimon · 2020-04-09T16:32:46Z

Fixed in html-webpack-plugin 4.1.0

jantimon added the webpack-5 label Dec 25, 2018

matheus1lva mentioned this issue Jan 5, 2019

[WIP] Webpack@5 entria/entria-fullstack#46

Closed

jantimon closed this as completed Jan 6, 2019

jantimon reopened this Jan 8, 2019

jantimon pinned this issue Jan 8, 2019

edmorley mentioned this issue Jan 28, 2019

webpack 5 alpha feedback webpack/webpack#8537

Closed

19 tasks

jantimon mentioned this issue Feb 4, 2019

Roadmap for releasing 4.0.0 final #1148

Closed

jantimon mentioned this issue Feb 17, 2019

TypeError: Cannot read property 'add' of undefined when used with webpack 5 #1163

Closed

jantimon mentioned this issue Mar 31, 2019

Add FileSystemInfo to Webpack4 webpack/webpack#8982

Closed

jantimon mentioned this issue Apr 18, 2019

Performance issue in version 3.x #1180

Closed

jantimon mentioned this issue May 12, 2019

Added link and description for nomodule-plugin #1212

Merged

Studio384 mentioned this issue Sep 27, 2019

TypeError: Cannot read property 'add' of undefined when used with webpack 5 #1282

Closed

jantimon mentioned this issue Mar 18, 2020

Webpack 5 Support Plan? #1269

Closed

jantimon mentioned this issue Mar 24, 2020

Plugin causes webpack to throw on incremental compile (webpack 5 - watch mode) #1316

Closed

sebinsua mentioned this issue Mar 24, 2020

Webpack 5 facebook/create-react-app#7929

Closed

AviVahl mentioned this issue Mar 26, 2020

webpack-plugin: support webpack 5 wix/stylable#1064

Closed

jantimon closed this as completed Apr 9, 2020

jantimon unpinned this issue Apr 9, 2020

lock bot locked as resolved and limited conversation to collaborators May 20, 2020

TypeError: Cannot read property 'get' of undefined when used with webpack 5 #1129

TypeError: Cannot read property 'get' of undefined when used with webpack 5 #1129

Comments

capaj commented Dec 23, 2018 • edited Loading

Expected behaviour

Current behaviour

Environment

jantimon commented Dec 23, 2018 • edited Loading

sibelius commented Jan 5, 2019

sibelius commented Jan 5, 2019

jantimon commented Jan 6, 2019

matheus1lva commented Jan 7, 2019 • edited Loading

jantimon commented Jan 8, 2019

matheus1lva commented Jan 21, 2019

sokra commented Jan 21, 2019

jantimon commented Jan 21, 2019 • edited Loading

benmccann commented Apr 4, 2019 • edited Loading

jantimon commented May 27, 2019 • edited Loading

PutziSan commented Jul 30, 2019

jantimon commented Jul 30, 2019

PutziSan commented Jul 31, 2019 • edited Loading

jantimon commented Jul 31, 2019

egemon commented Oct 17, 2019

RichiCoder1 commented Oct 18, 2019

jwarkentin commented Oct 20, 2019

elchicofrommo commented Mar 18, 2020

AlonMiz commented Mar 18, 2020

jwarkentin commented Mar 18, 2020

jantimon commented Mar 18, 2020

saravanan10393 commented Mar 22, 2020

fivethreeo commented Mar 29, 2020

fivethreeo commented Mar 31, 2020

jantimon commented Mar 31, 2020 • edited Loading

fivethreeo commented Mar 31, 2020

fivethreeo commented Mar 31, 2020

elchicofrommo commented Apr 1, 2020

fivethreeo commented Apr 1, 2020

ibufu commented Apr 1, 2020 • edited Loading

elchicofrommo commented Apr 2, 2020

fivethreeo commented Apr 2, 2020

jantimon commented Apr 2, 2020

fivethreeo commented Apr 2, 2020

jantimon commented Apr 2, 2020

fivethreeo commented Apr 2, 2020 via email

jantimon commented Apr 2, 2020

fivethreeo commented Apr 2, 2020

fivethreeo commented Apr 2, 2020

jantimon commented Apr 9, 2020

capaj commented Dec 23, 2018 •

edited

Loading

jantimon commented Dec 23, 2018 •

edited

Loading

matheus1lva commented Jan 7, 2019 •

edited

Loading

jantimon commented Jan 21, 2019 •

edited

Loading

benmccann commented Apr 4, 2019 •

edited

Loading

jantimon commented May 27, 2019 •

edited

Loading

PutziSan commented Jul 31, 2019 •

edited

Loading

jantimon commented Mar 31, 2020 •

edited

Loading

ibufu commented Apr 1, 2020 •

edited

Loading