Next.jsにvanilla-extractを導入したときにエラーが出た！
はじめに
個人開発でNext.jsにvanilla-extractを導入したときにエラーが出たので、その対応を書きました🙌
今回使用したNext.jsのバージョンは、14.2.3です！
エラー
Error: Styles were unable to be assigned to a file. This is generally caused by one of the following:
- You may have created styles outside of a '.css.ts' context
- You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started
訳
エラーが発生しました：スタイルをファイルに割り当てることができませんでした。これは一般的に以下のいずれかが原因です：
- .css.ts'コンテキストの外部でスタイルを作成した可能性があります。
- 設定が正しくない可能性があります。https://vanilla-extract.style/documentation/getting-started を参照してください。
対処法
@vanilla-extract/next-pluginをinstallします。
npm install --save-dev @vanilla-extract/next-plugin
next.config.mjsに下記を記述します。
/** @type {import('next').NextConfig} */
import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";
const withVanillaExtract = createVanillaExtractPlugin();
const nextConfig = {};
export default withVanillaExtract(nextConfig);
これでエラーが解消されました🔥
つまり、vanilla-extractとNext.jsを統合するプラグインを入れていなかったから起こったエラーだと思われます！
参考にしたのは、こちらの公式です！
下記で詳しく内容を解説していきます！
@vanilla-extract/next-pluginとは？
Next.jsプロジェクトでvanilla-extractライブラリを使用するためのプラグインのこと
next.config.mjsの内容を1行ずつの解説
next.config.mjsは、Next.jsの設定ファイルです！
下記は、vanilla-extractを設定し、それをプロジェクトで利用可能にするコードが書いてあります！
/** @type {import('next').NextConfig} */
このJSDocコメントは、TypeScriptを使用している環境で、設定オブジェクトがNext.jsの型定義に適合しているかをチェックするために書かれています。
@type {import('next').NextConfig} という記述は、その下に続くJavaScriptオブジェクトが NextConfig 型であるとTypeScriptに伝える役割を持っています。
import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";
import文を使用して、@vanilla-extract/next-pluginモジュールからcreateVanillaExtractPlugin関数をインポートしています。
const withVanillaExtract = createVanillaExtractPlugin();
createVanillaExtractPluginはNext.jsプロジェクトに特定の機能を追加するためのツールを作る関数で、そのツールをwithVanillaExtractという名前で使用できるようにしています。
const nextConfig = {};
nextConfigという名前の空のオブジェクトを作成しています。このオブジェクトに、Next.jsのプロジェクトの追加設定をするときは、ここに書いていきます。今は何も書いていません。
export default withVanillaExtract(nextConfig);
Next.jsの設定に特定の機能を加えて、それをプロジェクト全体で使えるようにしています。
Next.jsのバージョンの違いでエラーが起きる
公式の記事を読んだ方は気が付いたと思いますが、公式に書いてあるnext.configの内容と今回記事に書いたコードの内容が異なります！公式の拡張子は.jsなので、バージョン14.2あたりを使用している方は.mjsに内容を書き換えなくてはなりません！！
それを知らずに公式のコードのまま記載した時のエラーとその対応方法をこちらの記事に書きました！
こちらもご覧ください！
まとめ
今回のエラーは、vanilla-extractとNext.jsを統合するプラグイン(@vanilla-extract/next-plugin)を入れていなかったから起こったエラーでした！
同じエラーに直面した方の参考になると嬉しいです！
上記の内容で分からなかったものはこちらでまとめておりますので、ご覧ください！
こちらのエラー解消には、てるしーさんにご協力いただきました！ありがとうございます！
Discussion