Lightrun
question-mark
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.

Using plugin in storybook v5

See original GitHub issue

It may be a follow up of #7

I’m getting a build-time error when trying to use this plugin in a storybook without success.

The plugin works well with CRA (using v1):

// @ babel-plugin-macros.config.js
module.exports = {
  tailwind: {
    styled: 'styled-components/macro',
  },
};

// @ .babelrc / ./storybook/.babelrc
{
  "plugins": ["macros", "@babel/plugin-syntax-object-rest-spread"],
  "presets": ["react"]
}

// .storybook/webpack.config.js
const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, '../src/components'),
      '@config': path.resolve(__dirname, '../src/config'),
      '@content': path.resolve(__dirname, '../src/content'),
      '@fonts': path.resolve(__dirname, '../src/fonts'),
      '@images': path.resolve(__dirname, '../src/images'),
      '@pages': path.resolve(__dirname, '../src/pages'),
      '@styles': path.resolve(__dirname, '../src/styles'),
      '@utils': path.resolve(__dirname, '../src/utils'),
      '@hooks': path.resolve(__dirname, '../src/hooks'),
      '@constants': path.resolve(__dirname, '../src/constants'),
    },
    extensions: ['.js', '.jsx', '.css', '.png', '.jpg', '.gif', '.jpeg'],
  },
};

Any guidance/suggesting (is it plugin’s issue or storybook’s) will be much appreciated.

Full Log 

ERROR in ./node_modules/cosmiconfig/dist/readFile.js
Module not found: Error: Can't resolve 'fs' in '/home/denvash/dev/github/gissy/dashboard/node_modules/cosmiconfig/dist'
 @ ./node_modules/cosmiconfig/dist/readFile.js 4:11-24
 @ ./node_modules/cosmiconfig/dist/createExplorer.js
 @ ./node_modules/cosmiconfig/dist/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/tailwind.macro/macro.js
 @ ./src/styles/index.js
 @ ./src/styles/Button/Button.stories.jsx
 @ ./src sync \.stories\.jsx$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/is-directory/index.js
Module not found: Error: Can’t resolve ‘fs’ in ‘/home/denvash/dev/github/gissy/dashboard/node_modules/is-directory’
@ ./node_modules/is-directory/index.js 10:9-22
@ ./node_modules/cosmiconfig/dist/getDirectory.js
@ ./node_modules/cosmiconfig/dist/createExplorer.js
@ ./node_modules/cosmiconfig/dist/index.js
@ ./node_modules/babel-plugin-macros/dist/index.js
@ ./node_modules/tailwind.macro/macro.js
@ ./src/styles/index.js
@ ./src/styles/Button/Button.stories.jsx
@ ./src sync .stories.jsx$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true


ERROR in ./node_modules/resolve/lib/sync.js
Module not found: Error: Can’t resolve ‘fs’ in ‘/home/denvash/dev/github/gissy/dashboard/node_modules/resolve/lib’
@ ./node_modules/resolve/lib/sync.js 2:9-22
@ ./node_modules/resolve/index.js
@ ./node_modules/babel-plugin-macros/dist/index.js
@ ./node_modules/tailwind.macro/macro.js
@ ./src/styles/index.js
@ ./src/styles/Button/Button.stories.jsx
@ ./src sync .stories.jsx$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true


ERROR in ./node_modules/resolve/lib/async.js
Module not found: Error: Can’t resolve ‘fs’ in ‘/home/denvash/dev/github/gissy/dashboard/node_modules/resolve/lib’
@ ./node_modules/resolve/lib/async.js 2:9-22
@ ./node_modules/resolve/index.js
@ ./node_modules/babel-plugin-macros/dist/index.js
@ ./node_modules/tailwind.macro/macro.js
@ ./src/styles/index.js
@ ./src/styles/Button/Button.stories.jsx
@ ./src sync .stories.jsx$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true


ERROR in ./node_modules/tailwind.macro/macro.js
Module not found: Error: Can’t resolve ‘fs’ in ‘/home/denvash/dev/github/gissy/dashboard/node_modules/tailwind.macro’
@ ./node_modules/tailwind.macro/macro.js 5:9-22
@ ./src/styles/index.js
@ ./src/styles/Button/Button.stories.jsx
@ ./src sync .stories.jsx$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true


ERROR in ./node_modules/cosmiconfig/node_modules/resolve-from/index.js
Module not found: Error: Can’t resolve ‘module’ in ‘/home/denvash/dev/github/gissy/dashboard/node_modules/cosmiconfig/node_modules/resolve-from’
@ ./node_modules/cosmiconfig/node_modules/resolve-from/index.js 3:15-32
@ ./node_modules/cosmiconfig/node_modules/import-fresh/index.js
@ ./node_modules/cosmiconfig/dist/loaders.js
@ ./node_modules/cosmiconfig/dist/index.js
@ ./node_modules/babel-plugin-macros/dist/index.js
@ ./node_modules/tailwind.macro/macro.js
@ ./src/styles/index.js
@ ./src/styles/Button/Button.stories.jsx
@ ./src sync .stories.jsx$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true
Child HtmlWebpackCompiler:
Asset      Size               Chunks  Chunk Names
__child-HtmlWebpackPlugin_0  6.48 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.13 KiB {HtmlWebpackPlugin_0} [built]


WARN Broken build, fix the error above.
WARN You may need to refresh the browser.


webpack building…
webpack built 3cebf54cf6bc90ffda28 in 3402ms
✖ ｢wdm｣: Hash: 3cebf54cf6bc90ffda28
Version: webpack 4.41.2
Time: 3402ms
Built at: 11/05/2019 6:23:10 PM
Asset       Size        Chunks                                      Chunk Names
1d62b502b95a3426586c.hot-update.json   35 bytes                [emitted] [immutable] [hmr]

asset-manifest.json  640 bytes                [emitted]

iframe.html   3.05 KiB                [emitted]

main.3cebf54cf6bc90ffda28.bundle.js   35.2 KiB          main  [emitted] [immutable]               main
main.3cebf54cf6bc90ffda28.bundle.js.map   9.85 KiB          main  [emitted] [dev]                     main
runtime~main.3cebf54cf6bc90ffda28.bundle.js   31.2 KiB  runtime~main  [emitted] [immutable]               runtime~main
runtime~main.3cebf54cf6bc90ffda28.bundle.js.map   32.3 KiB  runtime~main  [emitted] [dev]                     runtime~main
vendors~main.3cebf54cf6bc90ffda28.bundle.js   5.66 MiB  vendors~main  [emitted] [immutable]        [big]  vendors~main
vendors~main.3cebf54cf6bc90ffda28.bundle.js.map   6.03 MiB  vendors~main  [emitted] [dev]                     vendors~main
Entrypoint main [big] = runtime~main.3cebf54cf6bc90ffda28.bundle.js runtime~main.3cebf54cf6bc90ffda28.bundle.js.map vendors~main.3cebf54cf6bc90ffda28.bundle.js vendors~main.3cebf54cf6bc90ffda28.bundle.js.map main.3cebf54cf6bc90ffda28.bundle.js main.3cebf54cf6bc90ffda28.bundle.js.map
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true 64 bytes {main}
[./.storybook/config.js] 963 bytes {main}
[./node_modules/@apollo/react-hooks/lib/react-hooks.esm.js] 30 KiB {vendors~main}
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main}
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main}
[./node_modules/@storybook/core/node_modules/regenerator-runtime/runtime.js] 23 KiB {vendors~main}
[./node_modules/@storybook/core/node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendors~main}
[./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~main}
[./node_modules/@storybook/react/dist/client/index.js] 1.39 KiB {vendors~main}
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main}
[./node_modules/apollo-boost/lib/bundle.esm.js] 5.22 KiB {vendors~main}
[./node_modules/core-js/features/symbol/index.js] 305 bytes {vendors~main}
[./node_modules/global/window.js] 232 bytes {vendors~main}
[./node_modules/querystring-es3/index.js] 127 bytes {vendors~main}
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true] 7.68 KiB {vendors~main}
+ 909 hidden modules


WARNING in ./node_modules/babel-plugin-macros/dist/index.js 73:24-31
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
@ ./node_modules/tailwind.macro/macro.js
@ ./src/styles/index.js
@ ./src/styles/Button/Button.stories.jsx
@ ./src sync .stories.jsx$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true


WARNING in ./node_modules/tailwind.macro/macro.js 1151:49-68
Critical dependency: the request of a dependency is an expression
@ ./src/styles/index.js
@ ./src/styles/Button/Button.stories.jsx
@ ./src sync .stories.jsx$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true


WARNING in ./node_modules/cosmiconfig/node_modules/import-fresh/index.js 28:8-25
Critical dependency: the request of a dependency is an expression
@ ./node_modules/cosmiconfig/dist/loaders.js
@ ./node_modules/cosmiconfig/dist/index.js
@ ./node_modules/babel-plugin-macros/dist/index.js
@ ./node_modules/tailwind.macro/macro.js
@ ./src/styles/index.js
@ ./src/styles/Button/Button.stories.jsx
@ ./src sync .stories.jsx$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true


ERROR in ./node_modules/cosmiconfig/dist/readFile.js
Module not found: Error: Can’t resolve ‘fs’ in ‘/home/denvash/dev/github/gissy/dashboard/node_modules/cosmiconfig/dist’
@ ./node_modules/cosmiconfig/dist/readFile.js 4:11-24
@ ./node_modules/cosmiconfig/dist/createExplorer.js
@ ./node_modules/cosmiconfig/dist/index.js
@ ./node_modules/babel-plugin-macros/dist/index.js
@ ./node_modules/tailwind.macro/macro.js
@ ./src/styles/index.js
@ ./src/styles/Button/Button.stories.jsx
@ ./src sync .stories.jsx$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true


ERROR in ./node_modules/is-directory/index.js
Module not found: Error: Can’t resolve ‘fs’ in ‘/home/denvash/dev/github/gissy/dashboard/node_modules/is-directory’
@ ./node_modules/is-directory/index.js 10:9-22
@ ./node_modules/cosmiconfig/dist/getDirectory.js
@ ./node_modules/cosmiconfig/dist/createExplorer.js
@ ./node_modules/cosmiconfig/dist/index.js
@ ./node_modules/babel-plugin-macros/dist/index.js
@ ./node_modules/tailwind.macro/macro.js
@ ./src/styles/index.js
@ ./src/styles/Button/Button.stories.jsx
@ ./src sync .stories.jsx$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true


ERROR in ./node_modules/resolve/lib/async.js
Module not found: Error: Can’t resolve ‘fs’ in ‘/home/denvash/dev/github/gissy/dashboard/node_modules/resolve/lib’
@ ./node_modules/resolve/lib/async.js 2:9-22
@ ./node_modules/resolve/index.js
@ ./node_modules/babel-plugin-macros/dist/index.js
@ ./node_modules/tailwind.macro/macro.js
@ ./src/styles/index.js
@ ./src/styles/Button/Button.stories.jsx
@ ./src sync .stories.jsx$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true


ERROR in ./node_modules/resolve/lib/sync.js
Module not found: Error: Can’t resolve ‘fs’ in ‘/home/denvash/dev/github/gissy/dashboard/node_modules/resolve/lib’
@ ./node_modules/resolve/lib/sync.js 2:9-22
@ ./node_modules/resolve/index.js
@ ./node_modules/babel-plugin-macros/dist/index.js
@ ./node_modules/tailwind.macro/macro.js
@ ./src/styles/index.js
@ ./src/styles/Button/Button.stories.jsx
@ ./src sync .stories.jsx$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true


ERROR in ./node_modules/tailwind.macro/macro.js
Module not found: Error: Can’t resolve ‘fs’ in ‘/home/denvash/dev/github/gissy/dashboard/node_modules/tailwind.macro’
@ ./node_modules/tailwind.macro/macro.js 5:9-22
@ ./src/styles/index.js
@ ./src/styles/Button/Button.stories.jsx
@ ./src sync .stories.jsx$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true


ERROR in ./node_modules/cosmiconfig/node_modules/resolve-from/index.js
Module not found: Error: Can’t resolve ‘module’ in ‘/home/denvash/dev/github/gissy/dashboard/node_modules/cosmiconfig/node_modules/resolve-from’
@ ./node_modules/cosmiconfig/node_modules/resolve-from/index.js 3:15-32
@ ./node_modules/cosmiconfig/node_modules/import-fresh/index.js
@ ./node_modules/cosmiconfig/dist/loaders.js
@ ./node_modules/cosmiconfig/dist/index.js
@ ./node_modules/babel-plugin-macros/dist/index.js
@ ./node_modules/tailwind.macro/macro.js
@ ./src/styles/index.js
@ ./src/styles/Button/Button.stories.jsx
@ ./src sync .stories.jsx$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true

System:

Environment Info:

  System:
    OS: Linux 5.3 Ubuntu 19.10 (Eoan Ermine)
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
  Binaries:
    Node: 12.1.0 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/bin/yarn
    npm: 6.10.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 78.0.3904.87
    Firefox: 70.0
  npmPackages:
    @storybook/addon-actions: ^5.2.5 => 5.2.5 
    @storybook/addon-links: ^5.2.5 => 5.2.5 
    @storybook/addons: ^5.2.5 => 5.2.5 
    @storybook/react: ^5.2.5 => 5.2.5

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:7

github_iconTop GitHub Comments

1reaction
rbuteracommented, Jan 7, 2020

@fknop

I’ve now made a gatsby starter with typescript, tailwindcss, babel-plugin-macros and, ofc, tailwind.macro

If you want to see the reasoning behind it you can look at the blog post:

https://medium.com/@rbutera/jamstack-tutorial-part-1-gatsbyjs-with-storybook-tailwindcss-and-typescript-setup-bd28855db897

Alternatively, you can just use the starter:

https://github.com/rbutera/greater-gatsby

1reaction
fknopcommented, Dec 16, 2019

Any news on this issue?

I have the same issue with Storybook 5 / React / Typescript and tailwind.macro@next:

The macro you imported from “undefined” is being executed outside the context of compilation with babel-plugin-macros. This indicates that you don’t have the babel plugin “babel-plugin-macros” configured correctly. Please see the documentation for how to configure babel-plugin-macros properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md

My ./storybook/.babelrc:

{
  "presets": [
    "@babel/typescript",
    "react"
  ],
  "plugins": [
    "macros",
    "@babel/plugin-syntax-object-rest-spread"
  ]
}

My .storybook/webpack.config.js:

module.exports = ({config}) => {
    return {
      ...config,
      node: {
        ...config.node,
        fs: 'empty',
        module: 'empty'
      }
    }
}

If I don’t have empty, I have the “can’t resolve” error.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Storybook for Webpack 5 - JS.ORG
Once you've upgraded, your components, styles, and stories will be bundled with webpack5 and webpack5-compatible loaders/plugins.
Read more >
Locofy v5.7 - Storybook Integration - YouTube
Drag and drop your imported Storybook components from Locofy plugin and use them in your design. ✓ View live preview (running on code)...
Read more >
Storybook - Happo docs
The `happo-plugin-storybook` library is a. ... Add this to .storybook/preview.js (or .storybook/config.js if you're using Storybook < v5):
Read more >
Webpack 5 and Storybook 6 integration throws an error in ...
Basically the error is coming from the marked line in /node_modules/webpack/lib/DefinePlugin.js once running for the first time npm run ...
Read more >
Writing Stories - Storybook
For example, the stories for an app may all be inside the src/components directory with the .stories.js extension. It is easier to load...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

The engine "node" is incompatible with this module

Next page

"fs" dependency was not found?