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

Tips for enforcing strict typing in TypeScript when implementing abstract functions

Consider the following scenario with two classes: abstract class Configuration { abstract setName(name: string); } class MyConfiguration extends Configuration { setName(name) { // set name. } } In this setup, the name parameter in M ...

Mastering Angular Service Calls in TypeScript: A Comprehensive Guide

In the midst of my TypeScript angular project, I am aiming to revamp it by incorporating services. However, I have encountered an issue where when calling a function within the service, the runtime does not recognize it as the service class but rather the ...

Master your code with Rxjs optimization

Looking at a block of code: if (this.organization) { this.orgService.updateOrganization(this.createOrganizationForm.value).subscribe(() => { this.alertify.success(`Organization ${this.organization.name} was updated`); this.dialogRef.close(true ...

Hey everyone, I'm struggling with the latest update of Next.js (version 14). Can anyone confirm if it still supports API routes or if they've removed that feature?

While attempting to create an API in the updated Next.js version (14), I encountered a roadblock. Despite setting up a folder (api) and a file (hello.js) for the API code, it seems that the new version does not support this feature. I even have a screensho ...

Navigating Angular single page application routes within an ASP.NET Web API project

Developed an Angular single-page application with specific routes: /messages /messages/:id By using ng serve, I can navigate to these pages at URLs like localhost:4200/messages and localhost:4200/messages/:id After building the solution, I transferred t ...

How come my ts-mockito spy isn't delegating method calls properly?

In my code, I have a class named MyPresenter which has a method called doOperation(). This method calls another method on a View class that implements an interface and is passed in as a parameter. Below you can find the implementation of the class, interfa ...

Visual Studio 2015 does not support compiling typescript files

I'm encountering some difficulties while attempting to set up node with typescript support in Visual Studio 2015 for my web API application. To start fresh, I deleted the node_module folder along with the package.json and tsconfig.json files. Followi ...

Issue with React Context: The type 'Dispatch<SetStateAction<GiftsType>>' cannot be assigned to type '(arr1: string[], arr2: string[]) => void'

I'm currently working on a project in React+TS where I need to create a context that takes two string arrays and updates an object's state with these arrays. I keep encountering a title typo error in the setChoices function inside the return stat ...

Guide for adding an OnClick event to a MatTable row:

I am looking to add functionality for clicking on a specific row to view details of that user. For instance, when I click on the row for "user1", I want to be able to see all the information related to "user1". Here is the HTML code snippet: <table ma ...

The Next.js server action or function encounters a compilation error when using Babel in the client component

When working in a client component and trying to call an asynchronous server action/function defined in another module, I encountered an issue. export async function addTodo(data: FormData) { await fetch... } Initially, everything was functioning correc ...

Using Typescript to test with Karma, we can inject a service for our

I'm currently experiencing a problem with running tests in my application. I recently transitioned to using TypeScript and am still in the learning process. The specific error I'm encountering is: Error: [$injector:unpr] Unknown provider: movie ...

Angular 6 - The state of the expression was altered after it was verified, different types of constructions

During the build process in debug mode with ng build, I am encountering errors in some components. However, when I switch to production mode using ng build --prod, these errors disappear. I am curious as to why this discrepancy is occurring. Error: Expre ...

Error in TypeScript: The property "component" is not found on the React MUI MenuItem

I am currently working with the react mui MenuItem component and I am trying to turn a menu item into a link. Here is how I have attempted to achieve this: <MenuItem component={<Link href={`/backend/api/exam/${row.id}/result`} />} className={c ...

Storing tokens in Laravel 9 and Next.js: A comprehensive guide

Currently, I am utilizing Laravel 9 with sanctum for API development and Nextjs for Front End creation. https://github.com/laravel/breeze-next However, I am not utilizing certain features of this setup. Once a user logs in, a token is generated. My chal ...

Unlocking the power of sessions in NextJS api routes with with-iron-session

Currently, I am utilizing with-iron-session for authentication in my NextJS application. However, I am encountering difficulties accessing the session cookie when making API calls within my getServerSideProps() function. The API route seems to be unable to ...

Tips for selecting objects based on property in Typescript?

Consider this scenario: import { Action, AnyAction } from 'redux'; // interface Action<Type> { type: Type } and type AnyAction = Action<any> export type FilterActionByType< A extends AnyAction, ActionType extends string > ...

Afterward, Vercel disconnects from Supabase, causing the connection to be dropped

Over the past month, there have been recurring issues with Vercel dropping the connection to Supabase on a daily basis. The support team at Supabase claims that the error ('user not found - and the auth tool is supabase/auth') is not related to ...

Implementing custom color names in Material UI using TypeScript

Currently, I am utilizing Material UI alongside TypeScript and attempting to incorporate custom colors into my theme. While everything seems to be functioning properly, the VSCode linter is displaying the following message: Type '{ tan: string; lightR ...

Reduce the use of if statements

Is there a way to optimize this function by reducing the number of if statements? The currentFeatures are determined by a slider in another file. The cost is updated if the currentFeatures do not match the previousFeatures, and if the user changes it back ...

When working with data in Angular, make sure to use any[] instead of any in app.component.html and app.component.ts to avoid causing overload errors

I'm new to working with Angular, specifically using Angular 15. I have a Rest API response that I need to parse and display in the UI using Angular. To achieve this, I employed the use of HttpClient for making GET requests and parsing the responses. ...