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

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]

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

[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
       }
    }
  ]
}