next.config.mjsに公式に記載していたコードを書いたらエラーが出た！
はじめに
Next.jsにvanilla-extractを導入した時に出たエラーを解消しようと、next.config.mjsに公式に記載していたコードを書いたらエラーが出たので解消しました🙌
Next.jsにvanilla-extractを導入した時に出たエラー解消はこちら
公式に書いてあるコードだとエラーになる
next.config.mjsに公式に記載されていたコードを書いていったらエラーが起こりました。
これが公式に書いてある内容です！
If you don’t have a next.config.js file in the root of your project, create one. Add the plugin to your next.config.js file.
訳
プロジェクトのルートにnext.config.jsファイルがない場合は、作成してください。next.config.jsファイルにプラグインを追加します。
const {
createVanillaExtractPlugin
} = require('@vanilla-extract/next-plugin');
const withVanillaExtract = createVanillaExtractPlugin();
/** @type {import('next').NextConfig} */
const nextConfig = {};
module.exports = withVanillaExtract(nextConfig);
公式はこちら！
こちらに書いてある通りに実装したら、npm run devを実行した際にターミナルでエラーが出ました🥺
エラー
npm run dev
> next-app@0.1.0 dev
> next dev
file:///Users/mii/Documents/Study/next.js/next-seat-reservation/next.config.mjs:1
const { createVanillaExtractPlugin } = require("@vanilla-extract/next-plugin")
^
ReferenceError: require is not defined in ES module scope, you can use import instead
at file:///Users/mii/Documents/Study/next.js/next-app/next.config.mjs:1:40
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
Node.js v18.17.1
つまり、requireがESモジュールスコープで定義されていないというエラーです。
対応
requireは、next.config.jsでの書き方なので、.jsから→.mjsに書き換える必要があります！！
next.config.jsのコードから、
const {
createVanillaExtractPlugin
} = require('@vanilla-extract/next-plugin');
const withVanillaExtract = createVanillaExtractPlugin();
/** @type {import('next').NextConfig} */
const nextConfig = {};
module.exports = withVanillaExtract(nextConfig);
↓↓↓↓↓
next.config.mjsに合うように、こちらのコードに書き換えました！
/** @type {import('next').NextConfig} */
import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";
const withVanillaExtract = createVanillaExtractPlugin();
const nextConfig = {};
export default withVanillaExtract(nextConfig);
公式にもnext.config.mjsのコード書いて欲しい🥺
next.config.jsとnext.config.mjsの内容比較
next.config.jsでは、requireを使用しているので、エラーが出てしまいます。
const {
createVanillaExtractPlugin
} = require('@vanilla-extract/next-plugin');
↓↓↓
next.config.mjsでは、このように書くとエラーが出ません。
import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";
なので、自分の開発のNext.configの拡張子が.mjsの時は上記のように書き換えてください！
requireがCommonJsで使用する関数なので書き換える必要があります🥺
こちらにも、CommonJSからES Modulesをrequire()構文で読み込むことができないと書いてあります！
いつからデフォルトでnext.config.mjsになったの？
調べたのですが、わからなかったのでご存じの方教えて欲しいです🙇♀️
友人曰く、バージョン14.1あたりではないかと言っていました！
今回の個人開発のNext.jsのバージョンは、14.2.3にしています！
まとめ
今回のエラーは、vanilla-extractの公式にNext.jsを統合するプラグイン(@vanilla-extract/next-plugin)を入れる方法が書いてあったので、それをそのまま書いたら出てしまったエラーでした。公式に書いてある.jsの記述方法を→.mjsの記述に書き換えたら解消しました！
同じエラーに直面した方の参考になると嬉しいです！
上記の内容で分からなかったものはこちらでまとめておりますので、ご覧ください！
Discussion