Next.js 13 - Builds not outputting css on Windows

Question

Next.js 13 - Builds not outputting css on Windows

exneval opened this issue a year ago · 18 comments

exneval commented a year ago

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.

Answer 1 · 2023-05-11T18:39:32.000Z

I'm having the same issue here on Windows 10

Answer 2 · 2023-05-15T01:24:43.000Z

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

Answer 3 · 2023-05-23T11:19:30.000Z

Also happening in Linux (Ubuntu).

Answer 4 · 2023-05-23T11:26:33.000Z

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.

Answer 5 · 2023-07-18T02:25:34.000Z

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.

Answer 6 · 2023-07-23T23:11:03.000Z

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

Answer 7 · 2023-07-25T11:58:52.000Z

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/

Answer 8 · 2023-07-28T17:28:43.000Z

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

Answer 9 · 2023-08-06T21:27:12.000Z

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?

Answer 10 · 2023-08-06T21:30:01.000Z

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)

Answer 11 · 2023-08-06T21:40:58.000Z

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!

Answer 12 · 2023-09-09T01:44:33.000Z

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.

Answer 13 · 2023-09-10T11:36:17.000Z

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

Answer 14 · 2023-09-10T12:34:14.000Z

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!

Answer 15 · 2023-10-02T18:14:57.000Z

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; next@13.5.3; @vanilla-extract/webpack-plugin@2.3.1

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;

Answer 16 · 2023-10-15T02:46:13.000Z

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; next@13.5.3; @vanilla-extract/webpack-plugin@2.3.1

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?

Answer 17 · 2023-10-16T06:48:57.000Z

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,
  },
};

Answer 18 · 2023-10-16T09:06:03.000Z

@plrs9816 This should hopefully be fixed by #1193