Error when using Vanilla Extract Design system in a Turborepo monorepo with Next.js14

Question

Error when using Vanilla Extract Design system in a Turborepo monorepo with Next.js14

dgd03146 opened this issue 2 months ago · comments

Describe the bug

I am using a Turborepo monorepo setup, and I have a design system built with Vanilla Extract. I am trying to use this design system in my Next.js web repository, but I encounter the following error:

 ⨯ ../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.10_@types+node@20.14.2_webpack@5.92.0/node_modules/@vanilla-extract/webpack-plugin/vanilla.virtual.css?%7B%22fileName%22%3A%22..%2F..%2Fpackages%2Fui%2Fsrc%2Fcomponents%2FCard%2FCard.css.ts.vanilla.css%22%2C%22source%22%3A%22%23H4sIAAAAAAAACo1UXW%2FaMBR951fcSlsDaqF0W6WKiG4TT3vZS6W9IBQZ7BB3jh3ZDi2r%2BO%2B1HTtfBGlCIrHvPeeec%2BPr2QpJnOzsH6YHiolMtCxJkrx8lduHb%2FA%2BAigQxpTvp1oUC3gs3uLRaTRrcFshDYwRpZIUMRWwDw5bBadKHxlZgBKM4rjZfqVYZwu4b3MGGRXLo2NxlecWyEiq%2Fauk%2B6x6r%2BUIrgnXiaL%2FSIJJikqmPU927uTeWWk2t0JrkYf9wJkRZNT84ryWlLeNVaCOkX6s6z3w0hztSSJFyTHBnca9tvklwrRU3qUoNBVcwfLJpQAckIQdQ0r9RjmBJZgGpHQ%2F89ZXIRLXyYowsvMkkIjti1k9F9J4%2FDLuLd9Ptz2%2BP0hSxLWa3IJXMqmYUyFhbOkPVYZTQ3mr2sQLrlQkTeBTDYlbCX7zOaQZseNBkAk02%2BtW%2Bc0ErpZL4CVjcH09XNFlHATFMIfvF1IWF3rQqRWk09S1oSv9qlLRdKD3JYyFPiauMy2jPhZEpG2AkR1thWAE8ajNC3B3Bz%2B0mpK3wuROiZRCtqLtml06O%2FOmB5F9RsZ05A5k1Ag5DYtfNYdv9D8afDO94Rrdbee6pt90O3Fetuu%2BGYUb0yHzuxlQeu6pep66R3m9E3lhp3OVkd1fOwp%2BGXg2YD6K9xOC9YTUspzsTJQM%2FywKdlz5xHGPvTl7F4eubXXA6Jm%2BeMCdJLqUvIHbnBM8Ac33jj1cY%2FP5ZxvKSHXFhnV1QUxTqu1YHIg0l9IHL7SlGkEGAAA%3D%22%7D:25:5
Syntax error: C:\Users\Jeong\Desktop\Coding\mamo\node_modules\.pnpm\@vanilla-extract+webpack-plugin@2.3.10_@types+node@20.14.2_webpack@5.92.0\node_modules\@vanilla-extract\webpack-plugin\vanilla.virtual.css Unknown word

  23 | }
  24 | options => {
> 25 |     var className = config.defaultClassName;
     |     ^
  26 |     var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
  27 |     for (var variantName in selections) {
 GET / 500 in 9833ms
 GET /mockServiceWorker.js 500 in 53ms
 GET /mockServiceWorker.js 500 in 13ms

Next.js Configuration (next.config.js):

const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
const withVanillaExtract = createVanillaExtractPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@repo/ui'],
};

module.exports = withVanillaExtract(nextConfig);

Web workspace Package.json:

{
  "name": "web",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint --fix"
  },
  "dependencies": {
    "@repo/ui": "workspace:*",
    "@tanstack/react-query": "^5.24.1",
    "docs": "workspace:*",
    "next": "^14.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "zustand": "^4.5.2"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^14.0.4",
    "@repo/eslint-config": "workspace:^",
    "@repo/typescript-config": "workspace:*",
    "@tanstack/eslint-plugin-query": "^5.20.1",
    "@types/eslint": "^8.56.1",
    "@types/node": "^20.10.6",
    "@types/react": "^18.2.46",
    "@types/react-dom": "^18.2.18",
    "eslint": "^8.56.0",
    "typescript": "^5.3.3",
    "@vanilla-extract/next-plugin": "^2.4.1"
  }
}

when I try to use in web workspace(nextjs14) it makes this error.

import { Button } from '@repo/ui';

export default function Page() {
  return (
    <main>
      <Button>hihi</Button>
    </main>
  );
}

@repo/ui pakage.json

{
  "name": "@repo/ui",
  "version": "0.0.0",
  "private": true,
  "exports": {
    ".": "./src/components/index.ts",
    "./styles": "./src/styles/index.ts",
    "./icons": "./src/assets/icons/index.ts"
  },
  "scripts": {
    "lint": "eslint --fix",
    "generate:component": "turbo gen react-component"
  },
  "devDependencies": {
    "@mamo/shared": "workspace:*",
    "@repo/eslint-config": "workspace:*",
    "@repo/typescript-config": "workspace:*",
    "@turbo/gen": "^1.11.3",
    "@types/eslint": "^8.56.1",
    "@types/node": "^20.10.6",
    "@types/react": "^18.2.46",
    "@types/react-dom": "^18.2.18",
    "@vanilla-extract/css": "^1.14.1",
    "@vanilla-extract/css-utils": "^0.1.4",
    "@vanilla-extract/recipes": "^0.5.2",
    "@vanilla-extract/sprinkles": "^1.6.1",
    "eslint": "^8.56.0",
    "typescript": "^5.3.3"
  },
  "dependencies": {
    "@vanilla-extract/dynamic": "^2.1.0",
    "clsx": "^2.1.0",
    "dayjs": "^1.11.10",
    "react-calendar": "^4.8.0",
    "swiper": "6.8.4",
    "react-dom": "^18.2.0",
    "react": "^18.2.0"
  }
}

Expected Behavior:

The design system should be imported and used in the Next.js application without any build errors.

Actual Behavior:

Encountering a syntax error related to the vanilla.virtual.css file.

Request:

How can I resolve this issue to successfully use my design system in the Next.js application within a Turborepo monorepo setup?

Reproduction

none

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 2.41 GB / 15.71 GB
  Binaries:
    Node: 18.17.1 - C:\Program Files\nodejs\node.EXE
    npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.9.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (126.0.2592.56)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @vanilla-extract/next-plugin: ^2.4.1 => 2.4.2

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.

Adam Skoufis · Answer 1 · Tue Jun 18 2024 07:53:09 GMT+0800 (China Standard Time)

This is quite hard to diagnose without a minimal reproduction. Just a few package.json isn't enough to get an idea of what the problem is. A repo I can clone and run locally would help a lot.

GeoJung Im · Answer 2 · Tue Jun 18 2024 08:36:14 GMT+0800 (China Standard Time)

This is quite hard to diagnose without a minimal reproduction. Just a few package.json isn't enough to get an idea of what the problem is. A repo I can clone and run locally would help a lot.

You can clone this repo and switch to the develop branch. The problem occurs when I run pnpm run dev in the web workspace.

Adam Skoufis · Answer 3 · Thu Jun 20 2024 09:29:15 GMT+0800 (China Standard Time)

Your next.config.js is incorrect, which is causing transpilePackages to be ignored and the Vanilla Extract plugin to not be appplied, but it's because our documentation has a mistake.

It should look something like this:

/** @type {import('next').NextConfig} */

const path = require("path");
const { createVanillaExtractPlugin } = require("@vanilla-extract/next-plugin");

const withVanillaExtract = createVanillaExtractPlugin();

module.exports = withVanillaExtract({
  aliases: {
    "@/*": [path.join(__dirname, "*")],
  },
  rootDir: __dirname,
  transpilePackages: ["@repo/ui"],
});

I will update our documentation.

GeoJung Im · Answer 4 · Fri Jun 21 2024 19:59:59 GMT+0800 (China Standard Time)

It still occurs same error.. even though I changed the nest.configs

Adam Skoufis · Answer 5 · Mon Jun 24 2024 07:39:39 GMT+0800 (China Standard Time)

It still occurs same error.. even though I changed the nest.configs

Take a look at this comment on #1429, which I think should fix your issue too. I'd appreciate some communication between the author of this issue and @thisyujeong as it seems you are both trying to solve the same issue in the same repo at the same time. Ideally I'd like to close either this issue or #1429.

Adam Skoufis · Answer 6 · Tue Jul 02 2024 11:30:32 GMT+0800 (China Standard Time)

This issue has been closed due to merging #1435. I think the original issues was simply a misconfiguration. If you're still running into issues with recipes/something else, please make a separate issue with a minimal reproduction.