build with latest yarn throw error

[ullaskunder1]

Current behavior:

When trying to compile a React project using @emotion/react, the following error occurs:

Resolve error: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './types/jsx-namespace' is not defined by "exports" in /node_modules/@emotion/react/package.json

To reproduce:

1. Set up a React project with @emotion/react.
2. Try to compile the project.

Expected behavior:

The project should compile without errors.

Environment information:

• react version: 18.3.3
• @emotion/react version: 11.11.0
• yarn version: 4.3.1
• node version: v20.15.1

Additional Information:

Code:

// package.json
"scripts": {
    "complie:dev": "dotenv -e .env.dev react-scripts build"
},
"devDependencies": {
    "@emotion/eslint-plugin": "^11.11.0",
    "@types/react": "^18.3.3",
    "@typescript-eslint/eslint-plugin": "^5.9.1",
    "@typescript-eslint/parser": "^5.9.1",
    "dotenv-cli": "^5.1.0",
    "eslint": "^8.6.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-import-resolver-typescript": "^2.5.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "prettier": "^2.7.1",
    "react-app-rewired": "^2.2.1"
},

// tsconfig.json
{
    "compilerOptions": {
        "types": ["@emotion/react", "@emotion/react/types/jsx-namespace"],
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "jsx": "react-jsx",
        "jsxImportSource": "@emotion/react",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true
    },
    "include": ["src"]
}

// React component example
import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
import { Navigate, useLocation } from 'react-router-dom';
import { AuthContext } from '../utils/Auth';

type Props = {
  children: ReactJSXElement;
};

---

[ENvironmentSet]

You don't need to explicitly link emotion to typescript compilation steps. tsc will find type definitions itself.