Styled Vanilla Extract crashes in Qwik Nx projects

[n8sabes]

Describe the bug styled-vanilla-extract, as defined in the Qwik Documentation crashes server-side.

To Reproduce

Below is a 2~3 minute configuration that demonstrates styled-vanilla-extract generating a [vite] Internal sever error. I've also included two lines of code for non-styled support from @vanilla-extract as a working reference.

1. Create a clean workspace

pnpx create-nx-workspace@latest foobar --preset=ts
cd foobar
pnpm add -D qwik-nx
pnpm exec nx g qwik-nx:app qwik --no-interactive

2. Since qwik add styled-vanilla-extract is broken in Qwik Nx, install VE and SVE manually —

pnpm add -D @vanilla-extract/vite-plugin styled-vanilla-extract @builder.io/qwik @vanilla-extract/css undici --filter qwik

3. Update / Add these 3 files

code .

// vite.config.ts

/// <reference types="vitest" />
import { qwikVite } from '@builder.io/qwik/optimizer';
import { qwikCity } from '@builder.io/qwik-city/vite';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
// import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'; // WORKS
import { vanillaExtractPlugin } from "styled-vanilla-extract/vite";     // DOES NOT WORK

export default defineConfig({
  plugins: [
    qwikCity(),
    qwikVite({
      client: {
        outDir: '../../dist/packages/qwiklab/client',
      },
      ssr: {
        outDir: '../../dist/packages/qwiklab/server',
      },
    }),
    tsconfigPaths(),
    vanillaExtractPlugin(),
  ],
  preview: {
    headers: {
      'Cache-Control': 'public, max-age=600',
    },
  }
});

// routes/index.tsx

import { component$ } from '@builder.io/qwik';
import type { DocumentHead } from '@builder.io/qwik-city';
import { RedText } from './styles.css';

export default component$(() => {
  return (
    <RedText>
      Qwik Styled Component -- Red Text!
    </RedText>
  );
});

export const head: DocumentHead = {
  title: 'Welcome to Qwik',
  meta: [
    {
      name: 'description',
      content: 'Qwik site description',
    },
  ],
};

// routes/styles.css.ts

import {styled} from 'styled-vanilla-extract/qwik'

export const RedText = styled.span`
  color: red;
`

4. Run

nx serve qwik

Expected behavior It should work, but crashes with a server-side error:

[vite] Internal server error: Failed to load url /*PROJ_PATH*/foobar/packages/qwiklab/~~~/foobar/src/routes/styles.css.ts (resolved id: /*PROJ_PATH*/foobar/packages/qwiklab/~~~/foobar/src/routes/styles.css.ts). Does the file exist?

NOTE Reconfigure the vite.config.ts to use the standard Vanilla Extract vite plugin and it works fine. @wmertens, any ideas why?

Additional context

https://qwik.builder.io/integrations/integration/styled-vanilla-extract/ https://github.com/wmertens/styled-vanilla-extract https://vanilla-extract.style/documentation/integrations/vite/ https://vanilla-extract.style/documentation/getting-started/#create-a-style

Add any other context about the problem here.

See Related Issue: Styled Vanilla Extract crashes in Qwik Nx projects

[n8sabes]

I have created a simple repo that reproduces this problem, HERE.

The line that cause the problem is HERE.

[dmitry-stepanenko]

The issue is on the styled-vanilla-extract side, created a PR there https://github.com/wmertens/styled-vanilla-extract/pull/16