search

letshare / storybook-addon-customize-antd-theme

a Storybook addon help you visually customize an ant design theme
MIT License
31 stars 2 forks source link

BUG: crashing when running the addon #4

Open hazem-alabiad opened 1 year ago

hazem-alabiad commented 1 year ago

I am using Vite as the development tool for my project. I installed the addon and configured it as shown in the docs however, when running yarn storybook I got this error:

ERROR in ./node_modules/storybook-addon-customize-antd-theme/dist/esm/components/ArgRow.js
Module not found: Error: Can't resolve 'markdown-to-jsx' in '/Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/storybook-addon-customize-antd-theme/dist/esm/components'
 @ ./node_modules/storybook-addon-customize-antd-theme/dist/esm/components/ArgRow.js 8:0-39 93:206-214
 @ ./node_modules/storybook-addon-customize-antd-theme/dist/esm/components/ArgsTable.js
 @ ./node_modules/storybook-addon-customize-antd-theme/dist/esm/components/Panel.js
 @ ./node_modules/storybook-addon-customize-antd-theme/dist/esm/preset/manager.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/manager/index.js ./node_modules/@storybook/addon-links/manager.js ./node_modules/@storybook/addon-docs/manager.js ./node_modules/@storybook/addon-controls/manager.js ./node_modules/@storybook/addon-actions/manager.js ./node_modules/@storybook/addon-backgrounds/manager.js ./node_modules/@storybook/addon-viewport/manager.js ./node_modules/@storybook/addon-toolbars/manager.js ./node_modules/@storybook/addon-measure/manager.js ./node_modules/@storybook/addon-outline/manager.js ./node_modules/@storybook/addon-interactions/manager.js ./node_modules/storybook-addon-customize-antd-theme/dist/esm/preset/manager.js

ERROR in ./node_modules/storybook-addon-customize-antd-theme/dist/esm/components/TextControl.js
Module not found: Error: Can't resolve 'react-textarea-autosize' in '/Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/storybook-addon-customize-antd-theme/dist/esm/components'
 @ ./node_modules/storybook-addon-customize-antd-theme/dist/esm/components/TextControl.js 20:0-57 165:42-60
 @ ./node_modules/storybook-addon-customize-antd-theme/dist/esm/components/ArgControl.js
 @ ./node_modules/storybook-addon-customize-antd-theme/dist/esm/components/ArgRow.js
 @ ./node_modules/storybook-addon-customize-antd-theme/dist/esm/components/ArgsTable.js
 @ ./node_modules/storybook-addon-customize-antd-theme/dist/esm/components/Panel.js
 @ ./node_modules/storybook-addon-customize-antd-theme/dist/esm/preset/manager.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/manager/index.js ./node_modules/@storybook/addon-links/manager.js ./node_modules/@storybook/addon-docs/manager.js ./node_modules/@storybook/addon-controls/manager.js ./node_modules/@storybook/addon-actions/manager.js ./node_modules/@storybook/addon-backgrounds/manager.js ./node_modules/@storybook/addon-viewport/manager.js ./node_modules/@storybook/addon-toolbars/manager.js ./node_modules/@storybook/addon-measure/manager.js ./node_modules/@storybook/addon-outline/manager.js ./node_modules/@storybook/addon-interactions/manager.js ./node_modules/storybook-addon-customize-antd-theme/dist/esm/preset/manager.js
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.32 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/templates/index.ejs] 2.04 KiB {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Failed to compile.
╭───────────────────────────────────────────────────╮
│                                                   │
│   Storybook 6.5.16 for React started              │
│   7.01 s for manager and 2.76 s for preview       │
│                                                   │
│    Local:            http://localhost:6006/       │
│    On your network:  http://192.168.1.68:6006/    │
│                                                   │
╰───────────────────────────────────────────────────╯
✘ [ERROR] Could not resolve "!!file-loader?modules!../assets/js/less.min.js"

    node_modules/storybook-addon-customize-antd-theme/dist/esm/components/LessModify.js:17:23:
      17 │ import lessScript from '!!file-loader?modules!../assets/js/less.min.js';
         ╵                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "!!file-loader?modules!../assets/js/less.min.js" as external to exclude it
  from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "!!file-loader?modules!../assets/less/antd.less"

    node_modules/storybook-addon-customize-antd-theme/dist/esm/components/LessModify.js:18:21:
      18 │ import antdLess from '!!file-loader?modules!../assets/less/antd.less';
         ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "!!file-loader?modules!../assets/less/antd.less" as external to exclude it
  from the bundle, which will remove this error.

4:16:48 PM [vite] error while updating dependencies:
Error: Build failed with 2 errors:
node_modules/storybook-addon-customize-antd-theme/dist/esm/components/LessModify.js:17:23: ERROR: Could not resolve "!!file-loader?modules!../assets/js/less.min.js"
node_modules/storybook-addon-customize-antd-theme/dist/esm/components/LessModify.js:18:21: ERROR: Could not resolve "!!file-loader?modules!../assets/less/antd.less"
    at failureErrorWithLog (/Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/esbuild/lib/main.js:1636:15)
    at /Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/esbuild/lib/main.js:1048:25
    at runOnEndCallbacks (/Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/esbuild/lib/main.js:1471:45)
    at buildResponseToResult (/Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/esbuild/lib/main.js:1046:7)
    at /Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/esbuild/lib/main.js:1058:9
    at new Promise (<anonymous>)
    at requestCallbacks.on-end (/Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/esbuild/lib/main.js:1057:54)
    at handleRequest (/Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/esbuild/lib/main.js:723:19)
    at handleIncomingPacket (/Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/esbuild/lib/main.js:745:7)
    at Socket.readFromStdout (/Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/esbuild/lib/main.js:673:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at Socket.Readable.push (node:internal/streams/readable:228:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
JasonSimms commented 2 months ago

Addon is broken per readme instructions in nextjs. same bug it crashes all the imports.
"antd": "^5.20.5", "next": "14.2.7", "@ant-design/nextjs-registry": "^1.0.1",

[Fix] Addon not necessary, theme customizer can be added directly in the story. 

export const Buttons: Story = {decorators: [(Story) => {
return <AntdRegistry><ConfigProvider 
theme={darkTheme}><Story /></ConfigProvider></AntdRegistry>}]};