How to properly configure NextJS 12.2 w/ SWC, Jest, Eslint, and Typescript?

Question

Using VSCode and can't resolve error that next/babel with Jest files. Any Suggestions?

I am using NextJS with SWC and have "extends": "next" in my.eslintrc file.

Parsing error: Cannot find module 'next/babel'

This below is 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"
}

Answer 1

Issue was being caused by file type/ extension behavior. Using Module.Exports with a.eslintrc.js file was causing the issue. Converting to.eslintrc in json format resolves the error.

// .eslintrc.js - Does not work

// Commented 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 uses Testing Library lint rules in test files
      {
        "files": [
          "**/__tests__/**/*.[jt]s?(x)",
          "**/?(*.)+(spec|test).[jt]s?(x)"
        ],
        "extends": ["plugin:testing-library/react"]
      }
    ]
  };

// .eslintrc - works
{
    "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

Did you create a jest.config.js? This is from the official Next.js docs https://nextjs.org/docs/testing#jest-and-react-testing-library

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