Webpack-dev-server: html-loader + webpack-dev-server == TypeError: undefined is not a constructor (evaluating 'new AllHtmlEntities()')

[davetron5000]

• Operating System:
  
  
  
  • Webpack Dev Server running from:
    
    # uname -a Linux bcc043d6bba3 4.19.121-linuxkit #1 SMP Tue Dec 1 17:50:32 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux
  
  
  • Browsers on MacOs Catalina 10.15.7
  
  
• Node Version: v14.15.3
• NPM Version: 6.14.8 (Yarn version 1.22.5)
• webpack Version: 5.11.0
• webpack-dev-server Version: 3.11.0

• Browser: Safari latest and Chrome

• [x] This is a bug

• [ ] This is a modification request

Code

See https://github.com/davetron5000/webpack-dev-server-issue

Expected Behavior

Running this should work:

$(yarn bin)/webpack serve --config=config/webpack.js  --env development

Actual Behavior

When I connect to the browser, it does not connect to the dev server, instead giving this error:

TypeError: undefined is not a constructor (evaluating 'new AllHtmlEntities()')

This is coming from

https://github.com/webpack/webpack-dev-server/blob/4ab1f21bc85cc1695255c739160ad00dc14375f1/client-src/default/overlay.js#L7-L9

I've tried a few different versions of html-entities, namely the latest as well as 1.3.2 which is what webpack-dev-server depends on . The way in which modules are exported from that library has not changed in quite a while.

If I comment out the require from the webpack-dev-server code in my node_modules/, everything works.

I have tried reinstalling npm modules to no avail.

For Bugs; How can we reproduce the behavior?

This is on a vanilla project that has almost nothing in it. It's being run inside Docker. It is not using development mode because that mode is not documented and I'm creating this code as a way to learn how Webpack works.

[alexander-akait]

Please create reproducible test repo, I don't know too

[davetron5000]

https://github.com/davetron5000/webpack-dev-server-issue

I am updating the main content to reflect small differences in my report and the repo above.

[davetron5000]

Confirmed is present on node 14, too.

[alexander-akait]

There is not problems with webpack-dev-server, something wrong in configurations, no magic here, require works like everywhere

[alexander-akait]

write console.log(require('html-entities')) in client and look at output

[davetron5000]

I had tried that. I edited node_modules/webpack-dev-server/client/overlay.js as follows:

var ansiHTML = require('ansi-html');

// START LINES I ADDED
console.log("require('html-entities')")
console.log(require('html-entities'))
console.log("require('html-entities').AllHtmlEntities")
console.log(require('html-entities').AllHtmlEntities)
// END LINES I ADDED

var _require = require('html-entities'),
    AllHtmlEntities = _require.AllHtmlEntities;

In my console, here is what is output:

[Log] require('html-entities')
[Log] "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var xml_entities_1 = require("./xml-entities");
exports.XmlEntities = xml_entities_1.XmlEntities;
var html4_entities_1 = require("./html4-entities");
exports.Html4Entities = html4_entities_1.Html4Entities;
var html5_entities_1 = require("./html5-entities");
exports.Html5Entities = html5_entities_1.Html5Entities;
exports.AllHtmlEntities = html5_entities_1.Html5Entities;

[Log] require('html-entities').AllHtmlEntities
[Log] undefined

This is in the browser. Same behavior for both Safari and Chrome.

When I do require("html-entities") in Node, it works, but this code is running in the browser, so require is not the same.

The webpack configuration is pretty minimal, so if you see anything odd or missing please let me know

[davetron5000]

Welp, I think I have figured it out. It's the use of html-loader!

I added this because I thought it was necessary to get the dev server to hot reload my index.html file. Turns out that's not true, but just including html-loader in the project borks things the way I've described.

I don't think the inclusion of a module should break webpack-dev-server but I don't know much about how the code here gets to the code in my node_modules to know where the problem might be. I will-rename this issue.

[alexander-akait]

https://github.com/davetron5000/webpack-dev-server-issue/blob/main/app/config/webpack.js#L15, invalid regexp, valid:
test: /\.html$/i,

[davetron5000]

That is a valid regex, but I'm assuming you mean it's not the one to use in this situation. Adding the trailing $ does fix the problem, but how does that cause this problem? There is only one file in the project that matches either regexp, so how does this make the dev server not work?

[alexander-akait]

That is a valid regex

No, please read how regexp works, . mean any character (exclude \n, \r, \u2028 or \u2029), not . (dot), don't using $ means html can be in any place, so if you do require('my-html-package') you will applied html-loader (test it here https://regex101.com/)

Again, no problems with webpack or webpack-dev-server here, something wrong in configuration or environment

[davetron5000]

Sorry, when I say "valid" I mean, "it compiles", which it does, but I still take your point that it's not the correct regex to achieve what I was trying to achieve.

So you are saying that with the regexp I had any module with "html" in it anywhere—including node_modules—would be run through Webpack? And so Webpack rewrote the html-entities module as HTML, thus why require returned the source of the module and not the exported structure?

[alexander-akait]

Yep, write console.log(this.resourcePath) in html-loader (these are modules that transform) and you will see:

/home/user/projects/webpack-dev-server-issue/app/html/index.html
/home/user/projects/webpack-dev-server-issue/app/html/index.html
/home/user/projects/webpack-dev-server-issue/app/node_modules/ansi-html/index.js
/home/user/projects/webpack-dev-server-issue/app/node_modules/html-entities/lib/index.js
/home/user/projects/webpack-dev-server-issue/app/node_modules/markdown-it/lib/rules_inline/html_inline.js
/home/user/projects/webpack-dev-server-issue/app/node_modules/markdown-it/lib/rules_block/html_block.js

due regexp applied to full path (allow to transform modules out of cwd, there are a lot of use cases for this) you transform JS files (look at the latest), so you break code, just fix regexp and all works fine

[davetron5000]

Cool, thanks for the explanation!