Bug in example project with-tailwind #9767
Description
Verify canary release
- I verified that the issue exists in the latest Turborepo canary release.
Link to code that reproduces this issue
https://github.com/vercel/turbo/tree/main/examples/with-tailwind
Which canary version will you have in your reproduction?
turbo 2.3.3
Enviroment information
turbo 2.3.3
CLI:
Version: 2.3.3
Path to executable: ./node_modules/.pnpm/turbo-darwin-arm64@2.3.3/node_modules/turbo-darwin-arm64/bin/turbo
Daemon status: Running
Package manager: pnpm
Platform:
Architecture: aarch64
Operating system: macos
WSL: false
Available memory (MB): 27208
Available CPU cores: 10
Environment:
CI: None
Terminal (TERM): xterm-256color
Terminal program (TERM_PROGRAM): iTerm.app
Terminal program version (TERM_PROGRAM_VERSION): 3.5.11
Shell (SHELL): /bin/zsh
stdin: false
Expected behavior
The with-tailwind example project creates a functioning NextJS 15 project that builds without issues
Actual behavior
Type error in both apps:
web:build:
web:build: ./src/app/layout.tsx:17:5
web:build: Type error: Cannot find namespace 'JSX'.
web:build:
web:build: 15 | }: {
web:build: 16 | children: React.ReactNode;
web:build: > 17 | }): JSX.Element {
web:build: | ^
web:build: 18 | return (
web:build: 19 | <html lang="en">
web:build: 20 | <body className={inter.className}>{children}</body>
To Reproduce
- npx create-turbo@latest --example with-tailwind
- turbo build
Additional context
The Layout.tsx generated by npx create-turbo@latest --example with-tailwind is different from NextJS' 15 own starter template npx create-next-app@latest
From "with-tailwind"
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}): JSX.Element { // <-- issue
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}NextJS default starter template does not include the JSX.Element return type:
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
}