Question 22363 in SEO Question posted in
Some basic information to get you started with this can be found here.

Nex.js Module path aliases not clickable in vscode – SEO

I’m trying to get module path aliases clickable in vscode

// Ctrl+click Working fine
import Layout from "src/components/layout/Layout";

// Not working
import SEO from "@components/SEO";

My JSconfig.json file

{
  "compilerOptions": {
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "@components/*": ["/src/components/*"],
      "@sections/*": ["/src/sections/*"],
      "@assets/*": ["/src/assets/*"]
    }
  }
}

I have tried everything without success

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here is the solution

    {
  "compilerOptions": {
    "jsx": "react",
    "baseUrl": "./",
    "paths": {
      "@components/*": ["./src/components/*"],
      "@sections/*": ["./src/sections/*"],
      "@assets/*": ["./src/assets/*"]
    }
  }
}

  2. 0

    Had same issue with ‘Go to definition’. And on the end I found it was not working for me because I had both tsconfig.json and jsconfig.json in the project.

    Seems when tsconfig.json is present, alias setting from jsconfig.json are ignored.

    As I want gradually convert stuff into Typescript, but have lot of .js files I kept tsconfig.json, and added "**/*.js" to the "include" list, so it sees also .js files. Now aliases in vscode are clickable.

    tsconfig.json:

    {
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": [
        "components/*"
      ]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.js"
  ]
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search