christo-pr / dangerously-set-html-content Goto Github PK

TS7016: Could not find a declaration file for module 'dangerously-set-html-content'. '/myproj/node_modules/dangerously-set-html-content/dist/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/dangerously-set-html-content if it exists or add a new declaration (.d.ts) file containing `declare module 'dangerously-set-html-content'

version: "dangerously-set-html-content": "^1.0.10",

The following script is working with Chrome, Brave etc. but not with Firefox. Any ideas how come?

<script id="infogram_0_f9a95501-dd35-4d1f-8a2b-936b023b53b9" title="Demonstrationen im Jahr 2022" src="https://e.infogram.com/js/dist/embed.js?Nxk" type="text/javascript"/>

Hi, some strange things happened when I was using this InnerHTML component.
When I tried to include a script from a remote source (with the src attribute) along with another script written by myself, it returned a ReferenceError implying the function from the src script was not being recognized in the script I added. To be more specific, I was implementing a map in my HTML page using Mapbox service and got this error: ReferenceError: mapboxgl is not defined, where the function mapboxgl already exists in the src script.
Has anyone experienced the same issue or was I wrong about the use of this component to some extent?

If you click on the button "Hit here to see magic!" in the example (example/src/App.js) it does NOT work.

This is because DangerouslySetHtmlContent is explicitly coded to render only once:

Node version:
v16.20.

Reactjs version:
17.0.2

Error:
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.2.0" from [email protected]
npm ERR! node_modules/dangerously-set-html-content
npm ERR! dangerously-set-html-content@"*" from the root project

Passing empty string "" to html prop cause a runtime error:

Uncaught Error: html prop cant't be null

The sample code is:

import InnerHTML from "dangerously-set-html-content";

export default function App() {
  return (
    <div className="App">
      <InnerHTML html={""} />
    </div>
  );
}

Working example is:
https://codesandbox.io/s/mutable-violet-g00km1?file=/src/App.tsx

The problem did not exist in dangerously-set-html-content 1.0.8 at least.

Packages:

• dangerously-set-html-content: 1.0.13
• react: 18.2.0

Follow up from this issue

What should be done here?

yarn -v
1.22.18

node -v
v17.9.0

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.0.0 || ^16.0.0 || ^17.0.0" from [email protected]

Recieving this error when trying to change the JS code in the component through state