The default export is not a React Component in page about next-plugins HOT 9 CLOSED

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"
  ]
}

from next-plugins.

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

from next-plugins.

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",
  // ...
}

from next-plugins.

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",
	// ...
  }
}

from next-plugins.

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.

from next-plugins.

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

from next-plugins.

@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.

from next-plugins.

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.

from next-plugins.

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.

from next-plugins.