TypeError: options.postcss is not a function This error occurred during the build process and can only be dismissed by fixing the error.

I can’t setup vanilla-extract on nextjs application. tell me solution plz.

console

% npm run -w next-template dev --

> next-template@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 5.5s (171 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 126 ms (172 modules)
wait  - compiling / (client and server)...
error - ../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[0].use[1]!../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[0].use[2]!../node_modules/virtual-resource-loader/dist/virtual-resource-loader.cjs.js?{"source":"LkhlbGxvV29ybGRfXzFhcDQ2NDIwIHsKICBjb2xvcjogYmx1ZTsKfQ=="}!../node_modules/@vanilla-extract/webpack-plugin/extracted/dist/vanilla-extract-webpack-plugin-extracted.cjs.js
TypeError: options.postcss is not a function
(node:8385) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)

packaje.json

  "devDependencies": {
    "@types/jest": "^27.0.3",
    "@types/node": "^16.11.11",
    "@typescript-eslint/eslint-plugin": "^5.5.0",
    "@typescript-eslint/parser": "^5.5.0",
    "@vanilla-extract/babel-plugin": "^1.1.3",
    "@vanilla-extract/css": "^1.6.8",
    "@vanilla-extract/next-plugin": "^1.0.1",
    "esbuild": "^0.14.2",
    "esbuild-jest": "^0.5.0",
    "esbuild-register": "^3.2.0",
    "eslint": "^8.4.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "jest": "^27.4.3",
    "next": "12.0.7",
    "npm-check-updates": "^12.0.2",
    "prettier": "^2.5.1",
    "typescript": "^4.5.2"
  }

next.config.js

const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
const withVanillaExtract = createVanillaExtractPlugin();

/** @type {import('next').NextConfig} */
const config = {
  // reactStrictMode: true,
};

module.exports = withVanillaExtract(config);

index.tsx

import type { NextPage } from 'next';

import { HelloWorld } from '../components/HelloWorld';

const Home: NextPage = () => {
  return <HelloWorld />;
};

export default Home;

components/HelloWorld

import * as React from 'react';

import { className } from './HelloWorld.css';

export const HelloWorld = () => {
  return <p {...{ className }}>Hello World</p>;
};

componens/HelloWorld.css.ts

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

export const className = style({
  color: 'blue',
});

error output in browser

Failed to compile
next-template/components/HelloWorld.css.ts.vanilla.css!=!../node_modules/virtual-resource-loader/dist/virtual-resource-loader.cjs.js?{"source":"LkhlbGxvV29ybGRfXzFhcDQ2NDIwIHsKICBjb2xvcjogYmx1ZTsKfQ=="}!../node_modules/@vanilla-extract/webpack-plugin/extracted/dist/vanilla-extract-webpack-plugin-extracted.cjs.js
TypeError: options.postcss is not a function
This error occurred during the build process and can only be dismissed by fixing the error.

[markdalgleish]

If you upgrade to the latest Next + @vanilla-extract/next-plugin combo, you should be good now.

[aquamarinecx]

Specifically next@12.0.5 breaks a variety of packages that I’m using, because they bumped a few dependencies. Downgrading to next@12.0.4 works well