This app is designed to automate the process of creating social media posts. I have a template for the vertical "Cablgram" stored in the backend, and when I make a request, it returns the HTML code for that template. However, I encounter an error when trying to convert the image to display it using the domtoimage library. The error message reads: dom-to-image.js:191 Uncaught (in promise) TypeError: node.cloneNode is not a function.
import './Dashboard.css';
import { useEffect, useState } from 'react'
import { Grid, Image } from 'semantic-ui-react'
import axios from 'axios'
import domtoimage from 'dom-to-image'
import parse from 'html-react-parser'
function Dashboard(props) {
let [posts, setPosts] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
function retain(unsafe) {
return unsafe
.replaceAll("<", '<')
.replaceAll(">", '>')
}
async function getPosts() {
let { data } = await axios.post('http://localhost:3000/templates/get', { vertical_name: 'cablgram' })
let articles = data.articles
let article_htmls = articles.map(async (code) => {
const html = retain(code)
const actual_html = parse(html)
const url = await domtoimage.toPng(wrapper)
return url
})
setPosts(article_htmls)
}
useEffect(() => {
getPosts()
}, [])
return (
<div className="Dashboard page-container">
<div className="title-container">
<h1 className="title">Atlas</h1>
</div>
<div className="subtitle-container">
<span className="subtitle">Curated news from contemporary culture.</span>
</div>
<div className="dashboard-grid-container">
<Grid columns={3}>
{
posts.map((post, index) => (
<Grid.Column key={index}>
{post}
</Grid.Column>
))
}
</Grid>
</div>
</div>
)
}
export default Dashboard
I would appreciate some assistance in understanding what's causing this issue and how I can resolve it.