ReferenceError: process is not defined when using with Cloudflare wrangler pages

[arielvieira]

When using twin.macro with cloudflare wrangler cli (wrangler pages dev) it will have no access to the process and thus throwing this error when trying to use the library.

C:\Users\{path}\tmp-9348-M70raJy1uRBS\[[path]].js:14140
    var isWindows = process.platform === "win32", splitWindowsRe = /^(((?:[a-zA-Z]:|[\\\/]{2}[^\\\/]+[\\\/]+[^\\\/]+)?[\\\/]?)(?:[^\\\/]*[\\\/])*)((\.{1,2}|[^\\\/]+?|)(\.[^.\/\\]*|))[\\\/]*$/, win32 = {};
                    ^
ReferenceError: process is not defined

[ben-rogerson]

Hey there, thanks for letting me know about this. I'm not sure where that process code lives, I don't believe it's within the twin codebase - do you have a repo or something I can use to test this?

[arielvieira]

@ben-rogerson I think this is coming from the chalk library or any sub dependency of a dependency.

Here's a working example of the issue: https://github.com/arielvieira/remix-cloudflare-pages-twin-macro

yarn install
yarn dev

In app\routes\index.tsx when importing import 'twin.macro' is throwing the error when running with the wrangler CLI.

import 'twin.macro'

[ben-rogerson]

After having a good crack at this I've concluded that twin isn't a good choice for styling within Remix.

Here are some reasons:

• You'd need to preprocess any file containing twin styles before consuming it within your app - meaning an additional dev process needs to be added to cover this
• A bunch of extra dependencies are required for styled-components or emotion/babel-cli/babel-core/babel-plugin-styled-components/babel-plugin-macros/twin.macro/etc
• styled-components/emotion also require custom config for style collection within entry.server.tsx
• Searching issues around babel-plugins + Remix - I see it's led many to reach the same conclusion that Babel + Remix is either not a good idea and issues remain unsolved
• I'm still getting errors not defined when trying to run all of this in a Cloudflare function

Sorry for the bad news here - perhaps you're better of with a vanilla tailwind styling solution.

[rafaell-lycan]

@arielvieira I had a similar issue when playing around with Remix. I also twin.macro is my tool of choice (with Emotion) I couldn't make it work either.

A solution I found "okay" was CVA which contains a similar Stitches API and works fine, you only need to learn how their API works. 👻

@ben-rogerson thanks for going through it. After failing badly to make it run, I found this issue. 👍

Hopefully twin.macro will evolve and become abstract enough to work on Remix/Astro/Whatever. 🙏

[dnnp2011]

I'm having this same error in a Laravel environment. I'm using Vite bundler (as is the default in Laravel 10). Vite doesn't support the process.env object. I have to use import.meta.env, which I would guess is where the problem lies.

import tw from 'twin.macro';

[ben-rogerson]

Closing this as we've found Cloudflare workers is an unsupported environment for babel macros to run.