Import JSX to avoid tsc namespace error

[karlhorky]

To avoid type error with not being able to find JSX namespace

$ tsc

Error: node_modules/@nkzw/remdx/types.tsx(18,13): error TS2503: Cannot find namespace 'JSX'.
Error: node_modules/@nkzw/remdx/types.tsx(23,20): error TS2503: Cannot find namespace 'JSX'.

My original approach used the React global:

-JSX
+React.JSX

But there's already an import from 'react', so it seems simpler to add to that.

[cpojer]

Huh, this is odd and shouldn't be necessary. What does your TypeScript config look like? Why are you type-checking node_modules?

[karlhorky]

tsconfig.json

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "moduleDetection": "force",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "strict": true,
    "incremental": true,
    "noUncheckedIndexedAccess": true,
    "target": "ES2022",
    "module": "Node16",
    "moduleResolution": "Node16",
    "checkJs": true,
    "jsx": "preserve"
  },
  "include": [
    "remdx-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.js",
    "**/*.jsx",
    "**/*.cjs",
    "**/*.mjs"
  ],
  "exclude": ["node_modules", "slideDecks/*/dist"]
}

remdx-env.d.ts (to get types for the *.re.mdx files)

/// <reference types="@nkzw/remdx/client.d.ts" />

[cpojer]

I tried this with a new ReMDX project and with your config, and this issue does not repro for me.

[karlhorky]

Hmm ok interesting, wonder if it has to do with us using the new types:

package.json

  "devDependencies": {
    "@types/react": "npm:types-react@19.0.0-rc.1",
    "@types/react-dom": "npm:types-react-dom@19.0.0",

Also, elsewhere in the monorepo I have this (I'm guessing it shouldn't affect this package, but maybe something is happening there):

tsconfig.json

"compilerOptions": {
  "jsxImportSource": "@emotion/react",

[karlhorky]

Ah yeah, maybe it's a React 19 thing:

• https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript

[cpojer]

Ugh, that changes makes sense but is kinda annoying.

[cpojer]

Published as 0.14.1.

[karlhorky]

Thanks!