Encountering an unexpected token error when using Typescript with Next

Currently, this is what I have in my _document.tsx file:

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>
  );
}

However, an error is being thrown:

Syntax error: Unexpected token

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

The error message specifically points to the letter E in Element.

Here are the listed 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"

Answer №1

Basically, I overlooked including a .babelrc file containing

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

After adding that, the code successfully compiled.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In React, components will consistently render the initial code

I have a chat application that requires authentication and uses cookies. Here's what I've been attempting: class AppHeader extends React.Component { constructor(props) { super(props) } render() { if (cookies.get(' ...

VIDEOJS ERROR: A peculiar mistake has occurred. TypeError: The property 'value' cannot be read since it is undefined in the context of

Recently, I came across a fascinating plugin called videojs-thumbnails for video.js, and I'm eager to incorporate it into my angular component. However, I keep encountering an error that says: VIDEOJS: ERROR: TypeError: Cannot read property 'val ...

In the Next.js environment, the utilization of chartjs's cutoutPercentage and tooltips features may not

For my next.js project, I am utilizing the react-chartjs-2 library to generate charts. I have encountered an issue where the cutoutPercentage property in chart.js, which is supposed to make the donut chart thinner, does not seem to work properly in next. ...

Execute consecutive Angular2 functions in a sequential manner, one following the next

In my Angular2 project, I have a service that fetches data for dropdown menus on a form. However, when I call this service multiple times with different parameters in the form component initialization, only the last call seems to work, overriding the previ ...

What is the best way to retrieve all designs from CouchDB?

I have been working on my application using a combination of CouchDB and Angular technologies. To retrieve all documents, I have implemented the following function: getCommsHistory() { let defer = this.$q.defer(); this.localCommsHistoryDB ...

Error: The connection to the database was terminated unexpectedly during the execution of the NextJs API

I am currently utilizing Vercel Serverless functions to create API Endpoints for my Next.js application. MongoDB is being used to store an Array of Objects. Here is the serverless function I have: // api/global/addlink.js const MongoClient = require("mon ...

How can you automatically scroll to the top of the window in Next.js after updating the search value in a search bar?

Picture a scenario where there is a button placed somewhere. Once this button is clicked, the text on it moves to my search bar. How can I also make the window scroll down to the search bar after the value is set in the Input element displayed below? ...

Updating a one-to-one relationship in TypeORM with Node.js and TypeScript can be achieved by following these steps

I am working with two entities, one is called Filter and the other is Dataset. They have a one-to-one relationship. I need help in updating the Filter entity based on Dataset using Repository with promises. The code is written in a file named node.ts. Th ...

Having trouble performing an Image (base64) update in Next.js

Hi everyone, I'm facing a challenge with updating the image data in my code. The base64 string data updates correctly and the new image is displayed before submitting the data. However, once I submit the data, the image doesn't update. Below is ...

Converting Enum into an array in TypeScript to return the keys of the Enum

After defining the following enum: export enum Types { Type1 = 1, Type2 = 2, ... } We can create an array based on this enum with the function below: export function EnumKeys<T>(obj: object): string[] { return Object.keys(obj) ...

Firebase data not appearing on screen despite using the async pipe for observables

My current challenge involves accessing data based on an id from Firebase, which comes back as an observable. Upon logging it to the console, I can confirm that the Observable is present. However, the issue arises when attempting to display this data on th ...

The term 'Pick' is typically used to identify a specific type, however, in this particular situation, it appears to be functioning as a value while attempting to expand the Pick

I'm attempting to selectively expose certain properties from an ancestor class on my descendant class. My approach involves using the Pick utility in TypeScript. export class Base { public a; public b; public c; } export class PartialDes ...

`Developing reusable TypeScript code for both Node.js and Vue.js`

I'm struggling to figure out the solution for my current setup. Here are the details: Node.js 16.1.x Vue.js 3.x TypeScript 4.2.4 This is how my directory structure looks: Root (Node.js server) shared MySharedFile.ts ui (Vue.js code) MySharedFi ...

Trouble obtaining client side cookies in NextJS without needing to refresh the page

After a user logs in, I ensure the cookies are set using js-cookie for easy client side access. The cookies need to be accessible on the client side as I utilize Redux Toolkit for handling async thunk requests. export async function apiLogin({ email, pass ...

The useEffect hook in React is signaling a missing dependency issue

Any tips on how to resolve warnings such as this one src\components\pages\badge\BadgeScreen.tsx Line 87:6: React Hook useEffect has a missing dependency: 'loadData'. Either include it or remove the dependency array react-hoo ...

State loss occurs when moving to a different page using next/link

Currently, I am working on a library application with Next.js. Within this project, there are two main pages: BooksPage, which displays a list of all books, and BookPage, where detailed information about a specific book is shown. The components involved in ...

New configuration for NextJS: Redefining redirects in a separate file

Transitioning from my old WordPress site to a fresh, sleek Next.js platform has been an exciting journey. One challenge I've encountered is dealing with the numerous redirects that need to be set up. I prefer keeping things organized and clutter-free, ...

What is the correct way to invoke a method from a generic in TypeScript?

My goal is to develop a function that invokes a specific method on a generic object. Here's my initial attempt: type MethodName<S extends Object, M extends keyof S> = S[M] extends Function ? M : never const callMethod = <S, M extends keyof ...

What is the best way to utilize my data with Charts.js for my specific situation?

I am utilizing Charts.js in my Angular project (not AngularJS) and I am trying to create a graphic representation with data from my database that shows the distribution between men and women. However, I am struggling to figure out how to loop through the d ...

Discover the Next.js App Directory: Automatically refresh the client component when an async function is completed. No need to manually refresh the page for

Seeking assistance with updating a client component in Next.js without a SRC folder and using app router. The component is part of a globally present menu and should update when the user logs in, but currently only refreshes after a browser reload. Various ...