Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Does not work with tsconfig paths on nextjs #93

Open
enchained opened this issue Dec 1, 2023 · 1 comment
Open

Does not work with tsconfig paths on nextjs #93

enchained opened this issue Dec 1, 2023 · 1 comment

Comments

@enchained
Copy link

Windows 11 22H2
VS Code 1.84.2
CSS Modules extension 0.5.1

Not sure if it is a bug or I am just missing some additional config. It works without alias.

Steps:

  1. Open new vscode window.
  2. Create empty vscode profile (File - Preferences - Profiles - Create Profile) and switch to it.
  3. Create nextjs project with src dir and without app router and tailwind:
npx create-next-app@latest
√ What is your project named? ... my-app
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use src/ directory? ... Yes
√ Would you like to use App Router? (recommended) ... No
√ Would you like to customize the default import alias (@/*)? ... No

Generated project will have:
tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

and import styles from '@/styles/Home.module.css' in my-app\src\pages\index.tsx

  1. Install CSS modules extension
  2. Go to my-app\src\pages\index.tsx and try going to existing classes and autocomplete - it does not work.
  3. Change import to import styles from '../styles/Home.module.css' - it starts working.
@oktomartin
Copy link

It doesn't like the ./. Try setting baseUrl.

{
  "baseUrl": ".",
  "paths": {
    "@/*": ["src/*"]
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants