Issue when used with expo build:web

[BrianWendt]

Decision Table

• [X] My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
• [X] My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

• [X] I have read the HELP document here: https://git.io/JBi6R
• [X] I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
• [X] I have confirmed that this bug has not been reported yet

Description

See console on https://app.gricdeq.org/ for live example till fixed crosses fingers

From the console

Uncaught TypeError: Cannot read properties of undefined (reading 'call') at l (bootstrap:79:22) at Module. (index.js:1:1) at l (bootstrap:79:22) at Object. (defaultListStyleSpecs.ts:1:1) at l (bootstrap:79:22) at Object. (SharedPropsProvider.tsx:2:1) at l (bootstrap:79:22) at Object. (RenderHTMLConfigProvider.tsx:4:1) at l (bootstrap:79:22) at Object. (RenderHTML.tsx:5:1)

I confirmed the issue is with react-native-render-html two ways. First, in my actual project I removed the use and the build worked. Second, I create a new expo app, added all the packages I'm currently using, and the build worked until I imported react-native-render-html into App.js

Meanwhile, expo start and running in browser works fine. Android & IOS builds are fine too. It's just web builds that seem to have this issue.

React Native Information

info Fetching system and libraries information...
(node:15228) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
    Memory: 4.68 GB / 15.92 GB
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.19.0 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowAllTrustedApps: Disabled
      Versions: 10.0.17763.0
  IDEs:
    Android Studio: Version  3.5.0.0 AI-191.8026.42.35.6010548
    Visual Studio: 16.11.32126.315 (Visual Studio Community 2019)
  Languages:
    Java: 1.8.0_162
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.0.0 => 18.0.0
    react-native: ^0.69.6 => 0.69.6
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

RNRH Version

6.3.4

Tested Platforms

• [x] Android
• [X] iOS
• [X] Web
• [ ] MacOS
• [ ] Windows

Reproduction Platforms

• [ ] Android
• [ ] iOS
• [X] Web
• [ ] MacOS
• [ ] Windows

Minimal, Reproducible Example

npx create-expo-app test-app

npm install react-native-web --force

npm install react-native-render-html

App.js + import RenderHTML from 'react-native-render-html';

expo build:web

Test however you go about testing web builds...

Additional Notes

No response

[BrianWendt]

I switched to react-native-htmlview which had it's own issues but was at least patchable.

[jsamr]

We don't officially support react-native-web, but happy to provide a fix. @BrianWendt can you provide more context on the patch that worked out for this other library?

[PlexLuth0r]

I'm having the same issue

[miaosen-fms]

I'm having the same issue

Uncaught TypeError: Cannot read properties of undefined (reading 'call')
    at __webpack_require__ (bootstrap:79:1)
    at Module.<anonymous> (index.js:1:1)
    at __webpack_require__ (bootstrap:79:1)
    at Object.<anonymous> (defaultListStyleSpecs.ts:1:1)
    at __webpack_require__ (bootstrap:79:1)
    at Object.<anonymous> (SharedPropsProvider.tsx:2:1)
    at __webpack_require__ (bootstrap:79:1)
    at Object.<anonymous> (RenderHTMLConfigProvider.tsx:4:1)
    at __webpack_require__ (bootstrap:79:1)
    at Object.<anonymous> (RenderHTML.tsx:5:1)

then i found use [email protected] can fix the build error!

[robertolaru]

Can confirm, my project too has the same exact error, using react-native-web (on Expo bare workflow).

Besides, the error only shows up when building using expo export:web. Running in dev mode (with expo start --web) works fine.

As a temporary fix, I've managed to build successfully using expo-cli (version 5.4.12) instead of expo:

1. Install the cli globally: npm install -g [email protected]
2. build the web bundle: expo-cli build:web --no-pwa

This might not work on newer versions of expo-cli, as the build wasn't working with [email protected] (currently the latest version), which I've run on GitHub Actions.

[etiennelacoursiere]

I have a similar error when i build for web. Mine is Uncaught TypeError: e[r] is undefined which i know doesn't say a lot.

Also i tried @robertolaru suggestion but it didn't work for me.

What is weird is that everything is working fine in development mode. But when i build with npx expo export:web and then serve the build i get the error. Which make me think this is an issue related to webpack.

Not sure if this is of any help but if i tried to follow the cryptic stacktrace, the problem seems to come from @jsamr/counter-style which is imported in a file called defaultListStyleSpecs.ts. And then if i follow the chain of imports the last one would be RenderHTMLConfigProvider imported in RenderHTML.tsx.

Sorry if this information is useless.

I really don't want to switch lib as we did quite a lot of work with this lib and switching would be quite tedious!

[robertolaru]

@etiennelacoursiere Before downgrading expo-cli I first uninstalled the existing global package (both from yarn and from npm). Then I ran expo-cli -v to make sure it was the expected version. I've also noticed that the fix doesn't work anymore if there is a custom Webpack config file (webpack.config.js in my case). I noticed this after adding one to use the webpack-bundle-analyzer plugin.

[jsamr]

I believe this is related to how presets are exposed in sub-packages: https://github.com/meliorence/react-native-render-html/blob/a1c674891048e0dbf612299decad681d56258be9/packages/render-html/src/elements/defaultListStyleSpecs.ts#L2-L8

See this script: https://github.com/jsamr/react-native-li/blob/859a03d8eb590fe2dbedb755a419cd3ab725d93b/packages/counter-style/scripts/generatePresets.js#L1-L61

It creates sub-packages for each preset. See this tarball: https://registry.npmjs.org/@jsamr/counter-style/-/counter-style-2.0.2.tgz

[etiennelacoursiere]

Any idea how to fix this? I would like to help but unfortunately i have no idea what I'm looking at here. I have little to no experience with webpack. ( if this is even related to webpack )

[etiennelacoursiere]

As a workaround, downgrading @expo/webpack-config from 0.17.2 to 0.16.2 did it for us. Not sure what changed in the config that could cause this problem. Will keep an eye on this!

[beepsoft]

My workaround is to create a HtmlView.web.tsx and HtmlView.ios.tsx where the web.tsx uses

<div dangerouslySetInnerHTML={{__html: props.text}}></div>

to render the HTML in the browser, while the .ios.tsx uses

<RenderHtml
    source={{
        html: props.text
    }}
/>

and in my original code I use instead of RenderHtml my HtmlView, which maps either of the two above based on whether it is used/built for web or native.

[etiennelacoursiere]

Sure, it works! And i tried that also at first but i had to apply styling to the inner HTML tags and I didn't found a clean way to do it.

[beepsoft]

Yes, it is not ideal at all, I would like to have a proper fix too. In my case I just want to display really minimal HTML and the above hack suffice.

[palicko]

As a workaround, downgrading @expo/webpack-config from 0.17.2 to 0.16.2 did it for us. Not sure what changed in the config that could cause this problem. Will keep an eye on this!

It seems like in @expo/webpack-config:0.17.0 release some Webpack optimizations were enabled. See https://github.com/expo/expo-cli/commit/7f7242bd93d19aaf1238d856f2f4187675953a98

[sachamorgese]

As a workaround, downgrading @expo/webpack-config from 0.17.2 to 0.16.2 did it for us. Not sure what changed in the config that could cause this problem. Will keep an eye on this!

Thank you. Had the same issue and can confirm even 0.16.27 works

[CarlosLozanoHealthCaters]

I had the same issue. I didn't downgrade to 0.16.2, but I changed webpack.config.js file:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  config.optimization.usedExports = true; // ADD THIS

  ... // other code

  return config;
};