TypeError: __webpack_require__.h is not a function

Question

I have upgraded from angular 12 to angular 13. Now after upgrading when I tries to run my application. It runs perfectly but in console it is getting the error.

index.js:37 Uncaught TypeError: __webpack_require__.h is not a function
at Module.38202 (index.js:37:58)
at __webpack_require__ (bootstrap:19:1)
at __webpack_exec__ (styles.css?231c:1:1)
at styles.css?231c:1:1
at webpackJsonpCallback (jsonp chunk loading:71:1)
at styles.js:1:109

Can anyone help me to resolve this error.

Ellery

I have the same error. Are you using angular elements? – Milter

I am also having this issue, have you been able to fix it? I can't find any solution online. I've deleted node_modules and package-lock.json, compared package versions against a fresh Angular 13 project, and updated every package I can and nothing works. – Entomostracan

@BrandonRader I am stuck at this till now. Nothing works. – Ellery

@AshwaniTandon I have fixed it on my build, but I made so many changes that I'm not sure which one fixed it. It does seem that they changed the dev server. Are you also using Angular in an ASP.NET Core site by chance? I had to make a change in my Startup.cs file that fixed some issues with ng serve. – Entomostracan

@BrandonRader Yes, I am using ASP.NET Core site. Can you please share it so that I can try. – Ellery

@AshwaniTandon See my answer on this question: #72117901 – Entomostracan

@BrandonRader My issue is I'm using the library called concat to join three web component (bundle) js files into one js file. If in the host app I point at the main.js file, things work. If I try to use the file that is a concatenation of main + polyfills + runtime, it fails with a _ _ webpack_require _ _.r error. This is like totally different from what you were resolving, isn't it? There's nothing on the web to help me. – Maximamaximal

@Maximamaximal It’s been so long that I can’t recall. I upgraded the webpack dev server and that started the issue. I think ASP.NET Core and the new webpack server were both serving up some JS files and it caused a conflict, but I’m not sure. – Entomostracan

Answer 1

Deleting the contents of my compiled JavaScript output directory (dist/ is default) before rebuilding the Angular/TypeScript files solved the issue for me.

I had the same issue developing an Angular/ASP.NET Core site and it was preventing IISExpress from serving updated files as well as hot reloading (very annoying during development).

Jilolo

Answer 2

Had the same issue, deleted .angular folder and node_modules folder. Reinstalled the packages npm i.

And the important part is to clear the cache in your browser. Open dev-tools F12 and RIGHT-click on the reload icon (circle arrow) --> empty cache and hard reload.

After that it worked for me.

Venture

Answer 3

Add into your babel.rc :

    sourceType: "unambiguous",

Sauce

Gaily

Answer 4

Came here looking for answers, but what fixed this issue for me was changing the port I was serving from. Something somewhere was caching an old version of the site.

To clarify a little bit further, I have a .NET Core server that proxy serves my Angular client locally. Changing the .NET Core server from 44316 to 44319 solved everything.

And yes, I did try clearing my browser/application caches and tried other browsers even.

Viscus