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.