Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Compatability with twin.macro (and other babel-plugin-macro libs)
See original GitHub issuemdx-bundlerversion: 6.0.2nodeversion: 14.17.6npmversion: 6.14.15
Relevant code or config
Sample mdx file using twin.macro (https://github.com/ben-rogerson/twin.macro)
import tw from "twin.macro"
<div tw="bg-red-500">Hello World</div>
Here’s what happens during development:
Error: Build failed with 21 errors:
../../node_modules/babel-plugin-macros/dist/index.js:3:18: error: Could not resolve "path" (use "platform: 'node'" when building for node)
../../node_modules/cosmiconfig/dist/Explorer.js:8:43: error: Could not resolve "path" (use "platform: 'node'" when building for node)
../../node_modules/cosmiconfig/dist/ExplorerBase.js:9:43: error: Could not resolve "path" (use "platform: 'node'" when building for node)
../../node_modules/cosmiconfig/dist/ExplorerSync.js:8:43: error: Could not resolve "path" (use "platform: 'node'" when building for node)
../../node_modules/cosmiconfig/dist/getDirectory.js:9:43: error: Could not resolve "path" (use "platform: 'node'" when building for node)
...
at failureErrorWithLog (/home/arlyon/Programming/gym-game/web/node_modules/esbuild/lib/main.js:1493:15)
at /home/arlyon/Programming/gym-game/web/node_modules/esbuild/lib/main.js:1151:28
at runOnEndCallbacks (/home/arlyon/Programming/gym-game/web/node_modules/esbuild/lib/main.js:941:63)
at buildResponseToResult (/home/arlyon/Programming/gym-game/web/node_modules/esbuild/lib/main.js:1149:7)
at /home/arlyon/Programming/gym-game/web/node_modules/esbuild/lib/main.js:1258:14
at /home/arlyon/Programming/gym-game/web/node_modules/esbuild/lib/main.js:629:9
at handleIncomingPacket (/home/arlyon/Programming/gym-game/web/node_modules/esbuild/lib/main.js:726:9)
at Socket.readFromStdout (/home/arlyon/Programming/gym-game/web/node_modules/esbuild/lib/main.js:596:7)
at Socket.emit (events.js:400:28)
at Socket.emit (domain.js:532:15) {
errors: [
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "path" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "path" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "path" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "path" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "path" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "os" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "fs" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "path" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "fs" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "path" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "module" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "fs" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "fs" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "path" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "path" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "fs" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "path" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "os" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "tty" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "path" (use "platform: 'node'" when building for node)`
},
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: `Could not resolve "fs" (use "platform: 'node'" when building for node)`
}
],
warnings: []
}
Problem description:
I am serving it over nextjs and, from what I understand, this issue arises because twin.macro is intended to be run at build time but isn’t being invoked properly. My gut says esbuild isn’t playing nicely since twin.macro uses babel-plugin-macros, so the question is does this support tools utilising babel-plugin-macros in the MDX and how do we make it happen? If it is supposed to ‘just work’, then I’ll whip up a repro-repo as well.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:5 (2 by maintainers)
Top Results From Across the Web
kentcdodds/babel-plugin-macros: Allows you to build ... - GitHub
This solution. babel-plugin-macros defines a standard interface for libraries that want to use compile-time code transformation without requiring the user to ...
Read more >twin.macro - npm Package Health Analysis - Snyk
macro based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Healthy. We found that...
Read more >Intro to Twin: Combining the best of Tailwind and CSS-in-JS
Twin is a library that empowers developers to build better apps by blending the powers of Tailwind CSS along with CSS-in-JS.
Read more >Twin 101: Use Tailwind CSS + CSS-in-JS in a Next.js App
Twin is a library that let's you enjoy the best of Tailwind CSS ... -D twin.macro tailwindcss @emotion/babel-plugin babel-plugin-macros ...
Read more >babel-macros - Bountysource
I am trying to use babel-plugin-macros (specifically with the twin macro and tailwind) and while it works fine when running normally it fails...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Thanks for your answer @kentcdodds. What would need to happen to get the two packages to work together? I am not so familiar with ESBuild / Babel etc., so I’m a bit stuck, but I would like to maybe at least give it a try, if it’s in principle doable.
I think in theory it’s possible, but I don’t know how I’m afraid. Sorry.