0
145
ViewsFunction not working in app.js but in index.html working library reactjs
I'm having a problem when using a function from the New Relic library,
If I use this function in public/index.html (command in codesandbox) it works:
screenshot in inspect element working :
well the problem is if I create my own helpers function and create in app.js it doesn't work
below is the app.js file :
import { useEffect } from "react";
import { newRelicConfig } from "./newRelic";
import "./styles.css";
export default function App() {
useEffect(() => {
let script = document.createElement("script");
script.type = "text/jsx";
script.innerHTML = newRelicConfig(
"3277692",
"3277692",
"NRJS-93eea892ddd7204acfd",
"1091749869"
);
document.body.appendChild(script);
}, []);
return (
<div className="App">
<h1>New Relic</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
in file ./newRelic function newRelicConfig
the function of NRJS does not exist :
How to work around a function in app.js like with index.html ?
1 answers
Answer question0
I'm getting a syntax error while trying to execute your function in newRelix.jsx, so first of all double check the function.
That being said, adding a javascript function in a script tag to your HTML document is not the same as executing that function. You could try adding it as a self invoking function. Also note the the type should be text/javascript (not text/jsx):
useEffect(() => {
let functionBody = newRelicConfig(...); // omitting params here, as they're possibly sensitive
let script = document.createElement("script");
script.type = "text/javascript";
script.innerHTML = `(function(){${functionBody}})();`;
document.body.appendChild(script);
}, []);