Open
Description
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:
- Set up a React project with
@emotion/react. - Try to compile the project.
Expected behavior:
The project should compile without errors.
Environment information:
reactversion: 18.3.3@emotion/reactversion: 11.11.0yarnversion: 4.3.1nodeversion: 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;
};