question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

import failing on webpack-built script

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:3
  • Comments:8

github_iconTop GitHub Comments

2reactions
TheoryOfNekomatacommented, Feb 8, 2019

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.

0reactions
NandoSangenettocommented, Feb 20, 2018

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Getting error with webpack when using import/export
For webpack to be able to resolve typescript file, you need to add it to the list of webpack extensions. By default, webpack...
Read more >
Module Methods - webpack
When using webpack to bundle your application, you can pick from a variety of module syntax styles ... Statically import the export s...
Read more >
Tree Shaking - webpack
So we've cued up our "dead code" to be dropped by using the import and export syntax, but we still need to drop...
Read more >
imports-loader - webpack
Be careful, existing imports ( import / require ) in the original code and importing new values can cause failure. Getting Started. To...
Read more >
Shimming - webpack
The libraries might also create globals which need to be exported. ... createElement('div'); - // Lodash, now imported by this script element.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found