Default configuration not working under Next 14 / React 18

[mikematos84]

Describe the bug

I believe it is a potential bug with maybe backwards compatibility. So I have provided the below picture/

This is the error I get when running the default @vanilla-extract/next-plugin under a Next 14/React 18 project.

The same configuration under Next 15/React 19 does not produce the error below. Both apps are access a react component library using vanilla extract and rollup. The only difference is the Next and React versions between the apps.

I have tried multiple configurations under Next 14 but nothing seems to have helped. So this is looking to me like a compatibility issue with Next 14

I have provided the following repo for you guys to reproduce and test but something seems to be off.

Yes I know that I could likely just upgrade to Next 15/React 19, but I am trying to get this to work in a large scale project that is running in Next 14/React 18 and we don't have the time at the moment to upgrade the framework so I would like to find a solution to getting this to work.

cc: @askoufis

Reproduction

https://github.com/mikematos84/ts-monorepo

System Info

System:
    OS: macOS 14.7.4
    CPU: (11) arm64 Apple M3 Pro
    Memory: 100.03 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.1 - ~/.nvm/versions/node/v20.18.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.18.1/bin/yarn
    npm: 11.1.0 - ~/.nvm/versions/node/v20.18.1/bin/npm
  Browsers:
    Chrome: 133.0.6943.127
    Edge: 133.0.3065.69
    Safari: 18.3

Used Package Manager

npm

Logs

> next-14-vanilla-extract-app@0.1.0 dev
> next dev

 ⚠ Port 3000 is in use, trying 3001 instead.
  ▲ Next.js 14.2.24
  - Local:        http://localhost:3001

 ✓ Starting...
 ✓ Ready in 1243ms
 ○ Compiling / ...
(node:16635) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
 ⨯ ../../packages/vanilla-extract-react-library/dist/esm/components/HelloWorld/HelloWorld.css.js
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: ../../packages/vanilla-extract-react-library/dist/esm/components/HelloWorld/HelloWorld.css.js
Import trace for requested module:
../../packages/vanilla-extract-react-library/dist/esm/components/HelloWorld/HelloWorld.css.js
../../packages/vanilla-extract-react-library/dist/esm/components/HelloWorld/index.js
../../packages/vanilla-extract-react-library/dist/esm/index.js
 ⨯ ../../packages/vanilla-extract-react-library/dist/esm/components/HelloWorld/HelloWorld.css.js
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: ../../packages/vanilla-extract-react-library/dist/esm/components/HelloWorld/HelloWorld.css.js
Import trace for requested module:
../../packages/vanilla-extract-react-library/dist/esm/components/HelloWorld/HelloWorld.css.js
../../packages/vanilla-extract-react-library/dist/esm/components/HelloWorld/index.js
../../packages/vanilla-extract-react-library/dist/esm/index.js
 GET / 500 in 1126ms

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[mikematos84]

Weird now, so doing some more basic testing, if I remove --turbopack in the Next 15 / React 19 version, it also errors our the same as the Next 14 / React 18 version.

[antebudimir]

Hi, @mikematos84 .

I've had vanilla-extract working with Next 14 pages router/React 18 without issues for a year before migrating to Next 15/React 19.

This was my setup:

"dependencies": {
    "next": "14.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
  },
  "devDependencies": {
    "@axe-core/playwright": "^4.10.1",
    "@next/bundle-analyzer": "14.1.1",
    "@next/eslint-plugin-next": "14.1.1",
    "@types/node": "^18.19.70",
    "@types/react": "18.3.11",
    "@types/react-dom": "18.3.1",
    "@typescript-eslint/eslint-plugin": "^7.18.0",
    "@typescript-eslint/parser": "^7.18.0",
    "@vanilla-extract/css": "^1.17.0",
    "@vanilla-extract/next-plugin": "^2.4.8",
    "@vanilla-extract/recipes": "^0.5.5",
    "@vanilla-extract/vite-plugin": "^4.0.19",
    "@vitejs/plugin-react": "^4.3.4",
    "jsdom": "^25.0.1",
    "msw": "^2.7.0",
    "typescript": "5.1.3",
    "vite-tsconfig-paths": "^5.1.4",
    "webpack": "^5.97.1"
  },
  "packageManager": "yarn@1.22.22",
  "engines": {
    "node": "^18"
  },
  "msw": {
    "workerDirectory": "public"
  }
}

import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';

const withVanillaExtract = createVanillaExtractPlugin({});

const nextConfig = {
  output: 'standalone',
  pageExtensions: ['page.tsx'],
};

export default withVanillaExtract(nextConfig);

import type { AppProps } from 'next/app';
import { StrictMode } from 'react';
import 'modern-normalize/modern-normalize.css';
import { ubuntu } from '@fonts';
import { useMsw } from '@hooks/msw';
import '@global/global.css';
import { lightTheme } from '@themes';

export default function App({ Component, pageProps }: AppProps) {
  const { isAppReady } = useMsw();
  const isMockingEnabled = process.env.NODE_ENV === 'development' && process.env.NEXT_PUBLIC_API_MOCKING === 'enabled';

  if (isMockingEnabled && !isAppReady) {
    // eslint-disable-next-line no-console
    return console.log('Loading Your Hard-Working Worker... ██████ 100%');
  }

  return (
    <StrictMode>
        <div className={`${ubuntu.variable} ${lightTheme}`}>
          <Component {...pageProps} />
        </div>
    </StrictMode>
  );
}

Maybe you can find it useful.