Next.js Discord

Discord Forum

Path alias doesn't work in Turborepo

Answered
Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
I installed a brand new turborepo setup, and added following to the tsconfig.json for the default web Next.js app included.

    "paths": {
      "@/*": ["./*"]
    }


Which results in following error:

Unable to resolve path to module '@/components/test'.eslint(import/no-unresolved)


If I look at the eslint configuration, it should already resolve the tsconfig import:

const { resolve } = require("node:path");

const project = resolve(process.cwd(), "tsconfig.json");

/*
 * This is a custom ESLint configuration for use with
 * Next.js apps.
 *
 * This config extends the Vercel Engineering Style Guide.
 * For more information, see https://github.com/vercel/style-guide
 *
 */

module.exports = {
  extends: [
    "@vercel/style-guide/eslint/node",
    "@vercel/style-guide/eslint/typescript",
    "@vercel/style-guide/eslint/browser",
    "@vercel/style-guide/eslint/react",
    "@vercel/style-guide/eslint/next",
    "eslint-config-turbo",
  ].map(require.resolve),
  parserOptions: {
    project,
  },
  globals: {
    React: true,
    JSX: true,
  },
  settings: {
    "import/resolver": {
      typescript: {
        project,
      },
    },
  },
  ignorePatterns: ["node_modules/", "dist/"],
  // add rules configurations here
  rules: {
    "import/no-default-export": "off",
  },
};


Anyone experienced same before and know how to resolve this?
Answered by Transvaal lion
This works
View full answer

17 Replies

Transvaal lionOP
Do note, that there is no errors in terminal or actual problem importing the component using path alias. And the app is rendering correctly. The problem is the linting error.
Transvaal lionOP
Looks like "@vercel/style-guide/eslint/browser" is the culprit
Ctrl shift p, type “restart eslint server” in vscode
Transvaal lionOP
Hmm… weird. Im not sure what’s wrong then, sorry
Transvaal lionOP
It seems to be an eslint configuration hidden somewhere in the tree of extends 😅
Which is even more weird actually. Cause browser and node are almost identical, apart from env. And node is fine to keep in there.. Wonder if it is the order in which they are imported. 🤔
Ha!
Transvaal lionOP
This works
Answer
Transvaal lionOP
This doesn't.
Lol!
Glad you figured it out
Sometimes webdev just feels like magic
In a bad way
:SheaWeird:
Transvaal lionOP
I chose this path because i was sold on a lie being that "Coding and development is a logical field"