How to use Typescript Transform with React

Question

I have a component in my React app that requires me using the style transform property. When I did so, my component added a reference to Typescript Transform and now I get the following warning when I compile my app:

./node_modules/typescript/lib/typescript.js
Critical dependency: the request of a dependency is an expression

Here is the reference at the top of my component:

import { transform } from "typescript";

And here is part of my component in question:

<div className={`dropdown-menu dropdown-menu-right border py-0 ${isVisible && " show"}`} 
    style={{position: "absolute", transform: "translate3d(584px, 39px, 0px)", 
    top:0, left:0, willChange: transform}}>
    <div className="bg-white py-2">
        <span className="dropdown-item">Display temp in</span>
        <div className="dropdown-divider"></div>
        <a className="dropdown-item" href="#!" 
            onClick={() => setMetric(true)}>Fahrenheit &#8457;</a>
        <a className="dropdown-item" href="#!" 
            onClick={() => setMetric(false)}>Celsius &#8451;</a>
    </div>
</div>

Specifically: transform: "translate3d(584px, 39px, 0px)" in my style prop.

I am not exactly sure why this is happening. Do I even need Typescript for this? If so how should solve this issue?

Answer 1

willChange css attribute value has to be a string:

willChange: "transform"

Remove this line: import { transform } from "typescript";