if tsconfig set absolute path, not working goto file

[fohanist]

Describe the bug I use nextjs, typescript, scss. and tsconfig-paths. example import GridPage from '@f/src/elements/grid/grid_page'; goto file is working. but, import styles from '@f/public/styles/pages/payment/subscription/pricing.module.scss'; is not working goto scss file.

however It works on a relative path. import styles from ../../public/styles/pages/payment/subscription/pricing.module.scss'; is working goto scss file. but, I want to use absolute path..

tsconfig set

"paths": {
      "@f/*": ["./frontend/*"],
    },

next.config.js

  sassOptions: {
    includePaths: [path.join(__dirname, './frontend/public/styles')],
  },

Screenshots

[Viijay-Kr]

@fohanist I haven't used tsconfig-paths lib before . Does it do anything in particular to the way how modules are resolved by VS Code ?

From what you have shared I wonder why the module resolution won't work. So I might have to check this one along with the features provided by tsconfig-paths

Also can you share your entire tsconfig.json if possible ?

[fohanist]

Thank you for showing interest in my question!

When I use the absolute route and in ts-node If the tsconfig-paths lib is not used, the vscode could not read the module's location.

Here are my settings.

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "esnext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "noImplicitAny": false,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@b/*": [
        "./backend/*"
      ],
      "@f/*": [
        "./frontend/*"
      ],
      "@s/*": [
        "./shared/*"
      ]
    },
    "types": ["node"]
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/*.d.ts"
  ],
  "exclude": [
    "**/node_modules",
  ]
}

[Viijay-Kr]

@fohanist Thanks for sharing the tsconfig.json and also for the explanation.

I see you don't use baseUrl so the extension should default to the workspace root.

Is your frontend , backend , and shared folders located at the root of the workspace ?

[fohanist]

@Viijay-Kr As you advised, I set baseUrl as a root and tried it, but it's the same phenomenon as the question.

The following is my folder structure. root/ - ./frontend - ./backend - ./shared - ./tsconfig.json

"baseUrl": "./",
    "paths": {
      "@b/*": ["./backend/*"],
      "@f/*": ["./frontend/*"],
      "@s/*": ["./shared/*"]
    },

[Viijay-Kr]

@fohanist Thanks for sharing. Is it possible to share a minimal reproducible version in a sandbox ? I could download the sandbox if possible and try it out in debug mode

[mliudev]

This is affecting my workspace as well. Exact same issue for absolute path specified with '@'.

[Viijay-Kr]

@mliudev Thanks for reporting. I couldn't reproduce this issue with my setup. Can you list down the version of react css modules` and the operation system ?

[mliudev]

Here's a minimal reproduction repo:

https://github.com/mliudev/react-ts-css-navigation-bug

Instructions are in the README.

[mliudev]

Possibly related

https://github.com/microsoft/vscode/issues/163967

[Viijay-Kr]

@mliudev Thanks for setting up the repo , I am able to reproduce this issue in my machine using your repo. Will debug and see what is going on .

[Viijay-Kr]

@fohanist I just noticed that there is a syntax error in your ts config

Thank you for showing interest in my question!

When I use the absolute route and in ts-node If the tsconfig-paths lib is not used, the vscode could not read the module's location.

Here are my settings.

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "esnext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "noImplicitAny": false,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@b/*": [
        "./backend/*"
      ],
      "@f/*": [
        "./frontend/*"
      ],
      "@s/*": [
        "./shared/*"
      ]
    },
    "types": ["node"]
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/*.d.ts"
  ],
  "exclude": [
    "**/node_modules",
  ]
}

   "exclude": [
     "**/node_modules", // THIS IS AN EXTRA COMMA WHICH MAKES JSON PARSER TO FAIL
   ]

Removing this extra comma could fix the problem . Please restart the window after fixing your tsconfig.json

[Viijay-Kr]

Here's a minimal reproduction repo:

https://github.com/mliudev/react-ts-css-navigation-bug

Instructions are in the README.

@mliudev Even your setup has some syntax errors such as comments and extra commas. Considering Typescript extension is able to parse json with invalid syntax , I will try to support faulty json.

Also I noticed that there is an issue when baseUrl in set and paths are prefixed with @ scope. I will also address this issue

[Viijay-Kr]

@fohanist @mliudev 3.2.0 should fix the issues you have been having . Please re open this issue if it doesn't

[mliudev]

While this fixes the issue in .tsx files the issue the issue I'm having is that it doesn't work on @ imports within .scss files. I've uploaded a video.

https://github.com/Viijay-Kr/react-ts-css/assets/11674155/d86f3352-57c7-4af0-89b2-f46dc049e985

[Viijay-Kr]

@mliudev this extension does not deal with resolving imports inside Css or scss modules

[mliudev]

@mliudev this extension does not deal with resolving imports inside Css or scss modules

Oh I see, OK thanks for fixing the other issue!