WebLog

typescriptで特定のファイルからのauto importをしないようにしたい

2023/04/05 11:44

はじめに

server components(sc)と client components(cc)という機能が nextjs のappディレクトリ内で使用できるようになりました。先日試していたときに、vscode の import のめんどくささがあったのでメモしておきます。より良い方法などあれば教えてください。

結論

vscode 前提です。 typescript のバージョンが 4.8 以上である必要があります

.vscode/settings.json
1{
2 "typescript.tsdk": "node_modules/typescript/lib",
3 "typescript.preferences.autoImportFileExcludePatterns": [
4 // 除外したいものを書く
5 ]
6}

使用例的なもの

app ディレクトリと UI フレームワーク、例えばchakra uiを組み合わせたいとします。 とりあえず、ChakraProviderでルートコンポーネントを囲みたいんですが、以下のような感じだと動きません。

layout.tsx(動かない)
1import { ChakraProvider } from '@chakra-ui/react';
2
3export const metadata = {
4 title: 'Tatsumi Yamamoto',
5 description: 'yamamoto tatsumi dayo',
6};
7
8export default function RootLayout({ children }: { children: React.ReactNode }) {
9 return (
10 <html lang='ja'>
11 <head />
12 <ChakraProvider>
13 <body>{children}</body>
14 </ChakraProvider>
15 </html>
16 );
17}

理由は layout.tsx に'use client';がなく、sc では state などが使えないからです。ChakraProvider は内部で state とかを使っているのでエラーになります。

そこで、'use client';を足して cc にしてみますが、これは良くないみたいです。

root layout はデフォルトで Server component であり、Client Component にすることはできません。 (The root layout is a Server Component by default and can not be set to a Client Component.)

Routing: Pages and Layouts | Next.js
Routing: Pages and Layouts | Next.js

Routing: Pages and Layouts | Next.js

Create your first page and shared layout with the App Router.

layout.tsx(ダメ)
1'use client';
2import { ChakraProvider } from '@chakra-ui/react';
3
4export const metadata = {
5 title: 'Tatsumi Yamamoto',
6 description: 'yamamoto tatsumi',
7};
8
9export default function RootLayout({ children }: { children: React.ReactNode }) {
10 return (
11 <html lang='ja'>
12 <head />
13 <ChakraProvider>
14 <body>{children}</body>
15 </ChakraProvider>
16 </html>
17 );
18}

そのため、以下のように一旦 cc から全てを export します。

chakraComponents.tsx
1'use client';
2
3export * from '@chakra-ui/react';

そして、chakra ui のコンポーネントを使うときはここから import するようにします。

layout.tsx
1import { ChakraProvider } from './chakraComponents';
2
3export const metadata = {
4 title: 'Tatsumi Yamamoto',
5 description: 'yamamoto tatsumi',
6};
7
8export default function RootLayout({ children }: { children: React.ReactNode }) {
9 return (
10 <html lang='ja'>
11 <head />
12 <ChakraProvider>
13 <body>{children}</body>
14 </ChakraProvider>
15 </html>
16 );
17}

このときに、@chakra-ui/reactからは import したくないのですが、vscode では import の候補に出てしまうので、一旦以下のような記述で黙らせることができます。

1{
2 "typescript.tsdk": "node_modules/typescript/lib",
3 "typescript.preferences.autoImportFileExcludePatterns": [
4 "node_modules/@chakra-ui"
5 ]
6}

appディレクトリを本格的に使ったことがないので、もしかしたらこの設定で問題が出るかもしれませんし、ui フレームワーク側の何かしらの対応で解決するかもしれませんが、とりあえずメモです。

参考

Chakra-ui dose not support next js 13 app directory yet ? · Issue #7209 · chakra-ui/chakra-ui · GitHub
Chakra-ui dose not support next js 13 app directory yet ? · Issue #7209 · chakra-ui/chakra-ui · GitHub

Chakra-ui dose not support next js 13 app directory yet ? · Issue #7209 · chakra-ui/chakra-ui · GitHub

Description My demo repo https://github.com/anhdd-kuro/next13-strapi-chakraui-demo/tree/main/client I have the same code in pages/test.tsx and app/page.tsx + app/layout.tsx There is no problem with pages/test.tsx This is css that rendere...

Next.js 13のappディレクトリの基礎(Layout, Suspense, Data Fetching...)
Next.js 13のappディレクトリの基礎(Layout, Suspense, Data Fetching...)

Next.js 13のappディレクトリの基礎(Layout, Suspense, Data Fetching...)

Next.js 13で新たに追加されたappディレクトリについて簡単なコードを利用しながら動作確認を行なっています。本文書を読み終えるとSuspense, Data Fetchig, Server Component, Client Component, Nested Layoutsなどの理解を深めることができます。

Next.js 13 app directory で記事投稿サイトを作ってみようZennZenn

Next.js 13 app directory で記事投稿サイトを作ってみようZennZenn

最新の投稿