Use Tailwind-Merge or Tailwind-Variants On Oxygen Runtime

169 Views Asked by At

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)
0

There are 0 best solutions below