import failing on webpack-built script

Situation

I am building a boilerplate for universal react app.

I wanted to minimize my html output on the server side.

So I just did npm install --save html-minifier and import {minify} from "html-minifier";.

Then this error popped up when I built and started the server.

Error: ENOENT: no such file or directory, lstat 'C:\Users\tintypemolly\workspace\react-boilerplate\lib'
    at Error (native)
    at Object.fs.lstatSync (fs.js:982:18)
    at Object.realpathSync (fs.js:1647:19)
    at C:\Users\tintypemolly\workspace\react-boilerplate\build\~\html-minifier\~\uglify-js\tools\node.js:23:1
    at Array.map (native)
    at Object.<anonymous> (C:\Users\tintypemolly\workspace\react-boilerplate\build\~\html-minifier\~\uglify-js\tools\node.js:22:1)
    at __webpack_require__ (C:\Users\tintypemolly\workspace\react-boilerplate\build\webpack:\webpack\bootstrap fb83bf644d298bef2a7c:19:1)
    at Object.<anonymous> (C:\Users\tintypemolly\workspace\react-boilerplate\build\~\html-minifier\src\htmlminifier.js:8:1)
    at __webpack_require__ (C:\Users\tintypemolly\workspace\react-boilerplate\build\webpack:\webpack\bootstrap fb83bf644d298bef2a7c:19:1)
    at Object.<anonymous> (C:\Users\tintypemolly\workspace\react-boilerplate\build\webpack:\server.js:7:1)

I am running this on both Windows 10 and macOS Sierra. node’s version is 6.6.0, npm’s version is 3.10.8 on both machines. This occurs on both machines.

Where the error occurs is this line. https://github.com/TintypeMolly/react-boilerplate/blob/fail/html-minifier/src/server.js#L7 import {minify} from "html-minifier";

How to reproduce

git clone https://github.com/TintypeMolly/react-boilerplate.git
git reset --hard origin/fail/html-minifier
cd react-boilerplate
npm install
npm start

you can replace npm start with npm run build and then node build/server.js

The former is for development mode, and the latter is for production mode.

On both cases the same error occurs.

Why do this occurs?

I found that uglify-js, which this repo depends on, is doing something like below.

var FILES = exports.FILES = [
    "../lib/utils.js",
    "../lib/ast.js",
    "../lib/parse.js",
    "../lib/transform.js",
    "../lib/scope.js",
    "../lib/output.js",
    "../lib/compress.js",
    "../lib/sourcemap.js",
    "../lib/mozilla-ast.js",
    "../lib/propmangle.js",
    "./exports.js",
].map(function(file){
    return fs.realpathSync(path.join(path.dirname(__filename), file));
});

I think this code is packed in to the server.js output file when I build my project with webpack.

When I build my project with webpack, the output is a single file.

For uglify-js, path.dirname(__filename) means the uglify-js source directory.

But once when it is packed into /path/to/project/build/server.js of my project, it doesn’t mean that anymore.

It’s just build output directory of my project, so ends up Error: ENOENT: no such file or directory

---

Is this something that html-minifier can resolve or should I create a issue on uglify-js or webpack?

[TheoryOfNekomata]

I solved this issue by using null-loader on the path where the main file of uglify-js is loaded.

I added:

rules: [
  // ... some rules
  {
    test: path.resolve(__dirname, 'node_modules/uglify-js/tools/node.js'),
    loader: 'null-loader',
  },
  // ...some more rules
]

into my Webpack config.

I agree it is not something in html-minifier itself, but I think this is a solution nonetheless. Maybe this is an issue of the main files not being in the topmost directory of its require() s.

[NandoSangenetto]

I have the same issue.

I used webpack to build my react app for SSR, and I’m trying to minify my HTML on the fly using node with no success.