Unhandled Rejection (TypeError): Cannot call a class as a function error

Question

Unhandled Rejection (TypeError): Cannot call a class as a function error

Opened this issue 3 years ago · 37 comments

Hello,

I'm using the html-to-docx lib to generate docx documents in one one my React projects and recently I am getting the following error when trying to use the HTMLtoDocx() method:

Apparently it starts on the 'html-to-docx.js:171' file. Any idea of why this is happening?

Answer 1 · 2021-09-17T12:56:25.000Z

Could you please post other details and the code you used?

Answer 2 · 2021-09-17T15:26:10.000Z

Sure. I use the lib to generate a docx document of one of my React components, so I added a button which triggers the following function when clicked:

const generateDocx = async (my variables) => {
  const html = ReactDOMServer.renderToStaticMarkup(<MyComponent
    componentProps
  />);
  const converted = await HTMLtoDOCX(html, null, {
    font: 'Roboto',
    margins: {
      top: '24px',
      right: '24px',
      bottom: '24px',
      left: '24px',
      header: 720,
      footer: 720,
      gutter: 0,
    },
    footer: true,
    pageNumber: true,
  });

  saveAs(converted, 'myDocument.docx');
};

It was working fine a few days ago, but now the app has started crashing. I don't know if it could be a version issue or something else.

Answer 3 · 2021-09-20T19:48:32.000Z

@SensiateLeo Any chance you added a new element to the page or the html output of renderToStaticMarkup changed significantly? Also which version of html-to-docx do you use ?

Answer 4 · 2021-09-21T14:36:45.000Z

@privateOmega unfortunately no. The page is the same as 1 month before. But recently I updated the project packages and some of the libraries had their version upgraded... could this be a problem?
I was using the 1.2.2 version, but I also tried 1.2.3 and the problem persisted.

Answer 5 · 2021-09-22T17:30:49.000Z

@SensiateLeo Yes I guess, but cant say anything for sure, Could you please post the markup string here?

Answer 6 · 2021-09-23T20:53:36.000Z

@SensiateLeo @zees98 I think its possibly an issue with the import because of the loader you are using, could you please console.log(HTMLtoDOCX), I think instead of a function, its getting loaded as a class for some reason.

Answer 7 · 2021-09-23T20:57:32.000Z

Try out the following syntaxes

import name from "module-name";
import * as name from "module-name";
import { default as name } from "module-name";

One of it should work I guess.

Answer 8 · 2021-09-24T08:28:21.000Z

@privateOmega First of all, I really appreciate all the help.
Secondly, I did as you suggested with the import statements. But no luck.
I'll list down my finding with each method below.

import HTMLtoDOCX from 'html-to-docx';
import { default as HTMLtoDOCX} from "html-to-docx";

these 2 methods yield the same console.log result.

console.log results:

ƒ (_x, _x2) {
  return _ref14.apply(this, arguments);
}

import * as HTMLtoDOCX from 'html-to-docx';
This yields a different error which is kind of similar to the OP's error.

Unhandled Rejection (TypeError): html_to_docx__WEBPACK_IMPORTED_MODULE_11__ is not a function

Console.log results:

Answer 9 · 2021-09-24T08:33:29.000Z

@zees98 Can we try import { HTMLtoDOCX } from 'html-to-docx'; as well? It's a fluke attempt, but I am out of ideas.

Answer 10 · 2021-09-24T08:36:04.000Z

@zees98 @SensiateLeo are you guys on webpack 5?

Answer 11 · 2021-09-24T08:52:45.000Z

@zees98 Can we try import { HTMLtoDOCX } from 'html-to-docx'; as well? It's a fluke attempt, but I am out of ideas.

Answer 12 · 2021-09-24T08:53:30.000Z

@zees98 @SensiateLeo are you guys on webpack 5?

i executed npx webpack --version in my project and got this:

webpack 4.44.2
webpack-cli 4.8.0
webpack-dev-server 3.11.1

Answer 13 · 2021-09-24T09:53:24.000Z

Update:
I upgraded Webpack.

webpack 5.53.0   
webpack-cli 4.8.0

But the issue persists.

Answer 14 · 2021-09-24T14:28:28.000Z

@privateOmega First of all, I really appreciate all the help until the moment.

As @zees98, I tried all the steps that you suggested but the issue still persists

Answer 15 · 2021-09-24T14:29:02.000Z

I'm also getting the same errors that @zees98 commented before

Answer 16 · 2021-09-24T14:40:40.000Z

@zees98 @SensiateLeo could one of you make a sandbox repo for me also to reproduce this issue?

Answer 17 · 2021-09-24T15:09:05.000Z

@zees98 @SensiateLeo could one of you make a sandbox repo for me also to reproduce this issue?

Sure, I'm on it.

Answer 18 · 2021-09-24T15:55:09.000Z

@privateOmega @SensiateLeo
I wanted to report that the package is indeed working. I made the sandbox project (adding to GitHub in a bit).
But what I find mysterious is that the code was a copy and paste.

Attaching GIF below

Answer 19 · 2021-09-26T13:41:18.000Z

@privateOmega @SensiateLeo
Hello, again guys!

I have got the package to work for me!

I just removed the conversion code from my front end and added it as an API route to my project's backend. Now it works fine.

Here is the server-side route code

app.post('/files/generate/', async (req, res) => {
    var { html } = req.body;
    console.log(req.body)
    if (html !== undefined) {
      var html = `<!DOCTYPE html><html lang="en">
                      <head>
                        <meta charset="UTF-8" />
                        <title>Document</title>
                      </head>
                    <body>
                     ${html} 
                    </body>
                  </html>`;
      const fileBuffer = await HTMLtoDOCX(html, null, {
        table: { row: { cantSplit: true } },
        footer: true,
        pageNumber: true,
      });
      console.log(fileBuffer);
      var path = `${__dirname}/files/document_${Date.now()}.docx`;
      fs.writeFile(path, fileBuffer, (err) => {
        if (err) {
          console.log(err)
        }
        else {
          res.setHeader("Content-Type", "application/msword");
          fs.createReadStream(path).pipe(res);
        }
      });
    }
    else
      return res.status(400).json({ error: "HTML cannot be null" })
  });

This may not be the perfect solution for some cases but I believe my project was the problem here and this workaround does not affect my original use case at all, other than the fact that I primarily wanted to be able to generate files at client side.

Answer 20 · 2021-09-27T17:13:29.000Z

@zees98 I'm so happy that you could make it work by running it in the backend, but then again I wish it was working you for the frontend setup as well.

I strongly feel its an import problem due to some loader issue, which is something similar to what I was facing when I was trying to make it work on browsers, for setups without frameworks like react.

If one of you has some experience with loaders and could help sort this out, that would be amazing, but kudos nevertheless.

Answer 21 · 2021-09-29T06:45:13.000Z

@privateOmega Thank you so much!
I have been working with Javascript for a total of 4-5 months now. Once I study loaders in JS, I'll be more than happy to help out!
Cheers!

Answer 22 · 2022-07-28T23:13:28.000Z

I did a blanket upgrade modules and it worked

 "color-name": "^1.1.4",
"escape-html": "^1.0.3",
"html-to-vdom": "^0.7.0",
"image-size": "^1.0.2",
"jszip": "^3.10.0",
"nanoid": "^4.0.0",
"virtual-dom": "^2.1.1",
"xmlbuilder2": "^3.0.2"

Answer 23 · 2022-08-04T08:49:05.000Z

Hello! Unfortunately the project I am working on is running into the same issue with production build. We are using react-scripts, checking the webpack version react-scripts is running webpack 4.44.2. I'm wondering @shareefalis when you say you blanket upgraded the modules, where did you do this?

Answer 24 · 2022-08-04T14:02:49.000Z

in package.json, in the dependency section of the npm module, this is what i upgraded in the snippet to get the module working.. I believe there is a loader fix in one of the module which fixed this issue

Answer 25 · 2022-11-16T19:36:52.000Z

I am jumping in, facing the same issue with Webpack 4.

From the suggestion from @privateOmega about the module import, I tried this PR but webpack then can't find this library, see my comment in the PR.

Answer 26 · 2022-11-16T20:25:14.000Z

I finally figured it out by looking at which library was using this @oozcitak/infra package raising the error and found that only xmlbuilder2 is.

I found this issue from the library's repo by searching the error message in the issues. In that issue, the library author fixed the error and asked to use xmlbuilder2 version 2.1.4. html-to-docx uses the version 2.1.2 so I tried upgrading it and it works !

See my PR #168.

Answer 27 · 2022-11-17T19:10:32.000Z

Released v1.6.3 which should fix this issue. Sorry guys it took forever. Also whoever followed blanket update of packages, I am guessing you guys werent using images, because that should be broken(generate bad .docx file) if you did that I am guessing.

Answer 28 · 2022-11-17T19:15:02.000Z

@privateOmega installation of 1.6.3 fails on my machine :

[4/4] Building fresh packages...
error /application/node_modules/html-to-docx: Command failed.
Exit code: 127
Command: npx npm-force-resolutions
Arguments: 
Directory: /application/node_modules/html-to-docx
Output:
/bin/sh: npx: not found

1.6.2 wasn't failing.

Answer 29 · 2022-11-17T20:00:05.000Z

@zedtux Yes I am forcing the deps of xmlbuilder2 to be the ones that was basically the fix of 2.1.4 of xmlbuilder2. For you its failing probably because you are on older version of node and npm like npm < 7. I am guessing. Is it possible for you to upgrade npm version?

Also 1.6.2 doesnt contain the fix, only 1.6.3 does.

Answer 30 · 2022-11-17T20:28:39.000Z

@privateOmega I'm using Docker, and installing Node 14 (still old) using the Alpine Linux package manager (I just figured out that the npm and npx command are shipped by the Linux Alpine package npm, while nodejs only ship node alone).

I just updated my Docker image in order to install and preserve the npm and npx commands so that now I do have the npx command but it crashes with :

error /application/node_modules/html-to-docx: Command failed.
Exit code: 1
Command: npx npm-force-resolutions
Arguments: 
Directory: /application/node_modules/html-to-docx
Output:
npm WARN exec The following package was not found and will be installed: npm-force-resolutions
Error: ENOENT: no such file or directory, open './package-lock.json'
    at Object.openSync (fs.js:498:3)
    at Object.fs [as readFileSync] (fs.js:394:35)
    at npm_force_resolutions$core$node_slurp (/home/zedtux/.npm/_npx/73b02210abc194ff/node_modules/npm-force-resolutions/out/npm_force_resolutions/core.cljs:15:20)
    at npm_force_resolutions$core$read_json (/home/zedtux/.npm/_npx/73b02210abc194ff/node_modules/npm-force-resolutions/out/npm_force_resolutions/core.cljs:22:23)
    at switch__2144__auto__ (/home/zedtux/.npm/_npx/73b02210abc194ff/node_modules/npm-force-resolutions/out/npm_force_resolutions/core.cljs:151:3)
    at /home/zedtux/.npm/_npx/73b02210abc194ff/node_modules/npm-force-resolutions/out/npm_force_resolutions/core.cljs:151:3
    at npm_force_resolutions$core$update_package_lock_$_state_machine__2145__auto____1 (/home/zedtux/.npm/_npx/73b02210abc194ff/node_modules/npm-force-resolutions/out/npm_force_resolutions/core.js:648:4)

A possible fix could be to use npx force-resolutions instead ?

Answer 31 · 2022-11-18T07:09:43.000Z

@privateOmega I'm using Docker, and installing Node 14 (still old) using the Alpine Linux package manager (I just figured out that the npm and npx command are shipped by the Linux Alpine package npm, while nodejs only ship node alone).

I just updated my Docker image in order to install and preserve the npm and npx commands so that now I do have the npx command but it crashes with :

error /application/node_modules/html-to-docx: Command failed.
Exit code: 1
Command: npx npm-force-resolutions
Arguments: 
Directory: /application/node_modules/html-to-docx
Output:
npm WARN exec The following package was not found and will be installed: npm-force-resolutions
Error: ENOENT: no such file or directory, open './package-lock.json'
    at Object.openSync (fs.js:498:3)
    at Object.fs [as readFileSync] (fs.js:394:35)
    at npm_force_resolutions$core$node_slurp (/home/zedtux/.npm/_npx/73b02210abc194ff/node_modules/npm-force-resolutions/out/npm_force_resolutions/core.cljs:15:20)
    at npm_force_resolutions$core$read_json (/home/zedtux/.npm/_npx/73b02210abc194ff/node_modules/npm-force-resolutions/out/npm_force_resolutions/core.cljs:22:23)
    at switch__2144__auto__ (/home/zedtux/.npm/_npx/73b02210abc194ff/node_modules/npm-force-resolutions/out/npm_force_resolutions/core.cljs:151:3)
    at /home/zedtux/.npm/_npx/73b02210abc194ff/node_modules/npm-force-resolutions/out/npm_force_resolutions/core.cljs:151:3
    at npm_force_resolutions$core$update_package_lock_$_state_machine__2145__auto____1 (/home/zedtux/.npm/_npx/73b02210abc194ff/node_modules/npm-force-resolutions/out/npm_force_resolutions/core.js:648:4)

A possible fix could be to use npx force-resolutions instead ?

Thanks for bearing with me on this and mostly for playing the role of a tester on this. It seems that on installing a package as a dependency package-lock.json is ignored by npm and then that would mean npm-force-resolutions breaks and throws this particular error. Inorder to solve this, I tried to setup overrides and resolutions in package.json, but that wasnt obeyed by npm on installing the package as a dep, so finally what I have done is I've added the 2 packages dom and util as a direct dependency of html-to-docx, released v1.6.4 and I think that should solve the issue for us permanently, please do test and confirm for us.

Answer 32 · 2022-11-18T14:11:59.000Z

@privateOmega the package installation is now working, but the library is raising the error again.

Answer 33 · 2022-11-22T08:38:47.000Z

Any chance you have a look at this last issue @privateOmega please ?

Answer 34 · 2022-11-22T11:16:37.000Z

@zedtux Sorry, not yet. Could you please create a sandbox for this, with your build configuration? I am not able to replicate this at my end.

Answer 35 · 2022-12-05T19:01:35.000Z

@privateOmega I think the issue is that you seem to be using a feature from NPM version 8.3 but I'm using NPM 7.

I have checked and so far none of the existing Node versions are shipping with NPM 8.3. I've tested with Node 19.

I will try to upgrade the NPM globally and see if it fixes the issue.

Update after having install the latest NPM 8 version (8.19.3), I still have the same issue.

Update 2 I have updated my package.json file by adding the same rule than you :

  "resolutions": {
    "@oozcitak/util": "8.3.4",
    "@oozcitak/dom": "1.15.6"
  },
  "overrides": {
    "@oozcitak/util": "8.3.4",
    "@oozcitak/dom": "1.15.6"
  }

and now it work for me.

Answer 36 · 2023-02-28T22:40:38.000Z

Hi @privateOmega ,
Version 1.6.3 and above still use xmlbuilder2 2.1.2. Looks like the PR merge didn't make it into the tag?

Answer 37 · 2023-04-06T13:42:34.000Z

I was getting this error only in the build version of React and the culprit was xmlbuilder2 library of version 2.1.2 which is a dependency of this package. This specific version is required to render the images in docx file but I think the downside of not being able to download the file altogether is much more momentous. You will need at least 2.1.4 version to get rid of this error.
The workaround is to either locally link the repo of this package with the latest version of xmlbuilder2 or configure webpack to use the latest version of xmlbuilder2.
I opted for the latter by first installing the latest version of xmlbuilder2 and then adding resolutions in package.json file as:
"resolutions": {
"xmlbuilder2": "^3.0.2"
}
After adding this run yarn install then yarn build. It should work now.