What are the steps to set up NextJS 12.2 with SWC, Jest, Eslint, and Typescript for optimal configuration?

Having trouble resolving an error with Next/Babel in Jest files while using VSCode. Any suggestions on how to fix this?

I am currently working with NextJS and SWC, and I have "extends": "next" set in my .eslintrc file.

Error message: Parsing error - Cannot locate module 'next/babel'

Here is a snippet from my package.json file:

{
...
  "dependencies": {
    "@emotion/cache": "^11.9.3",
    "@emotion/react": "^11.9.3",
    "@emotion/server": "^11.4.0",
    "@emotion/styled": "^11.9.3",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.9.2",
    "next": "12.2.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
  },
  "devDependencies": {
    "@swc/core": "^1.2.220",
    "@swc/jest": "^0.2.22",
    "@testing-library/dom": "^8.16.0",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "14.3.0",
    "@types/node": "^18.6.3",
    "@types/react": "18.0.15",
    "@types/testing-library__jest-dom": "^5.14.5",
    "eslint": "8.20.0",
    "eslint-plugin-testing-library": "^5.6.0",
    "jest": "^28.1.3",
    "jest-environment-jsdom": "^28.1.3",
    "next-transpile-modules": "9.0.0",
    "typescript": "^4.6.2"
}
typescriptjestjsnext.jseslintswc-compiler

Answer №1

The issue stemmed from the behavior of file types and extensions. The problem was caused by using Module.Exports with a .eslintrc.js file. Switching to a .eslintrc file in json format resolved the error.

// .eslintrc.js - Not functional

// Commented out for testing
// do this module.exports = require("baseconfig/eslint-preset"); 

module.exports = {
    extends: ["prettier", "next/core-web-vitals"],
    plugins: ["testing-library"],
    settings: {
      next: {
        rootDir: ["apps/*/", "packages/*/"],
      },
    },
    rules: {
      "@next/next/no-html-link-for-pages": "off",
    },
    overrides: [
      // Only applies Testing Library lint rules in test files
      {
        "files": [
          "**/__tests__/**/*.[jt]s?(x)",
          "**/?(*.)+(spec|test).[jt]s?(x)"
        ],
        "extends": ["plugin:testing-library/react"]
      }
    ]
  };

// .eslintrc - Functional
{
    "extends": ["prettier", "next/core-web-vitals"],
    "plugins": ["testing-library"],
    "settings": {
      "next": {
        "rootDir": ["apps/*/", "packages/*/"],
      },
    },
    "rules": {
      "@next/next/no-html-link-for-pages": "off",
    },
    "overrides": [
      // Only uses Testing Library lint rules in test files
      {
        "files": [
          "**/__tests__/**/*.[jt]s?(x)",
          "**/?(*.)+(spec|test).[jt]s?(x)"
        ],
        "extends": ["plugin:testing-library/react"]
      }
    ]
  }

Answer №2

Have you already set up your jest.config.js file as recommended in the official Next.js documentation? Visit this link for more information

  transform: {
    '\\.[jt]sx?$': ['babel-jest', { presets: ['next/babel'] }],
  },

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

Is it possible to run both a Spring Boot JAR and Next.js app on the same port within a packaged JAR

Is it possible to run NextJs code on a different port like 3000, and have it combined with Springboot in an executable Jar/WAR (with embedded Tomcat) running on default port 8080? Can the combined application jar/war be configured to run on a single port? ...

javaspring-bootnext.js

For each array element that is pushed, create and return an empty object

I am encountering an issue with an array where the objects are being generated by a push operation within a function. Despite successfully viewing the objects directly in the array, when I attempt to use forEach to count how many times each id uses the ser ...

javascriptnode.jstypescript

Steps to create a typewriter effect using a collection of words

I managed to create a looping typewriter effect, but I'm facing an issue where the first word in the array is not being typed again after the first cycle. Additionally, I am seeing 'undefined' displayed after the last word before it repeats ...

javascriptreactjsnext.js

What is the importance of including the `user server` directive at the beginning of server actions?

As outlined in the documentation for next.js, by default, the server component is used. However, according to the server actions documentation's server components section, the server actions within the server component must include the 'use serve ...

reactjsnext.jsnext.js14

The generation of React Native Jest coverage results may vary depending on how an ES6 module is exported

I am working with a React Native button component that consists of its own index.js and styles.js files. The content of styles.js is as follows: import { StyleSheet } from "react-native"; export default StyleSheet.create({ container: { borderRadius ...

javascriptreact-nativejestjs

"Implementing U2F Authentication in NextJS: A Step-by-Step

Currently, I am looking to integrate U2F into my NextJS project using the beta version of NextJS 13. The server-side code is already functional with the u2f library, but I'm unsure how to implement it on the client side. const U2F = require("u2f ...

node.jsauthenticationnext.jswebauthnfido-u2f

My Nextjs project is encountering deployment issues with both Netlify and Heroku

Whenever I attempt to deploy my application on Heroku or Netlify, I encounter an ERROR related to an incorrect import path. It's perplexing because the import is accurate and functions properly locally. Log ./pages/_app.tsx:7:27 6:31:19 PM: Type err ...

reactjstypescriptherokunext.jsnetlify

Asserting types for promises with more than one possible return value

Struggling with type assertions when dealing with multiple promise return types? Check out this simplified code snippet: interface SimpleResponseType { key1: string }; interface SimpleResponseType2 { property1: string property2: number }; inter ...

javascripttypescriptpromise

Configuring the parameters property for a SSM Association in AWS CDK

I am working on utilizing the AWS Systems Manager State Manager to automate shutting down an RDS instance at 9PM using a cron job. Currently, I am constructing the CloudFormation template with the help of AWS CDK. While going through the AWS CDK documenta ...

typescriptaws-cdk

Table of contents not working on Vercel, yet functions properly on localhost

I'm struggling to incorporate a dynamic table of contents into my blog page on next.js. The code functions perfectly on my local server, but upon deploying it to Vercel, I encounter the following error: TypeError: Cannot read properties of undefined ( ...

javascriptwebnext.jsverceltableofcontents

Using i18next to efficiently map an array of objects in TypeScript

I am currently converting a React project to TypeScript and using Packages like Next.js, next-i18next, and styled-components. EDIT: The information provided here may be outdated due to current versions of next-i18next. Please check out: Typescript i18ne ...

typescriptnext.jsreact-i18next

The request.files property in express-fileupload is consistently coming back as undefined

I am trying to achieve the task of uploading a file from my browser and sending it via POST to an Express.js application, which will then download the file using express-fileupload. Here is the client-side JavaScript code I have written so far: // Triggere ...

javascripttypescriptexpress

No declaration file was located for the module '@handsontable/react' despite the presence of a 'd.ts' file

Embarking on a fresh project using vite+react+ts+swc by executing the command below as per the vite documentation. npm create vite@latest -- --template react-swc-ts Additionally, I integrated the handsontable library into my setup with the following comm ...

reactjstypescriptvitehandsontable

Sending a parameter to a confidential npm module

I've developed a custom npm module that can be used in my applications by including this code snippet in the HTML: <app-header-name></app-header-name> Here is the TypeScript code inside the npm package: import { Component, OnInit } from & ...

javascriptnode.jsangulartypescriptnpm

Encountering a 404 error when translating URLs in Next.js i18n?

I am developing a multilingual service utilizing next-i18next. I wanted to have some of my routes translated as well, for example: EN: /contact => default language IT: /fa/ارتباط-با-ما => second language To achieve this, I utilized tran ...

javascriptnext.jsi18next

issues arise with tests following the transition from Angular 9 to Angular 10

Recently, I encountered an issue with my jest-tests after updating Angular from version 9 to 10. These tests were working perfectly fine before the update. Can someone guide me on how to resolve this issue? Below is one of the tests that is causing troubl ...

angulartestingjestjsangular10

Steps to modify the CSS of a custom component in Angular 8

I have been attempting to override the css of a custom component selector, however, my attempts have been unsuccessful. I have tried using ":ng-deep" but it hasn't worked. How can I go about finding a solution for this issue? app.component.html: < ...

csstypescriptangular7angular8

Extract data from an HTTP request and assign it to variables using filter and map in Angular

I need to extract data from an http get request and assign it to 3 separate variables once fetched. Data: [ { reportId: 1, results1: [{ name: "TotalReferralsMade", optionId: 3082, factor: 1, description: null ...

typescriptangular

Troubleshooting native web worker issues in Angular 11 - Addressing the Element Bug

After upgrading Angular to version 11, I encountered issues with utilizing web workers for heavy data processing in my project. Previously, I used webworkify-webpack (https://www.npmjs.com/package/webworkify-webpack), but it stopped working post-migration. ...

angulartypescriptwebpackweb-worker

Setting a random number as an id in the constructor in Next JS can be achieved by generating a

What steps can be taken to resolve the error message displayed below? Error: The text content does not match the HTML rendered by the server. For more information, visit: https://nextjs.org/docs/messages/react-hydration-error Provided below is the code i ...

javascriptreactjsnext.js