Next.js: TypeScript JSX support for _document

[jatsrt]

If using TypeScript with "preserve" which generates "jsx" files, you cannot define _document as the framework looks for a _document.js and not _document.jsx.

[jatsrt]

To be fair, this would not work if using ".jsx" without typescript also.

[corydeppen]

You can try using react-native for the jsx option as the example app in this repo illustrates. Per the TS doc, this will output files with the js extension as Next expects.

[jatsrt]

@corydeppen thanks, already doing that. But in canary "jsx" support is one of the items. Might make sense to extend that so it supports JSX for anything in pages.

[corydeppen]

You mentioned you were using preserve, which is a different option than react-native. Do you need to support jsx files and can't switch to using "jsx": "react-native" in tsconfig.json?

I'm on [email protected] and _document seems to work fine with [email protected]. I've added a _document.tsx file in my pages directory (which gets compiled to .js), included a link tag for a global style sheet, and the page renders with the expected markup.

I apologize if I'm misunderstanding the issue.

[jatsrt]

I was using "react-native" with 4.2.1, but with the release of 4.3.0 "JSX support" was added. So, switched to "preserve" as it makes more sense to use "preserve" than "react-native".

"preserve" will produce a _document.jsx instead of _docuemnt.js. Since 4.3 supports JSX, it would make sense that it would support _document.jsx as part of that, therefore allowing users to use "preserve" without confusion or later needing to switch back to "react-native".

[timneutkens]

Yeah, this is a bug, good catch! Will add a label for now and fix it later on 👍