Not preserving "use client" placement at top of page (Next.js) application

gaurangrshah commented 9 months ago

Describe the bug This bug on started happening recently after months of use with the extension.

In a next.js / react 18 application placing a "use client" directive at the top of the page usually was ignored by the sorter, but now it seems to be sorting it incorrectly placing it at the bottom of the import list.

To Reproduce Create a react client component, add a few imports, and place the "use client" directive at the top of the page. And save the document.

FYI: Oddly enough it still ignores the "use server" directive accordingly.

Expected behavior "use client" should be preserved at the top of the page.

Screenshots 57c32812-6dca-4fcc-9760-1a87b628fb4c

OS (please complete the following information):

OS: [e.g. MacOS, Windows]
Version: MacOs v 12.5 (Monterey)

VS Code (please complete the following information):

Version: Version: 1.86.2

package.json (please remove any sensitive info)

 "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "db:sync": "drizzle-kit generate:sqlite & drizzle-kit push:sqlite",
    "db:generate": "drizzle-kit generate:sqlite",
    "db:migrate": "tsx lib/db/migrate.ts",
    "db:drop": "drizzle-kit drop",
    "db:pull": "drizzle-kit introspect:sqlite",
    "db:push": "drizzle-kit push:sqlite",
    "db:studio": "drizzle-kit studio",
    "db:check": "drizzle-kit check:sqlite",
    "format": "prettier --check --ignore-path .gitignore .",
    "format:fix": "prettier --write --ignore-path .gitignore .",
    "email": "email dev"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.4",
    "@libsql/client": "^0.5.1",
    "@lucia-auth/adapter-sqlite": "2.0.1",
    "@radix-ui/react-aspect-ratio": "^1.0.3",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-menubar": "^1.0.4",
    "@radix-ui/react-polymorphic": "^0.0.14",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-scroll-area": "^1.0.5",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tooltip": "^1.0.7",
    "@react-email/components": "^0.0.14",
    "@t3-oss/env-nextjs": "^0.9.2",
    "@vercel/analytics": "^1.2.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "drizzle-orm": "^0.29.3",
    "drizzle-zod": "^0.5.1",
    "lucia": "2.7.7",
    "lucide-react": "^0.331.0",
    "nanoid": "^5.0.5",
    "next": "14.1.0",
    "next-themes": "^0.2.1",
    "react": "^18",
    "react-dom": "^18",
    "react-email": "^2.0.0",
    "react-hook-form": "^7.50.1",
    "resend": "^3.2.0",
    "sonner": "^1.4.0",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "dotenv": "^16.4.4",
    "drizzle-kit": "^0.20.14",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "eslint-config-prettier": "^9.1.0",
    "postcss": "^8",
    "prettier": "^3.2.5",
    "prettier-plugin-tailwindcss": "^0.5.11",
    "tailwindcss": "^3.3.0",
    "tsx": "^4.7.1",
    "typescript": "^5"
  }

tsconfig.json (if any)

{
  "compilerOptions": {
    "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,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": [
        "./*"
      ]
    },
    "target": "esnext",
    "baseUrl": "./"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

.prettierrc/.prettierrc.js/prettier.config.js/.prettierrc.toml (if any) filename:

{
  "trailingComma": "es5",
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "plugins": ["prettier-plugin-tailwindcss"]
}

.editorconfig (if any)

  "tsImportSorter.configuration.groupRules": [
    // "^use (client|server)$", // Allow "use client" and "use server" at the top
    "^react(-dom)?$",
    ["^next", "^next/", "^@vercel/"],
    ["^tailwind-merge", "^tailwind-animate", "^tailwindcss", "^next-themes"],
    ["^lucia", "^@lucia-auth/"],
    [
      "^libsql",
      "^drizzle-zod",
      "^drizzle-orm",
      "^drizzle-kit",
      "^zod",
      "^nanoid",
      "^date-fns/"
    ],
    "^resend",
    "^lucide-react",
    ["^cmdk", "^sonner"],
    ["^stripe", "^@stripe/"],
    {},
    "^@/providers/",
    ["^@/components/", "^@/components/ui/"],
    "^@/hooks/",
    "^[@/]",
    "^",
    "^[.]",
    "^@/(lib|providers)/[^/]*type$",
    "^[^/]*type$"
  ],

Installed VS Code extensions [Execute $ code --list-extensions in terminal to get the list. How to run VS Code from terminal in MacOS]

aaron-bond.better-comments
abians.prisma-generate-uml
abierbaum.vscode-file-peek
ahebrank.yaml2json
alefragnani.bookmarks
alfredbirk.tailwind-documentation
antiantisepticeye.vscode-color-picker
apollographql.vscode-apollo
arturodent.find-and-transform
astro-build.astro-vscode
babobski.aspect-ratio
bradlc.vscode-tailwindcss
britesnow.vscode-toggle-quotes
centuplex.quokka
chakrounanas.turbo-console-log
christian-kohler.path-intellisense
cliffsu.cypress-snippets
codeandstuff.package-json-upgrade
dbaeumer.vscode-eslint
dkundel.vscode-new-file
dkundel.vscode-npm-source
donjayamanne.githistory
dozerg.tsimportsorter
drknoxy.eslint-disable-snippets
dsznajder.es7-react-js-snippets
eamodio.gitlens
ecmel.vscode-html-css
edag94.replacequotes
enkia.tokyo-night
esbenp.prettier-vscode
figma.figma-vscode-extension
file-icons.file-icons
formulahendry.auto-complete-tag
frenco.vscode-vercel
github.copilot
github.copilot-chat
github.remotehub
github.vscode-pull-request-github
harehare.textusm
hasefumi23.search-with-cursor
hbenl.vscode-test-explorer
htwx.json-and-jsonc
icrawl.discord-vscode
idered.npm
infeng.vscode-react-typescript
jccr.sandbox
jeffreylanters.npm-package-version-bumper
joeyyizhao.mongo-runner
johnpapa.vscode-peacock
kalimahapps.tailwind-config-viewer
kalimahapps.tailwindcss-kit
kavod-io.vscode-jest-test-adapter
kenhowardpdx.vscode-gist
kruemelkatze.vscode-dashboard
levitatingbusinessman.hyper-vsc
lostintangent.thinking-in-code
lostintangent.vsls-whiteboard
lostintangent.wikilens
masonicboom.web-browser
mattpocock.ts-error-translator
meganrogge.template-string-converter
mongodb.mongodb-vscode
mrmlnc.vscode-duplicate
ms-azuretools.vscode-docker
ms-edgedevtools.vscode-edge-devtools
ms-playwright.playwright
ms-python.debugpy
ms-python.isort
ms-python.python
ms-vscode-remote.remote-containers
ms-vscode-remote.remote-ssh
ms-vscode-remote.remote-ssh-edit
ms-vscode-remote.vscode-remote-extensionpack
ms-vscode.live-server
ms-vscode.remote-explorer
ms-vscode.remote-repositories
ms-vscode.remote-server
ms-vscode.sublime-keybindings
ms-vscode.test-adapter-converter
ms-vsliveshare.vsliveshare
ms-vsliveshare.vsliveshare-pack
mtxr.sqltools
mtxr.sqltools-driver-mysql
mtxr.sqltools-driver-pg
mtxr.sqltools-driver-sqlite
naumovs.color-highlight
nick-rudenko.back-n-forth
nucllear.vscode-extension-auto-import
oouo-diogo-perdigao.docthis
orta.vscode-jest
orta.vscode-twoslash-queries
ortoni.ortoni
pomber.git-file-history
prisma.prisma
qwtel.sqlite-viewer
rafamel.subtle-brackets
rangav.vscode-thunder-client
redhat.vscode-yaml
ritwickdey.liveserver
rohinivsenthil.postcode
rossmassey.shortenurl
shelex.vscode-cy-helper
sheltonlouis.astro-snippets
sirtori.indenticator
stackbreak.comment-divider
stivo.tailwind-fold
streetsidesoftware.code-spell-checker
strigo.linear
tock.vscode-css-custom-properties
unifiedjs.vscode-mdx
usernamehw.errorlens
vincaslt.highlight-matching-tag
visualstudioexptteam.intellicode-api-usage-examples
visualstudioexptteam.vscodeintellicode
vsls-contrib.gistfs
vunguyentuan.vscode-css-variables
wallabyjs.console-ninja
wallabyjs.quokka-vscode
wayou.vscode-todo-highlight
willstakayama.vscode-nextjs-snippets
wix.glean
wix.vscode-import-cost
xyc.vscode-mdx-preview
yoavbls.pretty-ts-errors
young-vform.copy-hover-type
yutengjing.open-in-external-app
zignd.html-css-class-completion

daidodo commented 7 months ago

@gaurangrshah Sorry for the late response!

I can't reproduce the issue from my end. Is it still an issue? If yes, do you have a demo project for me to test?

Thanks!

gaurangrshah commented 7 months ago

Sorry I don't we ended up defaulting to using prettier to sort the imports. I'll see if i can pull it into another next.js project and reproduce.

karlhorky commented 1 month ago

We (and all of our students) have been using the JS/TS Import/Export Sorter VS Code extension since over a year with various Next.js projects since use client support and use server support were published, and we have never seen a problem with support.

In the original video, the directive is written incorrectly: 'use-client' instead of 'use client'.

So I'm guessing that this was caused by this typo (or misconfiguration or conflict with another extension) and the issue can be closed.

daidodo / format-imports-vscode

Not preserving "use client" placement at top of page (Next.js) application #107