Using plugin in storybook v5 #47

denvash · 2019-11-05T16:53:35Z

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 runtimemain.3cebf54cf6bc90ffda28.bundle.js 31.2 KiB runtimemain [emitted] [immutable] runtimemain runtimemain.3cebf54cf6bc90ffda28.bundle.js.map 32.3 KiB runtimemain [emitted] [dev] runtimemain vendorsmain.3cebf54cf6bc90ffda28.bundle.js 5.66 MiB vendorsmain [emitted] [immutable] [big] vendorsmain vendorsmain.3cebf54cf6bc90ffda28.bundle.js.map 6.03 MiB vendorsmain [emitted] [dev] vendorsmain Entrypoint main [big] = runtimemain.3cebf54cf6bc90ffda28.bundle.js runtimemain.3cebf54cf6bc90ffda28.bundle.js.map vendorsmain.3cebf54cf6bc90ffda28.bundle.js vendorsmain.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 {vendorsmain} [./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendorsmain} [./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendorsmain} [./node_modules/@storybook/core/node_modules/regenerator-runtime/runtime.js] 23 KiB {vendorsmain} [./node_modules/@storybook/core/node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendorsmain} [./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendorsmain} [./node_modules/@storybook/react/dist/client/index.js] 1.39 KiB {vendorsmain} [./node_modules/airbnb-js-shims/index.js] 40 bytes {vendorsmain} [./node_modules/apollo-boost/lib/bundle.esm.js] 5.22 KiB {vendorsmain} [./node_modules/core-js/features/symbol/index.js] 305 bytes {vendorsmain} [./node_modules/global/window.js] 232 bytes {vendorsmain} [./node_modules/querystring-es3/index.js] 127 bytes {vendorsmain} [./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

The text was updated successfully, but these errors were encountered:

denvash · 2019-11-05T17:03:52Z

Added { fs: 'empty' } under node config in webpack and it reduced the error to:

yarn storybook                                                         12.1.0    1.34   9.04G   18:57  
yarn run v1.15.2
$ start-storybook -p 6006
info @storybook/react v5.2.5
info 
info => Loading presets
info => Loading presets
info => Loading custom babel config
info => Loading custom babel config
info => Loading custom addons config.
info => Loading custom webpack config (extending mode).
info => Loading create-react-app config.
10% building 1/1 modules 0 active(node:19801) DeprecationWarning: Extend-mode configuration is deprecated, please use full-control mode instead.

See https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode
webpack built cdcf5f52a795ec11048f in 7268ms
✖ ｢wdm｣: Hash: cdcf5f52a795ec11048f
Version: webpack 4.41.2
Time: 7268ms
Built at: 11/05/2019 6:57:24 PM
                                          Asset       Size        Chunks                                Chunk Names
                            asset-manifest.json  640 bytes                [emitted]                     
                                    iframe.html   3.05 KiB                [emitted]                     
            main.cdcf5f52a795ec11048f.bundle.js   35.2 KiB          main  [emitted] [immutable]         main
        main.cdcf5f52a795ec11048f.bundle.js.map    9.6 KiB          main  [emitted] [dev]               main
    runtime~main.cdcf5f52a795ec11048f.bundle.js   31.2 KiB  runtime~main  [emitted] [immutable]         runtime~main
runtime~main.cdcf5f52a795ec11048f.bundle.js.map   32.3 KiB  runtime~main  [emitted] [dev]               runtime~main
    vendors~main.cdcf5f52a795ec11048f.bundle.js   5.66 MiB  vendors~main  [emitted] [immutable]  [big]  vendors~main
vendors~main.cdcf5f52a795ec11048f.bundle.js.map   6.02 MiB  vendors~main  [emitted] [dev]               vendors~main
Entrypoint main [big] = runtime~main.cdcf5f52a795ec11048f.bundle.js runtime~main.cdcf5f52a795ec11048f.bundle.js.map vendors~main.cdcf5f52a795ec11048f.bundle.js vendors~main.cdcf5f52a795ec11048f.bundle.js.map main.cdcf5f52a795ec11048f.bundle.js main.cdcf5f52a795ec11048f.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} [built]
[./.storybook/config.js] 963 bytes {main} [built]
[./node_modules/@apollo/react-hooks/lib/react-hooks.esm.js] 30 KiB {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/regenerator-runtime/runtime.js] 23 KiB {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~main} [built]
[./node_modules/@storybook/react/dist/client/index.js] 1.39 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/apollo-boost/lib/bundle.esm.js] 5.22 KiB {vendors~main} [built]
[./node_modules/core-js/features/symbol/index.js] 305 bytes {vendors~main} [built]
[./node_modules/global/window.js] 232 bytes {vendors~main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true] 7.68 KiB {vendors~main} [built]
    + 910 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/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 beddb59ececd09dda20f in 3223ms
✖ ｢wdm｣: Hash: beddb59ececd09dda20f
Version: webpack 4.41.2
Time: 3223ms
Built at: 11/05/2019 6:57:28 PM
                                          Asset       Size        Chunks                                      Chunk Names
                            asset-manifest.json  640 bytes                [emitted]                           
           cdcf5f52a795ec11048f.hot-update.json   35 bytes                [emitted] [immutable] [hmr]         
                                    iframe.html   3.05 KiB                [emitted]                           
            main.beddb59ececd09dda20f.bundle.js   35.2 KiB          main  [emitted] [immutable]               main
        main.beddb59ececd09dda20f.bundle.js.map   9.85 KiB          main  [emitted] [dev]                     main
    runtime~main.beddb59ececd09dda20f.bundle.js   31.2 KiB  runtime~main  [emitted] [immutable]               runtime~main
runtime~main.beddb59ececd09dda20f.bundle.js.map   32.3 KiB  runtime~main  [emitted] [dev]                     runtime~main
    vendors~main.beddb59ececd09dda20f.bundle.js   5.66 MiB  vendors~main  [emitted] [immutable]        [big]  vendors~main
vendors~main.beddb59ececd09dda20f.bundle.js.map   6.03 MiB  vendors~main  [emitted] [dev]                     vendors~main
Entrypoint main [big] = runtime~main.beddb59ececd09dda20f.bundle.js runtime~main.beddb59ececd09dda20f.bundle.js.map vendors~main.beddb59ececd09dda20f.bundle.js vendors~main.beddb59ececd09dda20f.bundle.js.map main.beddb59ececd09dda20f.bundle.js main.beddb59ececd09dda20f.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}
    + 910 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/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

const path = require('path');

module.exports = {
  ...
  node: {
    fs: 'empty',
  },
};

rbutera · 2019-12-03T16:35:31Z

@denvash were you able to resolve your issue?

I am having a separate issue when it comes to using this plugin with Storybook V5.

If I try to use the following example macro:

export const Wind = styled.div`
  ${tw`font-mono text-sm text-red hover:text-blue`};
`;

I get this error

TypeError: /Users/rai/dev/thatslit/src/components/subtitle/subtitle.css.js: tailwind.macro: Cannot read property 'mono' of undefined Learn more: https://www.npmjs.com/package/tailwind.macro
when trying to run storybook.

denvash · 2019-12-03T16:41:19Z

I created a starter for gatsby: gatsby-tailwind-styled-components-storybook-starter, you can check the code of webconfig.js and try to configure it for CRA.

TL;DR, you should try adding Post-CSS.

rbutera · 2019-12-03T16:43:47Z

Thanks for the information.

I managed to fix that error by installing npm install —save tailwind.macro@next which supports tailwindcss 1.0

fknop · 2019-12-16T19:04:15Z

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.

rbutera · 2019-12-17T15:35:45Z

@fknop

I'm working on a project right now using storybook 5, react and typescript and the tailwind macro, you can check out the storybook configuration here

https://github.com/rbutera/thatslit/tree/develop/.storybook

let me know if you find this useful and it helps you fix your problem (what are you missing?)

rbutera · 2020-01-07T16:46:44Z

@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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using plugin in storybook v5 #47

Using plugin in storybook v5 #47

denvash commented Nov 5, 2019 •

edited

Loading

denvash commented Nov 5, 2019

rbutera commented Dec 3, 2019

denvash commented Dec 3, 2019 •

edited

Loading

rbutera commented Dec 3, 2019 •

edited

Loading

fknop commented Dec 16, 2019 •

edited

Loading

rbutera commented Dec 17, 2019

rbutera commented Jan 7, 2020

Using plugin in storybook v5 #47

Using plugin in storybook v5 #47

Comments

denvash commented Nov 5, 2019 • edited Loading

denvash commented Nov 5, 2019

rbutera commented Dec 3, 2019

denvash commented Dec 3, 2019 • edited Loading

rbutera commented Dec 3, 2019 • edited Loading

fknop commented Dec 16, 2019 • edited Loading

rbutera commented Dec 17, 2019

rbutera commented Jan 7, 2020

denvash commented Nov 5, 2019 •

edited

Loading

denvash commented Dec 3, 2019 •

edited

Loading

rbutera commented Dec 3, 2019 •

edited

Loading

fknop commented Dec 16, 2019 •

edited

Loading