Open BrianWendt opened 1 year ago
I switched to react-native-htmlview which had it's own issues but was at least patchable.
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?
I'm having the same issue
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!
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
:
npm install -g expo-cli@5.4.12
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.
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!
@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.
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
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 )
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!
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.
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.
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.
As a workaround, downgrading
@expo/webpack-config
from0.17.2
to0.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
As a workaround, downgrading
@expo/webpack-config
from0.17.2
to0.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
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;
};
Decision Table
<yyy>
is not rendered”Good Faith Declaration
Description
See console on https://app.gricdeq.org/ for live example till fixed crosses fingers
From the console
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
RNRH Version
6.3.4
Tested Platforms
Reproduction Platforms
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