Next.js 13 - Builds not outputting css on Windows

[exneval]

Describe the bug

• Clone the "should be working repo" in Windows

• Inspect with DevTools, and see footer class being generated without styles

Need help @markdalgleish @SuttonJack

Reference in discussion

Edit:
Running the app inside container seems fine.

Reproduction

https://github.com/SuttonJack/vanilla-extract-app-dir

System Info

Windows 11

Used Package Manager

pnpm

Logs

No response

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.

[matheus-bruscke]

I'm having the same issue here on Windows 10

[askoufis]

I'm still in the process of setting up a windows dev environment, but I'll take a look at it when I can.

[i-bsd]

Also happening in Linux (Ubuntu).

[askoufis]

Also happening in Linux (Ubuntu).

It works fine for me, on MacOS though. I wouldn't expect it to behave very differently between ubuntu and macos.

Also general update, I'm reproduce the issue on windows. It's odd that classnames are in the markup, but there are no CSS files in the document head. This seems like an issue with Next, but it might not be. We've made a discussion in the next repo about Vanilla Extract support, pointing to various next bugs vercel/next.js#49892.

[mtripg6666tdr]

Same here on Windows 11, but not be reproduced on Ubuntu 22.04 (WSL).
Could everyone investigate this issue more? I also want to help with solving this issue as possible.

[NotNite]

Same here on Windows 10 (19045.3208), Node.js 19.2.0, latest versions of @vanilla-extract/css/next/@vanilla-extract/next-plugin.

[Sharlottes]

Same here.
reproduction: https://github.com/Sharlottes/ve-missing-style-reproduction
interestingly, the deployment on the Vercel works well.
https://ve-missing-style-reproduction.vercel.app/

[GeeWizWow]

still doing some debugging, but it's server components specifically that are failing, adding a 'use client' directive results in stylesheets being generated.

[leljak]

still doing some debugging, but it's server components specifically that are failing, adding a 'use client' directive results in stylesheets being generated.

This works for components, what about global styles, any workaround?

[GeeWizWow]

still doing some debugging, but it's server components specifically that are failing, adding a 'use client' directive results in stylesheets being generated.

This works for components, what about global styles, any workaround?

I did find a workaround, but ended not needing it, as it's a bit of an inelegant hack, but if you use a wildcard import and ensure you use the resulting variable in some capacity, it should pickup the globalStyles

import * as styles from './global.css';

console.log(styles)

[leljak]

still doing some debugging, but it's server components specifically that are failing, adding a 'use client' directive results in stylesheets being generated.

This works for components, what about global styles, any workaround?

I did find a workaround, but ended not needing it, as it's a bit of an inelegant hack, but if you use a wildcard import and ensure you use the resulting variable in some capacity, it should pickup the globalStyles

import * as styles from './global.css';

console.log(styles)

Uh, really ugly, but it works, thank you!

[syfxlin]

I've recently been migrating my blog from Gatsby to Next.js and I'm having the same problem. I found a solution at style9-webpack (SukkaW/style9-webpack#1) and made another Next.js plugin for vanilla-extract that works fine on Windows/Linux/macOS, if you're having a similar problem, you can try @syfxlin/next-plugin-vanilla-extract.

[GeeWizWow]

I've recently been migrating my blog from Gatsby to Next.js and I'm having the same problem. I found a solution at style9-webpack (SukkaW/style9-webpack#1) and made another Next.js plugin for vanilla-extract that works fine on Windows/Linux/macOS, if you're having a similar problem, you can try @syfxlin/next-plugin-vanilla-extract.

Is this something that can be contributed here? I'm sure many of us would prefer not to see fragmentation, especially as vanilla-extract and or next continue to evolve

[syfxlin]

Hi @GeeWizWow, @syfxlin/next-plugin-vanilla-extract hasn't been fully tested, for example I'm not sure if it works in the Next.js Pages Directory yet. Once it's confirmed to be reliable, I can contribute here, thanks!

[sherluok]

I gave up next-plugin and instead write webpack transformer with webpack-plugin directly. It works for now, just for reference, do not use this in production:

// 2023/10/03; windows 11; [email protected]; @vanilla-extract/[email protected]

const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin/next');
const { default: MiniCssExtractPlugin } = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    config.plugins.unshift(new MiniCssExtractPlugin());
    config.plugins.unshift(new VanillaExtractPlugin());

    config.module.rules.unshift({
      test: /vanilla\.virtual\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        require.resolve('css-loader'),
        VanillaExtractPlugin.loader,
      ],
    });
    return config;
  },
};

module.exports = nextConfig;

[askoufis]

I gave up next-plugin and instead write webpack transformer with webpack-plugin directly. It works for now, just for reference, do not use this in production:

// 2023/10/03; windows 11; [email protected]; @vanilla-extract/[email protected]

const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin/next');
const { default: MiniCssExtractPlugin } = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    config.plugins.unshift(new MiniCssExtractPlugin());
    config.plugins.unshift(new VanillaExtractPlugin());

    config.module.rules.unshift({
      test: /vanilla\.virtual\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        require.resolve('css-loader'),
        VanillaExtractPlugin.loader,
      ],
    });
    return config;
  },
};

module.exports = nextConfig;

@sherluok Does the fix to the next plugin from #1180 work for you?

[ha1fstack]

edit: fix is pending so meanwhile use appDir: true for temp solution

https://github.com/plrs9816/vanilla-extract-app-dir

Something broke again in next 13.5?

In 13.4 it works fine but the css is not generated in 13.5. (I only tested in windows)

Strangely the above demo is working, because I added unnecessary appDir: true config.
⚠ App router is available by default now, 'experimental.appDir' option can be safely removed.
It says the option does nothing, but if it's removed it doesn't work.
13.4 works fine without the option.

const nextConfig = {
  experimental: {
    appDir: true,
  },
};

[askoufis]

@plrs9816 This should hopefully be fixed by #1193