not working with tsconfig paths aliases

[sveinnthorarins]

Hi,

I am having issues to get the plugin working with the compilerOptions.paths in tsconfig.json.

My tsconfig.json looks like this:

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client"],
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["src/components/*"],
      "@/contexts/*": ["src/contexts/*"],
      "@/lib/*": ["src/lib/*"],
      "@/styles/*": ["src/styles/*"],
      "@/types/*": ["src/types/*"]
    }
  }
}

And I'm importing in some Component.tsx (located in src/components) like this:

import styles from '@/styles/Component.module.scss';

When doing this the plugin doesn't seem to work and I get no auto-complete for the styles variable.

However, it does work when I change the import to be relative like this:

import styles from '../styles/Component.module.scss';

[clinyong]

Hi @sveinnthorarins , thanks for your report. But I can't reproduce the problem with your config.

Do you install the latest version(0.3.2)? If you do, could you provide a reproducible repo?

[sveinnthorarins]

Heya!

Yeah, I'm using the latest version. Here's a minimal reproducible example repo as a zip file:

reproducible-example.zip

There is no npm install needed or anything. It's just a tsconfig.json and a src folder containing the structure I'm trying to accomplish with path aliasing. Take a look at the src/components/Component.tsx file, I've placed some comments there to help get my point across.

Let's see what results you get :)
If you get different results from this than me, then I must have something incorrectly set up in my VSCode.

[clinyong]

@sveinnthorarins Thanks for the great example. But I still can't reproduce the problem...

@iChenLei Could you reproduce this on your local computer?

[iChenLei]

@sveinnthorarins Didn't change anything, just download your example code, and open it. It works as expected, and I can't reproduce the problem too. @clinyong

[clinyong]

@iChenLei Thanks.

@sveinnthorarins Maybe you can check your vscode configuration.

Close this issue since we can't reproduce.

[sveinnthorarins]

Hey guys, thanks for trying this out on your ends. @clinyong @iChenLei

I've been looking into my configuration and couldn't see anything wrong.

So I decided to test the reproducible example again on a freshly installed and latest-updated VSCode with the CSS Modules as its only extension.

And I managed to reproduce this, the behavior is exactly the same.

Could it be that you might have some other extension that is making this work on your ends and preventing you from being able to reproduce this problem?

[clinyong]

@sveinnthorarins What is your OS?

[sveinnthorarins]

@clinyong My OS is Windows 10.

[clinyong]

Hi @sveinnthorarins, I finally reproduce it with a Windows PC. It is the Windows path problem, see #57 for detail. (Since @iChenLei and I both use macOS, we couldn't reproduce it at first.)

I have test it with my own Windows, but not sure if there are any other problems. Could you help me test it using the attachment.

vscode-css-modules-0.4.1.vsix.zip

Here is the installation guide

1. Unpack the zip file, it'll get a .vsix file
2. Manually install the .vsix file from vscode
   

And finally thanks for your report and the great reproducible example.

[sveinnthorarins]

Thanks for working on this problem @clinyong and good job spotting that it's an OS path problem!

I tested the updated .vsix on my current hobby project (where I originally noticed the problem) as well as on the minimal reproducible example I created.

It works for me in both projects and solves the problem 😊

I didn't do any more extensive testing. I guess you will probably test it on other operating systems to make sure it still works there. Looking at the change you made though, it looks rather straight-forward and I wouldn't expect any bugs arising from it.

Looks good to me. Let me know if you need anything else (further testing, etc.) 😄

[clinyong]

@sveinnthorarins Thanks for testing this. Has been fixed in version 0.4.1.