naopoyo.com
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About

目次

© naopoyo

🐻

開発日記-2024-07-16 / Clerkのアップデートでつまづいた

公開日
1年以上前
2024-07-16
更新日
1年以上前
2024-07-17
更新履歴
GitHubで見る
  • 開発日記
  • Clerk
  • VS Code
  • Tailwind

Clerk 5.2.3を使うとNext.jsのビルドエラーになる

`@clerk/nextjs@5.2.0` cause a build warning in NextJS middleware · Issue #3660 · clerk/javascript
Preliminary Checks I have reviewed the documentation: https://clerk.com/docs I have searched for existing issues: https://github.com/clerk/javascript/issues I have not already reached out to Clerk ...
github.com favicon
github.com
`@clerk/nextjs@5.2.0` cause a build warning in NextJS middleware · Issue #3660 · clerk/javascript

Issueを読む。

'use server'

import { auth } from '@clerk/nextjs/server'

@clerk/nextjs/server を使用しているファイルに 'use server' を追加したら改善した。

@clerk/nextjs/server はサーバーサイドで使用しないといけないということで、'use client' にはしていなかったが、'use server' と明示しないといけないようだ。おそらく。

(7/17修正)

The "use server" annotation exposes an end point that makes all exported functions invokable by the client. The identifiers is currently a hash of the source code location. As long as a user gets the handle to the id of an action, it can invoke it with any arguments.

[翻訳]
アノテーション"use server"は、エクスポートされたすべての関数をクライアントが呼び出せるようにするエンドポイントを公開します。識別子は現在、ソース コードの場所のハッシュです。ユーザーがアクションの ID へのハンドルを取得している限り、任意の引数でアクションを呼び出すことができます。

https://nextjs.org/blog/security-nextjs-server-components-actions#write

'use server' は上記のような仕様なので、不用意に使わないようにして import 'server-only' を使うようにする。

Terminal
pnpm add -E server-only
import 'server-only'

import { auth } from '@clerk/nextjs/server'

こうすることで、'use server' を使うべきところで使っていなかったことがエラーでわかるようになった。

Unknown at rule @tailwindscss(unknownAtRules) 対策

Unknown at rule @tailwindscss(unknownAtRules)

VS CodeでCSSファイルのTailwind CSSのディレクティブの部分(@tailwind base;など)でワーニングが出る場合の対応方法。

.vscode/settings.json
"files.associations": {
  "*.css": "tailwindcss",
  "*.scss": "tailwindcss"
},

目次

最近更新された記事

🌑
Railsを7から8にアップグレードする
約16時間前 - 2025年10月19日
  • Ruby
  • Rails
🚆
VS Codeでよく使うショートカット
3日前 - 2025年10月17日
  • VS Code
📈
Next.jsでBundle Analyzerを使う
3日前 - 2025年10月16日
  • Next.js