React string eval doesn't seem to work
See original GitHub issueDescribe the bug I’m trying to run some react code from a string downloaded from a remote source but I keep getting the following error “TypeError: Constructor Text requires ‘new’”. In a standard create-react-app environment this works fine.
import React from 'react';
const Test = () => {
const react = React;
return eval("react.createElement('p', null, 'Testing');")
}
function App() {
return (
<div className="App">
<Test />
</div>
);
}
export default App;
But in react-pdf the equivalent code throws an error.
import React from 'react';
import { PDFViewer, Document, Page, Text } from '@react-pdf/renderer';
const Test = () => {
const react = React;
return eval("react.createElement(Text, null, 'Testing');");
}
function App() {
return (
<PDFViewer>
<Document>
<Page>
<Test />
</Page>
</Document>
</PDFViewer>
);
}
export default App;
Why Do This?
Just for background, I have some html rich text(i.e. <p>This is an <strong>example</strong> string</p>
) I want to render in my react-pdf document. Since this content is dynamic I can’t just rebuild the styling in react-pdf. I don’t believe there is any out of the box way to display html rich text. I am playing with the idea of implementing the html elements in react pdf and just having react-pdf render them.
In a nut shell doing something like this should get me what I need if eval worked as expected.
import React from 'react';
import { PDFViewer, Document, Page, Text } from '@react-pdf/renderer';
import { P, Strong } from './primitives'; // I have replicated all the components I need to use
// Component displays react-pdf interpretation of HTML string
const Test = () => {
const react = React;
// This is an mock of what I would get back in my api response
const htmlString = '<p>This is an <strong>example</strong> string</p>`
const modifiedHtmlString = htmlString.replace(/(<[a-z]|<\/[a-z])+/g, txt => txt.toLocaleUpperCase());
return eval(Babel.translate(modifiedHtmlString, { presets: ["react"] }).code));
}
This is what I have come up with so far for displaying dynamic html rich text content in react-pdf but I’m open to other approaches if a better one exists.
To Reproduce Steps to reproduce the behavior including code snippet (if applies):
- running this code works fine
react.createElement(Text, null, 'Testing');
- running this code throws an error
eval("react.createElement(Text, null, 'Testing');");
Expected behavior I expected that I would be able to eval react code with react-pdf in the same way I could with standard react-dom.
Desktop (please complete the following information):
- OS: MacOS
- Browser Firefox
- React-pdf version [e.g. v1.6.4]
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (5 by maintainers)
Top GitHub Comments
@asgerhallas That’s really cool. I have not messed with acorn before. I don’t see any reason why this won’t work. I’m still curious if @diegomura knows why eval doesn’t work normally in react-pdf but I think this will work around my problem. Thanks!!!
I looked at this and couldn’t figure out why it does not work like that. It’s an edge case though, and it would be better to follow an approach such as the one proposed by @asgerhallas . I’m closing this issue since it’s not something we should encourage to do