add /** @jsxImportSource @emotion/react */ at the top of every file in my CRA project

[TamirCode]

I want have /** @jsxImportSource @emotion/react */ imported at the top of every file behind the scenes. What do I need to do?

[TamirCode]

using CRACO:

npm i @emotion/react
npm i -D @emotion/babel-plugin @craco/craco

create at root of project (next to package.json) file called craco.config.js

module.exports = {
    babel: {
        presets: [
            [
                "@babel/preset-react",
                { "runtime": "automatic", "importSource": "@emotion/react" }
            ]
        ],
        plugins: ["@emotion/babel-plugin"]
    }
}

update scripts in package.json:

    "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
    },

for typescript CRA, make sure to include this in tsconfig inside compilerOptions

"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"