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

[wbydo]

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.

[zgreen]

Same thing happened to me after updating next.js from 12.0.4 to 12.0.7. It's possible this is a Next.js bug as it looks like it might be fixed in 12.0.8 (though I'm not sure, as 12.0.8-canary.0 is a pre-release).

The original report is missing the bug template details, so I'm providing those here:

Describe the bug

Next.js applications running next.js version 12.0.7 fail to compile, with an error that looks like this:

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":"LmFwcF9leGFtcGxlU3R5bGVfXzE2NWR1djQwIHsKICBjb2xvcjogcmVkOwp9"}!./node_modules/@vanilla-extract/webpack-plugin/extracted/dist/vanilla-extract-webpack-plugin-extracted.cjs.js
TypeError: options.postcss is not a function

Link to reproduction

https://codesandbox.io/s/priceless-benji-2p6no?file=/pages/index.js

System Info

Output of npx envinfo --system --npmPackages @vanilla-extract/css,@vanilla-extract/webpack-plugin,@vanilla-extract/esbuild-plugin,@vanilla-extract/vite-plugin,@vanilla-extract/sprinkles,webpack,esbuild,vite --binaries --browsers:

  System:
    OS: macOS 11.6
    CPU: (8) arm64 Apple M1
    Memory: 108.92 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    npm: 8.1.0 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 95.1.31.88
    Chrome: 96.0.4664.55
    Chrome Canary: 98.0.4745.0
    Firefox: 93.0
    Firefox Developer Edition: 95.0
    Safari: 15.0
  npmPackages:
    @vanilla-extract/css: ^1.6.2 => 1.6.8
    @vanilla-extract/sprinkles: ^1.3.0 => 1.3.3

[shimamooo]

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

[wbydo]

thank you more information.
i will watch this issue and nextjs update status.

[leosuncin]

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

next@12.0.5 contains an important fix, see https://github.com/vercel/next.js/releases/v12.0.5

[calebpdx]

I'm thinking the error is coming from changes done here:
https://github.com/vercel/next.js/pull/31762/files

[markdalgleish]

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

[leosuncin]

I can confirm is working with next.js v12.0.7

[eliaslecomte]

Awesome! Works here as well, but I had to update the node version from 12 to 14 on vercel.com.