fix: playground build

Author: segunadebayo

playground/empty-module.js

@@ -0,0 +1,2 @@
+// Empty module for webpack fallback
+module.exports = {}

playground/next.config.js

@@ -0,0 +1,89 @@
+import bundleAnalyzer from '@next/bundle-analyzer'
+import { createRequire } from 'node:module'
+
+const isViz = process.env.ANALYZE === 'true'
+
+const req = createRequire(import.meta.url)
+
+const withBundleAnalyzer = bundleAnalyzer({
+  enabled: isViz,
+})
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: (config, { isServer, webpack }) => {
+    // aliases for resolving packages in the project
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@vue/compiler-sfc': '@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js',
+      lightningcss: 'lightningcss-wasm',
+    }
+
+    if (!isServer) {
+      // Use NormalModuleReplacementPlugin to handle node: scheme imports
+      config.plugins.push(
+        // Create empty module replacements for disabled modules
+        new webpack.NormalModuleReplacementPlugin(/^node:fs\/promises$/, (resource) => {
+          resource.request = req.resolve('./empty-module.js')
+        }),
+        new webpack.NormalModuleReplacementPlugin(/^node:fs$/, (resource) => {
+          resource.request = req.resolve('./empty-module.js')
+        }),
+        new webpack.NormalModuleReplacementPlugin(/^node:os$/, req.resolve('os-browserify/browser')),
+        new webpack.NormalModuleReplacementPlugin(/^node:path$/, req.resolve('path-browserify')),
+        new webpack.NormalModuleReplacementPlugin(/^node:util$/, req.resolve('util')),
+        new webpack.NormalModuleReplacementPlugin(/^node:crypto$/, (resource) => {
+          resource.request = req.resolve('./empty-module.js')
+        }),
+        new webpack.NormalModuleReplacementPlugin(/^node:buffer$/, (resource) => {
+          resource.request = req.resolve('./empty-module.js')
+        }),
+        new webpack.NormalModuleReplacementPlugin(/^node:stream$/, (resource) => {
+          resource.request = req.resolve('./empty-module.js')
+        }),
+        new webpack.NormalModuleReplacementPlugin(/^node:url$/, (resource) => {
+          resource.request = req.resolve('./empty-module.js')
+        }),
+        new webpack.NormalModuleReplacementPlugin(/^node:assert$/, (resource) => {
+          resource.request = req.resolve('./empty-module.js')
+        }),
+        new webpack.NormalModuleReplacementPlugin(/^node:events$/, (resource) => {
+          resource.request = req.resolve('./empty-module.js')
+        }),
+        new webpack.NormalModuleReplacementPlugin(/^node:process$/, req.resolve('process/browser')),
+      )
+
+      config.resolve.fallback = {
+        ...config.resolve.fallback,
+        // Node.js built-in modules - disable for browser
+        perf_hooks: false,
+        fs: false,
+        // Legacy module names (keep existing)
+        module: req.resolve('./module.shim.ts'),
+        os: req.resolve('os-browserify/browser'),
+        path: req.resolve('path-browserify'),
+        util: req.resolve('util'),
+        process: req.resolve('process/browser'),
+        crypto: false,
+        buffer: false,
+        stream: false,
+        url: false,
+        assert: false,
+        events: false,
+      }
+    }
+
+    config.module.rules.push({
+      resourceQuery: /raw/,
+      loader: 'raw-loader',
+    })
+
+    return config
+  },
+  reactStrictMode: true,
+  typescript: {
+    ignoreBuildErrors: isViz,
+  },
+}
+
+export default withBundleAnalyzer(nextConfig)

playground/next.config.mjs

@@ -48,7 +48,7 @@
     "sucrase": "3.35.0",
     "ts-pattern": "5.8.0",
     "typescript": "5.8.3",
-    "usehooks-ts": "3.1.1",
+    "usehooks-ts": "2.14.0",
     "util": "0.12.5",
     "zod": "3.22.4"
   },

playground/package.json

@@ -1,3 +1,4 @@
+import * as _pandacss_types from '@pandacss/types';
 import { Config, RecipeVariantRecord, RecipeConfig, SlotRecipeVariantRecord, SlotRecipeConfig, Parts, SystemStyleObject, PatternConfig, Preset, CssKeyframes, GlobalStyleObject, GlobalFontface, PropertyConfig, PandaPlugin, ThemeVariant, Tokens, SemanticTokens, CompositionStyles, TextStyles, LayerStyles } from '@pandacss/types';
 export { CompositionStyles, Config, CssKeyframes, GlobalStyleObject, HooksApiInterface, LayerStyles, PatternConfig, PatternProperties, Preset, PropertyConfig, RecipeConfig, RecipeVariantRecord, SemanticTokens, SlotRecipeConfig, SlotRecipeVariantRecord, SystemStyleObject, TextStyles, Tokens } from '@pandacss/types';
 

playground/src/dts/@pandacss_dev.d.ts

@@ -281,7 +281,7 @@ export interface ArtifactContent {
 	file: string;
 	code: string | undefined;
 }
-export type ArtifactId = "helpers" | "keyframes" | "design-tokens" | "types" | "css-fn" | "cva" | "sva" | "cx" | "create-recipe" | "recipes" | "recipes-index" | "patterns" | "patterns-index" | "jsx-is-valid-prop" | "jsx-helpers" | "jsx-factory" | "jsx-patterns" | "jsx-patterns-index" | "css-index" | "themes" | "package.json" | "types-jsx" | "types-entry" | "types-styles" | "types-conditions" | "types-gen" | "types-gen-system" | `recipes.${string}` | `patterns.${string}`;
+export type ArtifactId = "helpers" | "keyframes" | "design-tokens" | "types" | "css-fn" | "cva" | "sva" | "cx" | "create-recipe" | "recipes" | "recipes-index" | "patterns" | "patterns-index" | "jsx-is-valid-prop" | "jsx-helpers" | "jsx-factory" | "jsx-patterns" | "jsx-create-style-context" | "jsx-patterns-index" | "css-index" | "themes" | "package.json" | "types-jsx" | "types-entry" | "types-styles" | "types-conditions" | "types-gen" | "types-gen-system" | `recipes.${string}` | `patterns.${string}`;
 export type CssArtifactType = "preflight" | "tokens" | "static" | "global" | "keyframes";
 export type Artifact = {
 	id: ArtifactId;