babel-plugin-tailwind-components
babel-plugin-tailwind-components copied to clipboard
Using plugin in storybook v5
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
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',
},
};
@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.
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.
Thanks for the information.
I managed to fix that error by installing npm install —save tailwind.macro@next
which supports tailwindcss 1.0
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.
@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?)
@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