When using Vanilla-extract with Turborepo and Next.js 14, a ModuleParseError occurs.

Question

When using Vanilla-extract with Turborepo and Next.js 14, a ModuleParseError occurs.

thisyujeong opened this issue 22 days ago · comments

Describe the bug

We are developing a design system using Vanilla Extract in a Turborepo (monorepo) environment. When importing and using vanilla-extract components in the web workspace, the following error occurs.

../../packages/ui/src/components/Accordion/AccordionContent.css.ts
ModuleParseError: Module parse failed: Unexpected token (118:7)
File was processed with these loaders:
 * ../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.7_@types+node@20.10.6_webpack@5.91.0/node_modules/@vanilla-extract/webpack-plugin/loader/dist/vanilla-extract-webpack-plugin-loader.cjs.js
You may need an additional loader to handle the result of these loaders.
| });
| export const sprinkles = createSprinkles(colorProperties, fontProperties, responsiveProperties, unconditionalProperties);
> export type Sprinkles = Parameters<typeof sprinkles>[0];
| endFileScope();
Import trace for requested module:
../../packages/ui/src/components/Accordion/AccordionContent.css.ts
...

Next.js Configuration in web workspace (next.config.js):

/** @type {import('next').NextConfig} */
const path = require('path');
const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');

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

Package.json in web workspace:

{
  "name": "mamo",
  "private": true,
  "scripts": {
    "build": "turbo build",
    "dev": "turbo dev",
    "lint": "turbo lint",
    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
    "prepare": "husky install",
    "build-storybook": "turbo run build-storybook --filter=workshop",
    "chromatic": "turbo run chromatic --filter=workshop"
  },
  "devDependencies": {
    "@repo/eslint-config": "workspace:*",
    "@repo/typescript-config": "workspace:*",
    "husky": "^8.0.0",
    "lint-staged": "^15.2.2",
    "prettier": "^3.1.1",
    "turbo": "latest"
  },
  "packageManager": "pnpm@8.9.0",
  "engines": {
    "node": ">=18"
  }
}

I wrote the following code in the web workspace to use the design system.

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

And @repo/ui package.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",
    "build": "tsup",
    "dev": "tsup --watch"
  },
  "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/recipes": "^0.5.2",
    "@vanilla-extract/sprinkles": "^1.6.1",
    "eslint": "^8.56.0",
    "typescript": "^5.3.3",
    "tsup": "^8.0.2"
  },
  "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"
  }
}

Request:

To successfully use Next.js and Vanilla Extract in Turborepo, what attempts can I make to resolve this?

Reproduction

none

System Info

System:
    OS: macOS 14.0
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 793.84 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
    pnpm: 8.9.0 - ~/.nvm/versions/node/v18.17.0/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.61
    Safari: 17.0
  npmPackages:
    @vanilla-extract/next-plugin: ^2.3.7 => 2.4.

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:52:11 GMT+0800 (China Standard Time)

Your @repo/ui package looks very similar to the one in #1428. Are they the same? Not really an issue if they aren't, but my guess is that these issues could be related.

One thing that stands out to me is your next config:

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

Calling the result of createVanillaExtractPlugin (the ({}) at the end) doesn't seem correct.

It's quite hard to diagnose project-setup problems like this without a minimal reproduction. Your config and a few package.json files alone aren't really enough. A repo that I can clone and run locally would help a lot.

Adam Skoufis · Answer 2 · Thu Jun 20 2024 09:35:41 GMT+0800 (China Standard Time)

I think this was just a docs issue. I'm somewhat confident that your issue is related to the same repo mentioned in #1428, so fixing the next config should work.

Yujeong Lee · Answer 3 · Thu Jun 20 2024 22:54:25 GMT+0800 (China Standard Time)

Thank you for your response! After modifying the next.config.js file as you advised in issue #1428, the above issue was resolved, but the error message from issue #1428 occured. 😂

Before:

/** @type {import('next').NextConfig} */
const path = require('path');
const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');

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

After:

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'],
});

Error Message:

Syntax error: /Users/.../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.7_@types+node@20.10.6_webpack@5.91.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) {

Adam Skoufis · Answer 4 · Fri Jun 21 2024 08:58:57 GMT+0800 (China Standard Time)

@thisyujeong Commenting out some of your components makes the error go away. Importing some of them causes errors, but I don't know why. This is what I ended up with, and your page loads (I also had to delete apps/web/src/pages/index.ts):

export { Badge, type BadgeProps } from "./Badge/Badge";
//
// export { ToastProvider } from "./Toast/ToastContext";
// export { Toast } from "./Toast/Toast";
// export { useToast } from "./Toast/hooks/useToast";
// export { ToastContainer } from "./Toast/ToastContainer";

// export { Tag, type TagProps } from "./Tag/Tag";
// export { Tooltip, type TooltipProps } from "./Tooltip/Tooltip";

export { Input, type InputProps } from "./Input/Input";
// export { InputNumber, type InputNumberProps } from "./InputNumber/InputNumber";

export { Button } from "./Button/Button";
export { ButtonGroup } from "./ButtonGroup/ButtonGroup";
// export { BottomSheet } from "./BottomSheet/BottomSheet";
// export { Fab } from "./Fab/Fab";
// export { Card } from "./Card/Card";
// export { Divider } from "./Divider/Divider";
// export { Textarea, type TextareaProps } from "./Textarea/Textarea";
//
// export { Select } from "./Select/Select";
//
// export { Accordion } from "./Accordion";
// export { Tabs } from "./Tabs";
// export { NavigationBar } from "./NavigationBar/NavigationBar";
// export { List } from "./List/List";
// export { ListItem } from "./List/ListItem";
// export { Typography } from "./Typography/Typography";
// export { Chip } from "./Chip/Chip";
// export { Progress } from "./Progress/Progress";
// export { DatePicker } from "./DatePicker/DatePicker";

/* styles */
export * as globalCSS from "../styles/global.css";

Just FYI, it's very hard to debug issues in these kinds of real-world/production repos. If you are still running into more errors, a separate, minimal reproduction would be much appreciated.

Yujeong Lee · Answer 5 · Mon Jun 24 2024 07:29:12 GMT+0800 (China Standard Time)

@askoufis After following the component where the error code occurs, we found that the error only happens in the component using vanilla-extract/recipes. I don't know the cause. If this issue doesn't get resolved, we might have to create a new project.

Adam Skoufis · Answer 6 · Tue Jul 02 2024 11:30:37 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.

GeoJung Im · Answer 7 · Tue Jul 02 2024 11:41:07 GMT+0800 (China Standard Time)

The issue is from using globalStyle with recipe. After changed globalStyle by using style it worked. Thanks.