Vscode complaining about @commerce module path in framework directory

[snax4a]

trafficstars

Hi,

I couldn't find solution for my vscode linter errors in framework directory about @commerce'path imports.

For example in framework/swell/auth/use-logout.tsx these imports are underscorred

import type { MutationHook } from '@commerce/utils/types'
import useLogout, { UseLogout } from '@commerce/auth/use-logout'

Linter is showing errors like this

Cannot find module '@commerce/utils/types' or its corresponding type declarations.ts(2307)

In components directory @commerce path is working (linter not showing errors).

Here is tsconfig.json paths configuration:

"paths": {
  "@lib/*": ["lib/*"],
  "@utils/*": ["utils/*"],
  "@config/*": ["config/*"],
  "@assets/*": ["assets/*"],
  "@components/*": ["components/*"],
  "@commerce": ["framework/commerce"],
  "@commerce/*": ["framework/commerce/*"],
  "@framework": ["framework/local"],
  "@framework/*": ["framework/local/*"]
}

I wonder if my vscode is configured incorrectly or this project configuration is wrong?

[alexbu92]

Same thing for me. Why does it have a "@" ? It's not an npm package I don't understand.

[charkour]

@alexbu92, the @ sign is used as a path alias. Located in the tsconfig.json.

This is so devs don't need to write out the relative path when importing modules.

[charkour]

@snax4a, update your .env.local file to the correct swell credentials and run npm run dev, which will update the tsconfig.json.

Or you can update the tsconfig.json manually and VSCode will be happy since the path alias are correct.

"paths": {
  ...
  "@framework": ["framework/swell"],
  "@framework/*": ["framework/swell/*"]
}

[leerob]

Hey there! Thank you for opening this issue. We have decided to take Next.js Commerce in a new direction and will be closing out current PRs and issues due to this change. Please see this PR for more details: https://github.com/vercel/commerce/pull/966