Next.js Discord

Discord Forum

"Unsupported Server Component type: Module"

Answered
West African Lion posted this in #help-forum
Open in Discord
West African LionOP
First time trying out the app router and getting this error when trying to access my page at app/vendor/page.tsx:

Unsupported Server Component type: Module

My server component page is super simple:

export default async function MyPage() {
  return <div />
}


Quote-searching the error on both Google and Discord leads nowhere. Does anybody know what might be going wrong?

I can't see to find any example of server component code in the docs or Next.js Learn, which is still teaching the pages router.
Answered by West African Lion
I found the problem. I had a component called "template.tsx", and didn't realize it was part of the app router file conventions
View full answer

42 Replies

riský
im guessing you don't have any "use client" layouts and messed with tsconfig/package.json with type?
West African LionOP
Error message in console:
✓ Compiled in 214ms (902 modules)
 âš  Fast Refresh had to perform a full reload due to a runtime error.
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
 ⨯ Error: Unsupported Server Component type: Module
    at stringify (<anonymous>)
 ⨯ Error: Unsupported Server Component type: Module
    at stringify (<anonymous>)
My layout is standard too:
import { Inter } from "next/font/google"

import "./globals.css"

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
})

export const metadata = {
  title: "..."
  description: "..."
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={inter.variable}>
      <body>{children}</body>
    </html>
  )
}
riský
and any class components being used? (i kinda havent seen this before ;()
West African LionOP
I don't have type specified in package.json. Checked it out too.
tsconfig is:
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./*"]
    },
    "plugins": [{ "name": "next" }]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
No class components used
If Google doesn't show any results for the error, I'm afraid, nobody has seen this before to be honest 😊
and btw you can get app dir docs by pressing the button
the learn docs aren't updated rn 😭
and some of the examples are app dir: https://github.com/vercel/next.js/tree/canary/examples
@riský and btw you can get app dir docs by pressing the button
West African LionOP
Yea, I know. I am just confused they don't show an example here for instance: https://nextjs.org/docs/app/building-your-application/rendering/server-components
The examples repo is a great idea, will check it out
riský
ohh ok, many people didn't realise its a thing, so i just wanted to make sure you knew
@West African Lion The examples repo is a great idea, will check it out
riský
well it is the nextjs repo and a folder, but yeah
West African LionOP
Makes total sense. Thanks for helping out man
@riský *well it is the nextjs repo and a folder, but yeah*
West African LionOP
Yup. I'm building https://create-next-stack.com and have spent a lot of time in the examples dir 😂
also @West African Lion, you can wrap links in <> and discord won't embed them (so no need to manualy press x
West African LionOP
Oh interesting, will try 😛
#Unknown Channelhttps://google.com</>
https://google.com
Aaaah
Thats nice
Thanks!
riský
let me know how this problem goes 🙂 (im about to go to sleep, but ttyl)
West African LionOP
Will do, sleep tight
@West African Lion Yup. I'm building https://create-next-stack.com and have spent a lot of time in the examples dir 😂
riský
also, btw once you finish this you should post it in #nextjs-showcase or maybe #community-content (look at the rules when you want to post to know which is better)
West African LionOP
Yea, definitely will. Think I did earlier too. Havn't had time to work on it in months
It's missing a lot
riský
well it is a new channel (a forum too), so you can repost it there ([but this is like the only time you can "repost" them](https://canary.discord.com/channels/752553802359505017/752883618606612520/1160113303037673573))
West African LionOP
Aaah, I see!
tyvm
West African LionOP
I found the problem. I had a component called "template.tsx", and didn't realize it was part of the app router file conventions
Answer
riský
loll nice that would do things
West African LionOP
It unfortunate the stack trace doesn't indicate the template.tsx file in any way
They should probably enhance that error messaging
riský
if i tried hard enough, i could find at least 10 things that better error messages would have helped with 😭 (what occures when you help in enough threads)
West African LionOP
You should compile them and open a single discussion on github o:
Instead of all of us giving them small annoying breadcrumbs 😛
riský
i mean, after these, i know what to ask - that is why i asked the prev questions... as similar cases with those