The default export is not a React Component in page

[polo13999]

Next5TsAsyncProblem

"target": "esnext",
"module": "esnext",

if tsconfig.json use above config that server part can't use import

so I setup like
"target": "es2015",
"module": "commonjs",

but When I use "async getInitialProps" that will show error

The default export is not a React Component in page: "/"
Error: The default export is not a React Component in page: "/"
    at App.render (/Users/user/Sites/learning/Next5TsAsyncProblem/node_modules/next/dist/lib/app.js:100:15)
    at resolve (/Users/user/Sites/learning/Next5TsAsyncProblem/node_modules/react-dom/cjs/react-dom-server.node.development.js:2149:18)
    at ReactDOMServerRenderer.render (/Users/user/Sites/learning/Next5TsAsyncProblem/node_modules/react-dom/cjs/react-dom-server.node.development.js:2260:22)
    at ReactDOMServerRenderer.read (/Users/user/Sites/learning/Next5TsAsyncProblem/node_modules/react-dom/cjs/react-dom-server.node.development.js:2234:19)

if remove async will be ok

how to fix this?

https://github.com/polo13999/Next5TsAsyncProblem

[lfades]

Hi, I replicated your example and everything is working as expected, No errors whatsoever in pages

Try updating packages, or remove node_modules and install them again

[styfle]

I had a similar problem with TypeScript and I had to change my tsconfig.json to the following:

{
  "target": "esnext",
  "module": "esnext",
  "moduleResolution": "node",
  "jsx": "preserve",
  // ...
}

[ddgromit]

For the record, if you are using "module": "commonjs" so you can use a custom server.js, then you must also set "target": "es5" and everything will be OK. Not sure why that works but that is the fix.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
	// ...
  }
}

[maritz]

It only works for me when I set module to "esnext" and create a separate tsconfig.json for my custom server.ts with module "commonjs".

But then I'm still left with the problem that running my tests in jest doesn't work, because the jest run is done in node so it would require commonjs but then I can't import the files that are compiled to esnext.

I'm not using next-typescript though, maybe that will fix it. No time to test it this moment though.

[timneutkens]

https://github.com/zeit/next.js/tree/canary/examples/with-jest-typescript

[maritz]

@timneutkens yes, that's what I hadn't had time yet to test.

Turns out for some reason I still can't get it to work in my project. Which lead me to see vercel/next.js#3663 which is closed but other people have the same problem as well.

It works fine in the example, but I cannot get my actual project to run tests properly. It's always either "unexpected token import" or "unexpected token" at <MyComponent> (fails to transpile tsx?).

There is something really wrong there and I'm ~65% sure it has to do with esnext default imports/exports. But I think next.js issue #3663 is the one where this should be continued.

[mightyhorst]

Are you exporting the default component?

Export default component

e.g. as a class

class Homepage extends React.Component{
      render(){
         return (<main> Hello World </main>);
      }
} 
export default HomePage;

or as a pure function:

const HomePage = () => (
    <main>Hello World</main>
)
  
export default HomePage

Config

PS: My tsconfig was the one autogenerated by nextjs

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}

[tlchatt]

Are you exporting the default component?

Export default component

e.g. as a class

class Homepage extends React.Component{
      render(){
         return (<main> Hello World </main>);
      }
} 
export default HomePage;

or as a pure function:

const HomePage = () => (
    <main>Hello World</main>
)
  
export default HomePage

Config

PS: My tsconfig was the one autogenerated by nextjs

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}

This solved my issue, just forgot to add my export at the bottom.

[danalexilewis]

TLDR: I am using next v9.5.3 and the problem was with my tsconfig.json - update the target, libs and module to es5 or esnext. or use the node12 base as described below.

For anyone finding themselves here - I got caught on this error as I had extended the tsconfig recommended base rather then the node12 base

Once I did this nextjs asked me to add a couple more things like "jsx": "preserve" and then we were up and running.