Using in a React Native app

[tom-dudman]

The goal
Use html-to-text in a React Native app

Best attempt
I've installed the package, and imported the convert function in the relevant component.

import { convert } from "html-to-text";

...

const body = convert(htmlBody);

The question
run-android and run-ios output the following warning:

Package html-to-text has been ignored because it contains invalid configuration. Reason: Package subpath './package.json' is not defined by "exports" in /<project path>/node_modules/html-to-text/package.json

And the app crashes with the following message:

error: Error: While trying to resolve module `html-to-text` from file `/<project path>/src/components/email.js`, the package `/<project path>/node_modules/html-to-text/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/<project path>/node_modules/html-to-text/lib/html-to-text.cjs`. Indeed, none of these files exist:

  * /<project path>/node_modules/html-to-text/lib/html-to-text.cjs(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * /<project path>/node_modules/html-to-text/lib/html-to-text.cjs/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)

Prior research
Tried exporting ./package.json from package.json. Tried node versions from 14.18.1 up to 18.16.0.

[KillyMXI]

Man. There is one thing I hate more than webpack. It is the whole React infrastructure. They ruin JavaScript for everyone else.

Package html-to-text has been ignored because it contains invalid configuration. Reason: Package subpath './package.json' is not defined by "exports" in /<project path>/node_modules/html-to-text/package.json

What?

* /<project path>/node_modules/html-to-text/lib/html-to-text.cjs(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)

It doesn't recognize cjs as a valid extension and doesn't check "extensionless" file either.
Especially confusing since from the previous warning we can conclude it knows about exports so it can't be that old.
If there is a way to configure it in your project to recognize additional file extension - that should solve this.
Alternatively, you can try html-to-text 8.2.1 - before it switched to dual mode.

Overall, this seems to be an issue of React Native specifically or React pipeline as a whole.
I'm not qualified to help with it.
If you can debug the issue and explain what is missing - I can include the changes unless they cause inconveniences elsewhere.

[KillyMXI]

Relevant issues:
thysultan/stylis#233
emotion-js/emotion#1986
https://www.reddit.com/r/expo/comments/w14tjo/unable_to_resolve_module_cjs/

Looks like there is a way to provide additional file extensions.

If metro bundler is used, then it should be resolved in version 0.72.0:
facebook/metro#535

[tom-dudman]

Thanks @KillyMXI ,

Using 8.2.1 did clear that error, but gave me a new, similar looking one:

Error: While trying to resolve module `@selderee/plugin-htmlparser2` from file `/<project path>/node_modules/html-to-text/lib/html-to-text.js`, the package `/<project path>/node_modules/html-to-text/node_modules/@selderee/plugin-htmlparser2/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/<project path>/node_modules/html-to-text/node_modules/@selderee/plugin-htmlparser2/lib/hp2-builder.cjs`. Indeed, none of these files exist:

  * /<project path>/node_modules/@selderee/plugin-htmlparser2/lib/hp2-builder.cjs(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * /<project path>/node_modules/html-to-text/node_modules/@selderee/plugin-htmlparser2/lib/hp2-builder.cjs/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)

They absolutely do exist. I've tried all versions of @selderee/plugin-htmlparser2 in html-to-text's package.json but it didn't help.

The project I'm working on is quite old, and managing the dependencies is proving difficult, so I'll look at a cruder solution as the incoming HTML is fairly static.

Thank you very much for your time.

[KillyMXI]

Ah right, I forgot the bundler will have to deal with all my upstream packages as well.

If you can't update the bundler itself, another way might be, perhaps, to bundle problematic dependency first by other means and use that.
Not sure if something like https://esm.sh/ can do that for you.

[tom-dudman]

Success! The steps to solve for me were:

• Use version 8.2.1
• Add a resolver.sourceExts to metro.config.js which included cjs and mjs in the list of extensions

Thank you very much for your help with this. Its saved me lots of work maintaining two strings in parallel.

[KillyMXI]

I'm curious whether version 9 works with resolver.sourceExts as well, or what kind of error you get otherwise (and what version of metro you're working with).

[tom-dudman]

With 9.0.5 when running npx react-native start, npx react-native run-android or npx react-native run-ios I get the warning:

Package html-to-text has been ignored because it contains invalid configuration. Reason: Package subpath './package.json' is not defined by "exports" in /<project path>/node_modules/html-to-text/package.json

The project uses react-native 0.62.2 ... is that the metro version?... I'm not sure.

[KillyMXI]

So it runs, just has this warning?

I found this issue: uuidjs/uuid#444
and this comment: ai/nanoevents#44 (comment)
Looks like I can add "./package.json": "./package.json" to my exports whenever I will be releasing the next version, but it shouldn't affect the functionality in any way other than this warning, so no need to hurry.

If metro is in the dependency tree, then it should be possible to find it in node_modules or in package-lock.json.