Namespace imports are incompatible with `verbatimModuleSyntax`

[mrcaidev]

Describe the bug

If verbatimModuleSyntax is set to true in tsconfig.json, namespace imports would crash the whole app. For example:

import { JSX } from "solid-js";

I am aware that this is more like an issue on TypeScript side, and I do find a relevant issue #52461 there. In this issue, TypeScript members suggest a particular way to export namespaces, and the failure of other ways is an expected behavior.

Currently, I can solve this by turning off verbatimModuleSyntax to stop my app from crashing. But I'm wondering if this can be avoided on SolidJS side? That is, modifying the style in which namespaces are exported, so that they can become compatible with verbatimModuleSyntax.

Your Example Website or App

https://codesandbox.io/p/devbox/importing-jsx-with-tsconfig-verbatimmodulesyntax-62pnqn

Steps to Reproduce the Bug or Issue

1. The app is functioning normally.
2. Import JSX on line 1: import { createSignal, JSX } from "solid-js";.
3. Refresh the page.
4. The app crashes.

Expected behavior

Namespace imports should work along well with "verbatimModuleSyntax": true.

Screenshots or Videos

Platform

• OS: Linux (CodeSandbox Devbox)
• Browser: Microsoft Edge (CodeSandbox Devbox)
• Version: 1.8.17

Additional context

Log:

11:39:11 PM [vite] Error when evaluating SSR module /home/mrcaidev/cinema/src/routes/index.tsx?pick=default&pick=$css: failed to import "solid-js"
|- SyntaxError: [vite] The requested module 'solid-js' does not provide an export named 'JSX'
    at analyzeImportedModDifference (file:///home/mrcaidev/cinema/node_modules/.pnpm/vite@5.3.1_@types+node@20.14.2_terser@5.31.1/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:52490:15)
    at nodeImport (file:///home/mrcaidev/cinema/node_modules/.pnpm/vite@5.3.1_@types+node@20.14.2_terser@5.31.1/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:53497:5)
    at async ssrImport (file:///home/mrcaidev/cinema/node_modules/.pnpm/vite@5.3.1_@types+node@20.14.2_terser@5.31.1/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:53349:16)
    at async eval (/home/mrcaidev/cinema/src/components/ui/button.tsx:5:31)
    at async instantiateModule (file:///home/mrcaidev/cinema/node_modules/.pnpm/vite@5.3.1_@types+node@20.14.2_terser@5.31.1/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:53408:5)

[ryansolid]

I'm open to ideas. I'm not sure I understand what they are trying to say in the TS issue. Admittedly my understanding of TS is very limited.

[gtm-nayan]

The linked typescript issue is unrelated, since it's for exports instead of imports, verbatimModuleSyntax means that any imports you write are kept as is, irrespective of whether they're being used as a runtime value or not. The namespace JSX doesn't exist at runtime, so it should be imported with a type prefix.

[ryansolid]

Yeah JSX is just a type for us because we don't use the standard TS JSX transform. Adding the type prefix does seem to work @mrcaidev. Am I missing any other part of the issue or should we consider this done?

[mrcaidev]

No problem. Thank you all!