'Module not found' when using twin.macro in MDX files

[fvanwijk]

I was just upgrading to Storybook 6 and the stories won't compile anymore. It looks like twin.macro is the culprit, but I'm not sure.
So, I created a new CRA project, added tailwindcss, twin.macro, styled-components and typescript. I copied over tailwind.config.js, the twin.macro config, and one simple Badge.tsx and Badge.stories.mdx file. Both of the stories files use some <div tw="..."> stuff. I managed to reproduce the errors but everything seems to compile again when I remove the twin.macro import from the MDX file.

In the terminal I see first some warnings

WARNING in ./node_modules/babel-plugin-macros/dist/index.js 78:24-31
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
@ ./node_modules/twin.macro/macro.js

Same for "WARNING in ./node_modules/twin.macro/macro.js 40:61-80" and "WARNING in ./node_modules/babel-plugin-macros/node_modules/import-fresh/index.js 31:31-48"

Then errors:

ERROR in ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/readFile.js
Module not found: Error: Can't resolve 'fs' in '/home/fvanwijk/projects/storybook-test/node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist'

(and more similar errors)

So my questions are:

1. Could you reproduce this issue?
2. Could you confirm the issue is caused by twin.macro not being compatible with storybook 6 when using MDX files?
3. Do you know how to fix?

As workaround I could extract all story boilerplate into tsx files, but I find it quite cumbersome to do this for something simple like 3 component examples in a grid.

[ben-rogerson]

Those errors pop up when twin is run through the typescript compiler rather than the babel compiler.
You'll need to replace the typescript loader with babel-loader.
Try this guide

[fvanwijk]

Thanks Ben, you're awesome as always.

I will look into it.
First thing I notice is that the TS docs say that babel-loader is already being used for React. However, since the errors appear only in MDX files, I suspect that the react-docgen-typescript-plugin or something else MDX related is causing these issues. I hope I can configure it to use babel-loader instead of ts-loader.

[matthisk]

I found the issue. In Storybook 6.0 the stories.mdx files still use the babel-loader. However the loader now disables the babelrc configuration. This probably has the side-effect of not loading our bableMacros config from the package.json. When I remove the babelrc and configFile field from the webpack config, tw.macro works correctly in mdx again. I wonder why Storybook decided to disable babelrc in the loader?

{
  "test": "/(stories|story).mdx/",
  "use": [
    {
      "loader": "babel-loader/lib/index.js",
      "options": {
        "babelrc": false,
        "configFile": false
       }
    }
  ]
}

[ben-rogerson]

Looks like there's a @fvanwijk verified fix on the way with storybook which is great 😃

As a sidenote, twin will soon have a storybook starter/demo - I'm hoping it will help identify similar issues that pop up between versions.

[ben-rogerson]

Fixed in [email protected], closing for now 👋

[ben-rogerson]

I've just added a storybook + emotion demo, more soon.

[sivaraj-v]

ok/node_modules/import-fresh/node_modules/resolve-from'
 @ ./node_modules/import-fresh/node_modules/resolve-from/index.js 23:13-30
 @ ./node_modules/import-fresh/index.js
 @ ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/loaders.js
 @ ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/twin.macro/macro.js
 @ ./packages/component-tabs/lib/tabs.js
 @ ./packages/component-tabs/lib/index.js
 @ ./packages/component-layout/src/layout.js
 @ ./packages/component-layout/src/index.js
 @ ./packages/component-layout/layout.stories.js
 @ ./packages sync \.stories\.js$
 @ ./.storybook/preview.js
 @ ./.storybook/preview.js-generated-config-entry.js

Still its not fixed

[ben-rogerson]

Oh really? Whats your setup look like @sivaraj-v ?

[vjpr]

I had a similar stack trace to @sivaraj-v, and it was caused by babel-plugin-macros not used for transpilation. Macros should be evaluated at build time, but if you don't have the plugin configured, they are bundled in.

Ideally, we should have a check to warn of twin.macro being evaluated at runtime.

[dominik-sfl]

Are there any news on this?

I am trying to use twin.macro in mdx files with mdx-bundler in next.js.
Right now, I am using component substitution to make things work, but it would be nice to have dynamic imports available.

[judehunter]

I'm also trying to use twin.macro with mdx-bundler and the styles in the tw prop are simply not applied. Not sure how to fix that