I have an svg that contains a script tag that is interactive and reacts to key presses. I am unable so far to get the svg to work in react.js.

I am able to display the svg statically using an img element:

<img src={*svg code*} alt="svg title" width="400px"/>

doing it this way however doesn't run the script element in the svg and thus it is not interactive. I also tried using the svgr package, and followed the website guide exactly:

npm install --save-dev @svgr/core

import { transform } from '@svgr/core'

const jsCode = await transform(
  svgCode,
  { icon: true },
  { componentName: 'MyComponent' },
) 

when I change variable names and run this I get errors like:

./node_modules/@ampproject/remapping/dist/remapping.mjs Can't import the named export 'TraceMap' from non EcmaScript module (only default export is available)

and a bunch of other errors but with "TraceMap" replaced with something else

side note: in my element in my svg, I have

type="text/javascript"

since the errors say 'from non EcmaScript...' I changed it to

type="application/ecmascript"

I get the same errors either way.

Im not sure what the difference is, its just the two versions I am aware of.

Anybody know what Im doing wrong? I believe the svgr is the solution somehow, but not the way im doing it.

Any ideas?

Thanks!!!