NextJS v15 + vanilla-extract で公式に従ってもエラーになった

環境

• next: 15.2.4
• react: ^19.0.0
• typescript: ^5
• @vanilla-extract/css: ^1.17.1

公式通り vanilla-extract を導入したがエラーが発生した

下記 公式のドキュメントには書かれていないようだったのでメモとして、
https://vanilla-extract.style/documentation/integrations/next/

vanilla-extract を Next.js に導入する

$ npm i @vanilla-extract/css
$ npm i -D @vanilla-extract/next-plugin

設定を追加

next.config.ts

import type { NextConfig } from 'next';
+ import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
+ const withVanillaExtract = createVanillaExtractPlugin();

const nextConfig: NextConfig = {};
- export default nextConfig;
+ export default withVanillaExtract(nextConfig);

CSS を作成して適応する

/src/App/styles.ts.css

import { style } from '@vanilla-extract/css';

export const container = style({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100vh',
  width: '100%',
});

/src/app/page.tsx

import { container } from './styles.css';

export default function Home() {
  return (
    <div className={container}>
      <Main />
    </div>
  );
}

vanilla-extract を導入し npm run dev で Next を起動すると下記のようなエラーが発生した

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

vanilla-extract の .css.ts が意図した通り認識さていない...

結論: Next.js の Turbopack に Vanilla-extract が対応していない

Thanks for raising an issue. As documented in the turbopack documentation, using webpack-based Next.js plugins as-is from next.config.js is not yet supported. Until we can actually write plugins for turbopack (I don't think this is possible just yet), the VE next plugin will not work with next --turbo.
https://github.com/vanilla-extract-css/vanilla-extract/issues/1367#issuecomment-2016352850

https://github.com/kuma-ui/kuma-ui/issues/408
https://github.com/vanilla-extract-css/vanilla-extract/issues/1367

現状 turbopack を使わない選択肢しかなさそう

package.json

  "scripts": {
-   "dev": "next dev --turbopack",
+   "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
  }

--turbopack を取り npm run dev し直せば問題なく vanilla-extract が使えるようになった

おわり