Can we run babel-plugin-macros in the browser
See original GitHub issueI 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.
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
- 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.
- If 1 doesn’t work is there a way for me to mock or skip
resolvePath
. Once I get tointeropRequire
I think I can just alias it with webpack.
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.0node
version: 16.12.0npm
version: 8.1.0
Issue Analytics
- State:
- Created a year ago
- Comments:10
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.
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).