Eslint + Typescript + Nextjs 10 absolute imports cannot find module or its corresponding type declarations

[hjaimee]

Hey,

I'm trying to get my eslint to stop complaining about the absolute imports in NextJs 10.0.3 but been struggling even with solutions I believe should be working. The application runs fine and can access all of the imported modules but eslint is showing me the following error:

Cannot find module '@contexts/folder/folder' or its corresponding type declarations.

Thanks ahead of time for any response and really appreciate the help.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "sourceMap": false,
    "isolatedModules": true,
    "noImplicitAny": false,
    "noImplicitReturns": true,
    "noImplicitThis": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "jsx": "preserve",
    "baseUrl": "./src",
    "declaration": true,
    "types": ["@emotion/react/types/css-prop"],
    "typeRoots": [
      "../node_modules/@types"
    ],
    "paths": {
      "@static/*": ["../public/static/*"],
      "@generated/*": ["/__generated__/*", "/**/__generated__/*"],
      "@*": ["/*"]
    }
  },
  "exclude": [
    "node_modules",
    "public",
    "server.js",
    "**/*.spec.ts",
    "**/*.spec.tsx",
    "**/*.test.ts",
    "**/*.test.tsx"
  ],
  "include": [
    "next-env.d.ts",
    "/src/**/*.ts",
    "/src/**/*.tsx",
    "next.config.js"
  ]
}

.eslintrc

{
  "globals": {
    "BMap": true,
    "React": "writable"
  },
  "root": true,
  "extends": [
    "prettier",
    "prettier/react",
    "airbnb-typescript-prettier",
    "plugin:import/typescript",
    "plugin:import/errors",
    "plugin:import/warnings"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint",
    "prettier",
    "react-hooks"
  ],
  "env": {
    "browser": true,
    "es6": true,
    "node": true,
    "es2020": true
  },
  /** rule options:
   * 0 -> "off"
   * 1 -> "warn"
   * 2 -> "error"
   **/
  "rules": {
    "semi": ["error", "never"],
    "quotes": ["error", "single"],
    "no-console": 0,
    ...additional rules omitted
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "path": ["src"]
      },
      "typescript": {
        "project": "."
      }
    },
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    }
  },
  "ignorePatterns": ["node_modules/", ".next/", "**/__generated__/"],
  "overrides": [
    {
      "files": ["cypress/**/*.js"],
      "parser": "babel-eslint",
      "extends": [
        "airbnb",
        "prettier",
        "prettier/react",
        "prettier/@typescript-eslint",
        "plugin:cypress/recommended"
      ],
      "rules": {
        "comma-dangle": [0]
      }
    }
  ]
}

[hjaimee]

If anyone happens to run into this issue and get here I was able to solve the issue by adding the src directory in the include of my tsconfig.json file also note this only worked if I set the following

"baseUrl": ".", // removed src from baseurl "paths": { // ensure paths were updated relative to base url "@static/*": ["./public/static/*"], "@generated/*": ["./src/__generated__/*"], "@*": ["./src*"] } "include": [ "src", // add src directory to be included "next-env.d.ts", "**/*.ts", "**/*.tsx", "next.config.js", "public" ],

[mrfzd]

NextJs doesn't provide "./src" directory by default and what people tend to do is adding "src" at the root directory and forget about "pages" directory.

I had a similar issue and this solved it for me;

"include": [
    "next-env.d.ts",
    "pages/**/*",
    "src/**/*",
],

Hope it helps :)

[kellygue]

I had to restart vscode for it to work.
So if it doesn't work the first time, try restarting vscode.

[arnelamo]

I had everything setup correct. Couldn't for the life of me find the reason it was still not working. Also had to restart VSCode for it to actually work, so make sure you try that.

[websocket98765]

I have the same issue, but with JS, not TS. Discovered my Github Actions had been failing and cannot import using the previously, working absolute paths.

Any ideas what changed in NextJS?

[jamesone]

What was the issue for you? I am facing this issue now :D Only in GH actions

[mrfzd]

I had a similar issue, and my problem was to do with the tsconfig.json, the same thing for jsconfig.json if anybody's using JavaScript instead.
So in your tsconfig or jsconfig, add the following under "include";

...
"include": [
    "next-env.d.ts",
    "pages/**/*",
    "src/**/*",
],
...

Hope it helps :)

[chibaye]

Adding this line to the jest.config.js under moduleNameMapper did the trick for me:
'^@/(.*)$': '<rootDir>/src/$1'

[BrennerSpear]

getting the same issue
trying to access @components/Layout

Here's my tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": false,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "baseUrl": ".",
        "paths": {
            "@components/*": ["/components/*"]
        }
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "components/**/*"],
    "exclude": ["node_modules"]
}

[joey-ma]

I believe this is related to this stack overflow question here, which I've organized my findings in an answer here https://stackoverflow.com/a/73943138/16330123 (different from the one provided here). Hope this helps!