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?

hoangdv · Accepted Answer · 2021-03-31 02:19:43Z

3

willChange css attribute value has to be a string:

willChange: "transform"

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

answered Mar 31, 2021 at 2:19

hoangdv

16.3k4 gold badges31 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

scapegoat17 Over a year ago

Thank you! This did fix it for me.

Collectives™ on Stack Overflow

How to use Typescript Transform with React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related