Issue when used with expo build:web

BrianWendt commented 1 year ago

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 commented 1 year ago

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

jsamr commented 1 year ago

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 commented 1 year ago

I'm having the same issue

miaosen-fms commented 1 year ago

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 react-native-render-html@5.x can fix the build error!

robertolaru commented 1 year ago

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:

Install the cli globally: npm install -g expo-cli@5.4.12
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 expo-cli@6.0.8 (currently the latest version), which I've run on GitHub Actions.

etiennelacoursiere commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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;
};

meliorence / react-native-render-html