Getting an error saying f is not a constructor

[PenghaiZhang]

Expected Behavior

We have recently upgraded our build tool Parcel to v2.13.3, and since then we started having an error about f is not a constructor.

This is how we use the parser:

1. Import the parser through import HTMLReactParser from "html-react-parser";
2. Pass a string to the parser

It's expected no errors should occur.

We are using 3.0.16, but the error still occurs after we upgrade to 5.2.2. However, the error message is a bit more readable after the upgrade - Text is not a constructor.

Actual Behavior

Getting the error as described above.

Steps to Reproduce

Not sure if the issue is related to Parcel 2.13.x, but this is the only thing we did to trigger the issue.

Environment

• Version: both 3.0.16 and 5.2.2
• Platform:
• Browser: Chrome 131.0.6778.204
• OS: Ubuntu 22

[remarkablemark]

This may be related to the Text export from domhandler.

Can you try the following import?

import { Text } from 'html-react-parser';

console.log(Text);

[PenghaiZhang]

Hi @remarkablemark ,

Thanks for responding so quickly.

The output is undefined.

[PenghaiZhang]

I found that using 'parcel watch' which does not minify and optimize the files, this error does not happen.

[remarkablemark]

I wonder if this could be a parcel issue. Could you try nuking your node_modules and lockfiles and reinstalling dependencies?

rm -rf node_modules package-lock.json yarn.lock
npm i

[PenghaiZhang]

I wonder if this could be a parcel issue. Could you try nuking your node_modules and lockfiles and reinstalling dependencies?

rm -rf node_modules package-lock.json yarn.lock
npm i

Hi @remarkablemark we have tried to clean up the node modules and re-install all the dependencies multiple times but this did not help fix the issue.

[remarkablemark]

Gotcha then I'll need your help in creating a small reproducible example and sharing the code with me. Feel free to use something like StackBlitz.

[PenghaiZhang]

Gotcha then I'll need your help in creating a small reproducible example and sharing the code with me. Feel free to use something like StackBlitz.

Thanks @remarkablemark ! I have tried to update that project but it seems there is a known issue in stackblitz: stackblitz/core#1855

Basiically, I just replaced vite with Parcel 2 and the npm scripts and kept other code.

[PenghaiZhang]

I created a new small project locally and I found this error log.

@parcel/transformer-js: Unknown usage of CommonJS `exports` object. This causes tree shaking to be disabled.

  /home/penghai/parcel_test/test/node_modules/html-react-parser/lib/index.js:7:51
    6 | exports.htmlToDOM = exports.domToReact = exports.attributesToProps = exports.Text = exports.ProcessingInstruction = exports.Element = exports.Comment = void 0;
  > 7 | exports.default = HTMLReactParser;
  >   |                                   ^
    8 | var html_dom_parser_1 = __importDefault(require("html-dom-parser"));
    9 | exports.htmlToDOM = html_dom_parser_1.default;

  📝 Learn more: https://parceljs.org/features/scope-hoisting/#commonjs


@parcel/transformer-js: Unknown usage of CommonJS `exports` object. This causes tree shaking to be disabled.

  /home/penghai/parcel_test/test/node_modules/html-react-parser/lib/index.js:7:28
    6 | exports.htmlToDOM = exports.domToReact = exports.attributesToProps = exports.Text = exports.ProcessingInstruction = exports.Element = exports.Comment = void 0;
  > 7 | exports.default = HTMLReactParser;

[remarkablemark]

Once you create the project with your error, please commit it and share the public GitHub repo with me so I can take a look.