CODEWITHSUNDEEP
typescriptnext.jsbabeljs
user254694
user254694

Reputation: 1612

Typescript with Next throwing unexpected token

So I have the following in my _document.tsx

import Document, { Html, Head, Main, NextScript } from 'next/document';

class CustomDocument extends Document {
  return = (): JSX.Element => (
    <Html lang="en-US">
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

And I am getting

Syntax error: Unexpected token

  2 |
  3 | class CustomDocument extends Document {
> 4 |   return = (): JSX.Element => (

with it pointing to the E in Element as the error.

dependencies:

"@babel/core": "^7.17.9",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@babel/runtime": "^7.17.9",
"next": "^12.1.5",
"react": "17.0.2",
"react-dom": "17.0.2",
"sass": "^1.35.1"

Upvotes: 0

Views: 1018

Answers (1)

user254694
user254694

Reputation: 1612

Essentially the answer is I forgot to add a .babelrc with

{
  "presets": ["next/babel"]
}

once that was present could compile

Upvotes: 1

Related Questions