Vanilla extract Next.js storybook: Can't resolve @vanilla-extract/css/recipe'

Question

I use vanilla extract in next.js project. When i configure vanilla extract in storybook, i meet this error.

Cannot find module '@vanilla-extract/css/recipe'
    at webpackMissingModule (vendors-node_modules_vanilla-extract_recipes_dist_vanilla-extract-recipes_esm_js-node_modules-2b7443.iframe.bundle.js:1960:50)
    at ./node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.esm.js (vendors-node_modules_vanilla-extract_recipes_dist_vanilla-extract-recipes_esm_js-node_modules-2b7443.iframe.bundle.js:1960:152)
    at options.factory (runtime~main.iframe.bundle.js:655:31)
    at __webpack_require__ (runtime~main.iframe.bundle.js:28:33)
    at fn (runtime~main.iframe.bundle.js:313:21)
    at ./components/base/atom/button/button.css.ts (component-base-atom-button-stories.iframe.bundle.js:140:82)
    at options.factory (runtime~main.iframe.bundle.js:655:31)
    at __webpack_require__ (runtime~main.iframe.bundle.js:28:33)
    at fn (runtime~main.iframe.bundle.js:313:21)
    at ./components/base/atom/button/index.tsx (component-base-atom-button-stories.iframe.bundle.js:259:69)

Can't resolve '@vanilla-extract/css/recipe' in '(project root)/node_modules/@vanilla-extract/recipes/dist'

I think, there is something special in vanilla extract.

This is main.ts

import type { StorybookConfig } from "@storybook/nextjs";
import * as path from "path";
import { TsconfigPathsPlugin } from "tsconfig-paths-webpack-plugin";

const config: StorybookConfig = {
  stories: [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-onboarding",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
    "@storybook/addon-styling-webpack",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  staticDirs: ["../public"],
  features: {
    //for react server component
    experimentalRSC: true,
  },
  webpackFinal: (config) => {
    // for webpack plugin
    if (config.resolve) {
      config.resolve.plugins = config.resolve.plugins || [];
      // for alias @
      config.resolve.plugins.push(
        new TsconfigPathsPlugin({
          configFile: path.resolve(__dirname, "../tsconfig.json"),
        })
      );
    }

    if (config.resolve?.alias) {
      config.resolve.alias["@vanilla-extract/css"] = require.resolve(
        "@vanilla-extract/css"
      );
    }

    if (config.module?.rules) {
      config.module.rules.push({
        test: /\.css$/i,
        use: ["@vanilla-extract/webpack-plugin/loader"],
      });
    }

    return config;
  },
};
export default config;

I use this packages.

"@vanilla-extract/css": "^1.14.1",
"@vanilla-extract/recipes": "^0.5.2",
"@vanilla-extract/sprinkles": "^1.6.1",
"next": "14.1.4",
---dev---
"mini-css-extract-plugin": "^2.8.1",
"storybook": "^8.0.4",
"@vanilla-extract/next-plugin": "^2.3.7",
"@vanilla-extract/webpack-plugin": "^2.3.7",
"@storybook/addon-essentials": "^8.0.4",

I think if manipulate webpack directly, i can beat this issue. Unfortunately I am not familiar with webpack. So I have a hard time writing webpackfinal (reference https://vanilla-extract.style/documentation/integrations/webpack/).