Ecommerce Shopify WordPress Discussion

Use Tailwind-Merge or Tailwind-Variants On Oxygen Runtime

TL;DR version: I'm trying to use the tailwind-variants and tailwind-merge packages with tailwindcss in a Hydrogen environment but can't seem to add enough polyfills to make it work on the Oxygen runtime... This must be a common setup since Hydrogen comes with a tailwindcss template... Has anyone been able to successfully use tailwind-merge or tailwind-variants? As a more general question: is it possible to effectively polyfill for node packages in hydrogen on the oxygen runtime? Any help would be greatly appreciated! Thank you! What I have tried: I get the following errors: ✘ [ERROR] Node builtin "fs" (imported by "node_modules/tailwind-variants/dist/chunk-FUBUDMV2.js") must be polyfilled for the browser. You can enable this polyfill in your Remix config, e.g. `browserNodeBuiltinsPolyfill: { modules: { fs: true } }` [plugin browser-node-builtins-polyfill-plugin] ✘ [ERROR] Node builtin "path" (imported by "node_modules/tailwind-variants/dist/chunk-FUBUDMV2.js") must be polyfilled for the browser. You can enable this polyfill in your Remix config, e.g. `browserNodeBuiltinsPolyfill: { modules: { path: true } }` [plugin browser-node-builtins-polyfill-plugin] Tailwind-variants seems to require the node modules "fs" and "path". When I polyfill with the following in the remix.config.js: serverNodeBuiltinsPolyfill: { modules: { fs: true, path: true, }, }, browserNodeBuiltinsPolyfill: { modules: { fs: true, path: true, }, }, I then get this error: ✘ [ERROR] Could not resolve "tty" node_modules/picocolors/picocolors.js:1:18: 1 │ let tty = require("tty") ╵ ~~~~~ The package "tty" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error. I know from past experience trying to get tailwind-merge to work alone that this error comes from trying to configure tailwind-merge. When I add "tty" to the server and browser polyfill list I get this error: service core:user:hydrogen: Uncaught ReferenceError: process is not defined at index.js:29652:92 in node_modules/picocolors/picocolors.js at index.js:17:50 at index.js:29713:64 in node_modules/tailwindcss/lib/util/log.js at index.js:29768:57 in node_modules/tailwindcss/lib/public/colors.js at index.js:30114:18 in node_modules/tailwindcss/colors.js at index.js:30122:128 in node_modules/@tailwindcss/forms/src/index.js MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above. at #assembleAndUpdateConfig (/Users/devuser/Documents/GitHub/hydrogen/node_modules/miniflare/dist/src/index.js:8031:13) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Mutex.runWith (/Users/devuser/Documents/GitHub/hydrogen/node_modules/miniflare/dist/src/index.js:3332:16) at async #waitForReady (/Users/devuser/Documents/GitHub/hydrogen/node_modules/miniflare/dist/src/index.js:8081:5) at async startWorkerdServer (file:///Users/devuser/Documents/GitHub/hydrogen/node_modules/@shopify/cli-hydrogen/dist/lib/mini-oxygen/workerd.js:81:24) at async safeStartMiniOxygen (file:///Users/devuser/Documents/GitHub/hydrogen/node_modules/@shopify/cli-hydrogen/dist/commands/hydrogen/dev.js:118:18) at async onBuildFinish (file:///Users/devuser/Documents/GitHub/hydrogen/node_modules/@shopify/cli-hydrogen/dist/commands/hydrogen/dev.js:202:13) I keep doing this process (adding polyfills to fix the next error) until I have added all these polyfills and now I am stuck at this error that doesn't make any sense: Final polyfills: serverNodeBuiltinsPolyfill: { globals: { process: true, }, modules: { tty: true, fs: true, path: true, }, }, browserNodeBuiltinsPolyfill: { globals: { process: true, }, modules: { tty: true, fs: true, path: true, process: true, }, }, Final error: service core:user:hydrogen: Uncaught Error: No such module "node:process". imported from "index.js" MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above. at #assembleAndUpdateConfig (/Users/devuser/Documents/GitHub/hydrogen/node_modules/miniflare/dist/src/index.js:8031:13) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Mutex.runWith (/Users/devuser/Documents/GitHub/hydrogen/node_modules/miniflare/dist/src/index.js:3332:16) at async #waitForReady (/Users/devuser/Documents/GitHub/hydrogen/node_modules/miniflare/dist/src/index.js:8081:5) at async startWorkerdServer (file:///Users/devuser/Documents/GitHub/hydrogen/node_modules/@shopify/cli-hydrogen/dist/lib/mini-oxygen/workerd.js:81:24) at async safeStartMiniOxygen (file:///Users/devuser/Documents/GitHub/hydrogen/node_modules/@shopify/cli-hydrogen/dist/commands/hydrogen/dev.js:118:18) at async onBuildFinish (file:///Users/devuser/Documents/GitHub/hydrogen/node_modules/@shopify/cli-hydrogen/dist/commands/hydrogen/dev.js:202:13)
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.