Can we run babel-plugin-macros in the browser

I am trying to transpile code containing a babel macro in a browser environment. The use case is for a live coding playground. Unfortunately when I try to use babelPluginMacros in a browser environment I run into issues because babelPluginMacros assumes a file system is available.

https://github.com/kentcdodds/babel-plugin-macros/blob/8fc6383ef04f628d0b799a9b281c5fc0693b25ac/src/index.js#L65-L73

Relevant code or config

import * as Babel from "@babel/standalone";
import babelPluginEmotion from "@emotion/babel-plugin";
import babelPluginMacros from "babel-plugin-macros";

// code to transpile containing a macro
const code = `import tw from 'twin.macro'; 
        render(<div css={tw\`bg-red-500\`}>I should have a red background!</div>)
`

Babel.transform(code, {
  presets: [
    [
      "react",
      { runtime: "automatic", importSource: "@emotion/react" },
    ],
  ],
  plugins: [
    [babelPluginEmotion, { sourceMap: false }],
    // the rest of this example works. I only get errors when I enable babelPluginMacros here
    babelPluginMacros,
  ],
})

What you did

tldr: monkey patching through webpack config but it isn’t working

First I ran into issues with fs since I’m running in the browser, so I set my webpack config to not fallback for fs.

config.resolve.fallback.fs = false;

Then I ran into issues with fs.statSync which is called by resolve.sync that I linked to earlier. So I added an empty function mock for resolve.

 config.resolve.alias = "fbjs/lib/emptyFunction"

Now I’m getting an error for resolve.sync is not a function which makes sense cause I set resolve to be an empty function.

I can keep going down this monkey-patching rabbit hole but I feel like I must be doing something wrong.

Ideas for Solutions

1. I see that macrosPlugin takes args. Is there any way for me to specify those? If I could override nodeResolvePath and require then I would be done.

https://github.com/kentcdodds/babel-plugin-macros/blob/8fc6383ef04f628d0b799a9b281c5fc0693b25ac/src/index.js#L80-L85

1. If 1 doesn’t work is there a way for me to mock or skip resolvePath. Once I get to interopRequire I think I can just alias it with webpack.

https://github.com/kentcdodds/babel-plugin-macros/blob/8fc6383ef04f628d0b799a9b281c5fc0693b25ac/src/index.js#L213-L215

I’m completely new to this stuff so would love any feedback from someone smarter than me.

Apologies for the issue on a dormant repo. If there is a better place to ask please let me know and I’ll close this and move it.

• babel-plugin-macros version: 3.1.0
• node version: 16.12.0
• npm version: 8.1.0

[lukesmurray]

Not sure if I’ll have the bandwidth to follow up on this but to close this out I published a demo with babel-plugin-macros running in the browser https://twin-playground.vercel.app/ and I open sourced the code in this repo.

All of the weird hacks I did to get this working are explained in code comments on this commit.

[conartist6]

Certainly! I spend a lot of time building open source things (mostly not this) but I really like getting a glimpse into the ways people are using things and whether the designs I support hold up to unforeseen conditions and challenges. In this case I think causally related errors would have helped a lot in figuring out what’s going on. It’s difficult to understand the flow of exception states when throw doesn’t include a trace, which is what happens when you catch an error and rethrow the exact same error (the second throw is not traced).