Cannot find namespace 'JSX'

[chshouyu]

What version of astro are you using?

1.4.7

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

I create a project use npm create astro@latest, and select the blog template, after it is done, I use this build script:

"build": "astro check && tsc --noEmit && astro build"

it is from https://docs.astro.build/en/guides/typescript/#type-checking

it report some typescript error:

node_modules/@types/mdx/index.d.ts:66:58 - error TS2503: Cannot find namespace 'JSX'.

66     export default function MDXContent(props: MDXProps): JSX.Element;
                                                           ~~~

node_modules/@types/mdx/index.d.ts:76:14 - error TS2300: Duplicate identifier 'default'.

76     export { default } from '*.mdx';
               ~~~~~~~

 node_modules/astro/client-base.d.ts:17:17
   17  export default load;
                      ~~~~
   'default' was also declared here.

node_modules/@types/mdx/types.d.ts:4:51 - error TS2503: Cannot find namespace 'JSX'.

4 type FunctionComponent<Props> = (props: Props) => JSX.Element | null;
                                                   ~~~

node_modules/@types/mdx/types.d.ts:6:52 - error TS2503: Cannot find namespace 'JSX'.

6 type ClassComponent<Props> = new (props: Props) => JSX.ElementClass;
                                                    ~~~

node_modules/@types/mdx/types.d.ts:11:65 - error TS2503: Cannot find namespace 'JSX'.

11     [key: string]: NestedMDXComponents | Component<any> | keyof JSX.IntrinsicElements;
                                                                  ~~~

node_modules/@types/mdx/types.d.ts:22:19 - error TS2503: Cannot find namespace 'JSX'.

22     [Key in keyof JSX.IntrinsicElements]?: Component<JSX.IntrinsicElements[Key]> | keyof JSX.IntrinsicElements;
                    ~~~

node_modules/@types/mdx/types.d.ts:22:54 - error TS2503: Cannot find namespace 'JSX'.

22     [Key in keyof JSX.IntrinsicElements]?: Component<JSX.IntrinsicElements[Key]> | keyof JSX.IntrinsicElements;
                                                       ~~~

node_modules/@types/mdx/types.d.ts:22:90 - error TS2503: Cannot find namespace 'JSX'.

22     [Key in keyof JSX.IntrinsicElements]?: Component<JSX.IntrinsicElements[Key]> | keyof JSX.IntrinsicElements;
                                                                                           ~~~

node_modules/@types/mdx/types.d.ts:49:47 - error TS2503: Cannot find namespace 'JSX'.

49 export type MDXContent = (props: MDXProps) => JSX.Element;
                                                ~~~

node_modules/astro/client-base.d.ts:17:17 - error TS2300: Duplicate identifier 'default'.

17  export default load;
                  ~~~~

 node_modules/@types/mdx/index.d.ts:76:14
   76     export { default } from '*.mdx';
                   ~~~~~~~
   'default' was also declared here.


Found 10 errors in 3 files.

Errors  Files
    2  node_modules/@types/mdx/index.d.ts:66
    7  node_modules/@types/mdx/types.d.ts:4
    1  node_modules/astro/client-base.d.ts:17

you can just run npx tsc --noEmit in stackblitz terminal, you will find it.

Link to Minimal Reproducible Example

https://stackblitz.com/github/withastro/astro/tree/latest/examples/blog

Participation

• I am willing to submit a pull request for this issue.

[Princesseuh]

Seems like the MDX types expect to have access to a JSX.Element in the namespace, which we don't unless a JSX framework is installed.

Not sure how to fix this at the current time (we don't even rely on those types ourselves 😅), but in the meantime enabling skipLibCheck will fix this. Will see if there's a way to fix this, though

[chshouyu]

@Princesseuh actually not only MDX, but astro/client-base.d.ts also report some typescript error

[Princesseuh]

@Princesseuh actually not only MDX, but astro/client-base.d.ts also report some typescript error

Yes, because the MDX types also define types for *.mdx modules, so TypeScript complain that there's multiple definitions

[chshouyu]

Maybe skipLibCheck: true is the right solution, many well-known projects using typescript are also configured this way.

https://github.com/vercel/next.js/blob/canary/examples/blog/tsconfig.json
https://github.com/tsconfig/bases/blob/main/bases/recommended.json

[timfee]

+1 -- both to the problem, and that skipLibCheck fixes it :)