I have installed the better-react-mathjax library to a react project, to aid me with latex, but it doesn't render in production mode, there's no errors in the console nor a warning message, see the snipped below:
{questions[currentQuestionIndex] && (
<Fragment>
<Text
size="xl"
mb="md"
mt="md"
color={'white'}
className={isLoading ? `hidden` : `shown`}
>
<MathJax>
{`${questions[currentQuestionIndex].number}. ${questions[currentQuestionIndex].description}`}
</MathJax>
</Text>
{!isLoading && questions[currentQuestionIndex].figureUrl && (
<Image
className={isLoading ? `hidden` : `shown`}
alt=""
hidden={!questions[currentQuestionIndex].figureUrl}
radius="md"
src={questions[currentQuestionIndex].figureUrl}
/>
)}
</Fragment>
)}
in development mode:
However it does not when I deploy it to vercel:
Any idea of how can I fix this?
I've tried checking the latex markup, whether the latex files and the font is loaded and see if other components on the page have the same issue and surprisingly some parts of the page are rendered, see the screenshot below:
Related
My MapBox Map is working well in development(localhost) but when I deployed the map is not loading the map.
<ReactMapGL
{...viewPort}
mapboxApiAccessToken={process.env.REACT_APP_MAP_BOX_TOKEN}
onViewportChange={setViewPort}
// zoom={13}
mapStyle={process.env.REACT_APP_MAP_BOX_STYLE}
scrollZoom={true}
touchZoom={true}
>
<Marker
longitude={marker.longitude}
latitude={marker.latitude}
offsetTop={-20}
offsetLeft={-10}
draggable
onDragStart={onMarkerDragStart}
onDrag={onMarkerDrag}
onDragEnd={onMarkerDragEnd}
followUserLocation={true}
followUserMode="course"
>
<Pin size={20} />
</Marker>
<GeolocateControl
style={geolocateStyle}
positionOptions={positionOptions}
trackUserLocation
auto
/>
{/* <div className="nav" style={navStyle}>
<NavigationControl showCompass />
</div> */}
</ReactMapGL>
I'm using react-map-gl npm package.
IN LOCALHOST(This is not my location😉)
IN PRODUCTION
NB: I've added Private Token and added URL also in MapBox.
ERROR MESSAGE IN CONSOLE
I JUST DOWNGRADED THE MAPBOX VERSION. NOW IT IS WORKING
I am trying to render the avatar in my listItem in my React_Native Application but the image is not rendering even though my image URI path is correct and it's only giving the gray background.
Here is my code
<View>
{props.dishes.map((l, i) => (
<ListItem key={i} bottomDivider>
<Avatar rounded source={{ uri: l.image }} />
<ListItem.Content>
<ListItem.Title>{l.name}</ListItem.Title>
<ListItem.Subtitle>{l.description}</ListItem.Subtitle>
</ListItem.Content>
</ListItem>
))}
</View>
Here is the image of what I am getting
I want the images to be rendered there but it's showing only a grey background. I also tried putting the URI of online images but it's giving the same result.
I also followed the solutions mentioned here but it is not working.
I also passed the online uri to check if my path uri is incorrect but it the same result
<Avatar
source={{
uri:"https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg",
}}
/>
I solve the issue as passing the path of the image like this was not working
Bypassing an image path like this was rendering only grey background.
<Avatar rounded source={{ uri: "./images/uthappizza.png"}} />
This is how I passed the image path and its rendering properly by using require()
<Avatar rounded source={require("./images/uthappizza.png")} />
I tried several ways, until I found a guy who encouraged me to check emulator connectivity ... and that was the problem!!
To solve it, before running your app, launch emulator with
emulator -avd <your-emulator-name> -dns-server 8.8.8.8
I am developing a web application using React and Semantic UI React as a front-end framework. The application is tested and works in Chrome, Microsoft Edge, Safari and Mozilla Firefox. However in this last browser I noticed a problem with iframes. The image below shows a modal window with iframe with a pdf. The window opens correctly but as soon as I try to click inside it or scroll the pdf downwards, the modal window is displayed incorrectly.
I tried to identify any problems in the rendered HTML code using the Firefox developer tools (F12) but I didn't notice anything.
Â
I am using Firefox v77.0.1 64bit (latest version) and the modal window is implemented as follows:
<Modal closeIcon open={this.state.open} onClose={this.onClose}>
<Modal.Content>
<Steps ... />
<div style={{ width: "100%", height: "500px" }}>
<Iframe url={...} width={"100%"} height={"460px"} />
<Checkbox ... />
</div>
</Modal.Content>
<Modal.Actions>
<Button color='red' onClick={this.props.onRefuse}>
<Icon name='remove' />
Refuse
</Button>
<Button color='green' onClick={this.props.onAccept}>
<Icon name='check' />
Accept
</Button>
</Modal.Actions>
</Modal>
I am creating a project in react but I came across a problem when creating the responsive menu. That is, when using a menu that uses href it does not work on the apache server and Link To does not solve my problem. I have this code:
return (
<div>
<ResponsiveMenu
menuOpenButton={<FaBars size={30} color="MediumPurple" />}
menuCloseButton={<FaRegWindowClose size={30} color="MediumPurple" />}
changeMenuOn="500px"
largeMenuClassName="large-menu"
smallMenuClassName="small-menu"
menu={
<Menu>
<ul>
<li>INICIO</li>
<li>PROJETO</li>
<li>PARCERIA</li>
<li>PLANTAS & LÃ</li>
<li>RECURSOS</li>
<li>CONTACTOS</li>
</ul>
</Menu>
}
/>
</div>
);
I've tried different methods to render an html content from json response to react native.But I got failed in these methods
https://www.npmjs.com/package/react-native-render-html
https://www.npmjs.com/package/react-native-htmlview
Because there is no package that support table tag of html. So I thought to use WebView in react native.But that also disappointed me. There is no field to give html content from json response in WebView. I've tried the following.
But these are not working
code
<WebView
source={{uri: `<h1>Hello World</h1>`}}
style={{marginTop: 20}}
/>
In my case I'm fetching server response.I've double checked whether response is coming ,the response from server is fine.
return (
<Container style={styles.container}>
<View>
{this.state.section.map(article =>
<View>
<WebView
source={{uri:article.data.description}}
style={{marginTop: 20}}
/>
</View>
)}
</View>
</Container>
);
Is there any other method for rendering html content other than these. Please I'm stuck with this.I don't know what to do.This cause delay in my project.So I'm really disappointed.Please any help would be really appreciable.
I've solved the problem.I was using native-base ui kit.So when I tried to render WebView within Container or Content it won't render.So I removed it with View component but ScrollView don't work.So I've made some changes to Container and it is working perfect.But still remains a problem that border of html table is not displaying.But otherwise it is perfect
This is my working code
<Content contentContainerStyle={{ flex: 1 ,padding:15}}>
{this.state.section.map(article =>
<WebView
source={{ html: article.data.description}}
javaScriptEnabled={true}
style={{backgroundColor: 'transparent'}}
/>
)}
</Content>