Unable to use vanilla-extract in a monorepo setup

[cojoclaudiu]

Describe the bug

Hello, I'm trying to move the current project to a monorepo setup, but after creating the workspaces and I importing the functions from there I got the bellow errors.

Reproduction

https://github.com/cojoclaudiu/vite-vanilla-extract-monorepo

System Info

System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M1
    Memory: 75.98 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.10.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 113.0.5672.126
    Firefox: 113.0.1
    Safari: 16.3
  npmPackages:
    @vanilla-extract/css: ^1.11.1 => 1.11.1 
    @vanilla-extract/vite-plugin: ^3.8.2 => 3.8.2 
    vite: ^4.3.9 => 4.3.9

Used Package Manager

yarn

Logs

No loader is configured for ".svg" files: src/icons/svg/vite.svg

    src/icons/svg/index.ts:1:53:
      1 │ import viteIcon, { ReactComponent as ViteIcon } from "./vite.svg";
        ╵                                                      ~~~~~~~~~~~~

Build failed with 1 error:
src/icons/svg/index.ts:1:53: ERROR: No loader is configured for ".svg" files: src/icons/svg/vite.svg
18:17:06 [vite] Internal server error: Build failed with 1 error:
src/icons/svg/index.ts:1:53: ERROR: No loader is configured for ".svg" files: src/icons/svg/vite.svg
  Plugin: vanilla-extract
  File: /Users/claudiu.cojocaru/Development/vite-svg-monorepo/src/styles.css.ts
      at failureErrorWithLog (/Users/claudiu.cojocaru/Development/vite-svg-monorepo/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:1636:15)
      at /Users/claudiu.cojocaru/Development/vite-svg-monorepo/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:1048:25
      at runOnEndCallbacks (/Users/claudiu.cojocaru/Development/vite-svg-monorepo/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:1471:45)
      at buildResponseToResult (/Users/claudiu.cojocaru/Development/vite-svg-monorepo/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:1046:7)
      at /Users/claudiu.cojocaru/Development/vite-svg-monorepo/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:1075:16
      at responseCallbacks.<computed> (/Users/claudiu.cojocaru/Development/vite-svg-monorepo/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:697:9)
      at handleIncomingPacket (/Users/claudiu.cojocaru/Development/vite-svg-monorepo/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:752:9)
      at Socket.readFromStdout (/Users/claudiu.cojocaru/Development/vite-svg-monorepo/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:673:7)
      at Socket.emit (node:events:527:28)
      at addChunk (node:internal/streams/readable:315:12)
      at readableAddChunk (node:internal/streams/readable:289:9)
      at Socket.Readable.push (node:internal/streams/readable:228:10)
      at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

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.

[askoufis]

VE uses esbuild internally to compile .css.ts files. Even though you're not importing an svg directly in your .css.ts file, @mono/utils still reference the getIcon function, so I think that module is still loaded, and then eventually the svg is loaded, but esbuild doesn't know how to load it.

The vite plugin supports an esbuildOptions config that allows you to configure a subset of esbuild options, including plugins. The esbuild plugin documents this, but neither the vite plugin nor the rollup plugin docs have it. I'll fix this up.

I got your code working by doing the following:

1. Run yarn -W add esbuild-plugin-svgr
2. Run yarn -W add vite-plugin-svgr and replace @svgr/rollup
3. Update vite config:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
import svgr from "vite-plugin-svgr";
import esbuildSvgr from "esbuild-plugin-svgr";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    svgr(),
    vanillaExtractPlugin({ esbuildOptions: { plugins: [esbuildSvgr()] } }),
  ],
});