Storybook not working on latest TSDX installation

walifile commented 1 year ago

Current Behavior

I have recently installed the latest version of TSDX and encountered an issue with Storybook integration. It appears that there might be a problem with either the TypeScript configuration or a lack of updates to accommodate the latest version.

When attempting to set up Storybook with TSDX, I followed the usual steps, but encountered unexpected errors and inconsistencies. I have verified that I am using the latest versions of both TSDX and Storybook.

Expected behavior

Storybook should run successfully, allowing me to view and interact with my components.

Additional context

Please let me know if you need any additional information or steps to reproduce the problem. Thank you for your attention to this matter.

palatinus-sb commented 1 year ago

Not sure if it's the same issue as you are having but I had the following error when trying to run the storybook script: 'start-storybook' is not recognized as an internal or external command

Turns out they have made some breaking changes in Storybook v7 and TSDX seems to automatically install v7 when you create a new project with it. My solution was simply downgrading the storybook to the one I had on another project.

"@storybook/addon-essentials": "^6.5.16",
"@storybook/addon-info": "^5.3.21",
"@storybook/addon-links": "^6.5.16",
"@storybook/addons": "^6.5.16",
"@storybook/react": "^6.5.16",

babar2023 commented 1 year ago

In addition to the @palatinus-sb answer, I managed to use Storybook 7

"scripts": {
    "storybook": "storybook dev",
    "build-storybook": "storybook build",
}

"devDependencies": {
    "@storybook/addon-essentials": "^7.0.7",
    "@storybook/addon-links": "^7.0.7",
    "@storybook/addon-mdx-gfm": "^7.0.7",
    "@storybook/addons": "^7.0.7",
    "@storybook/react": "^7.0.7",
    "@storybook/react-webpack5": "^7.0.7",
     "storybook": "^7.0.7",
     "tsdx": "^0.14.1",
     "tslib": "^2.5.0",
     "typescript": "^5.0.4"
}

jrea commented 1 year ago

After fighting this for about a day, I was able to get things to work by changing tsdx.config.js

const babel = require('@rollup/plugin-babel');
const terser = require('rollup-plugin-terser');

module.exports = {
  rollup(config) {
    const basePlugins = config.plugins
      .filter(Boolean)
      .filter((config) => config.name !== 'babel')
      .filter((config) => config.name !== 'terser');
    config.plugins = [...basePlugins, babel(), terser.terser()];
    return config;
  },
};

youngme92 commented 1 year ago

In my case this command does not install storybook

npx tsdx create component-library

  "devDependencies": {
    "@babel/core": "^7.22.5",
    "@size-limit/preset-small-lib": "^8.2.4",
    "@storybook/addon-essentials": "^7.0.20",
    "@storybook/addon-info": "^5.3.21",
    "@storybook/addon-links": "^7.0.20",
    "@storybook/addons": "^7.0.20",
    "@storybook/react": "^7.0.20",
    "@types/react": "^18.2.12",
    "@types/react-dom": "^18.2.5",
    "babel-loader": "^9.1.2",
    "husky": "^8.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-is": "^18.2.0",
    "size-limit": "^8.2.4",
    "tsdx": "^0.14.1",
    "tslib": "^2.5.3",
    "typescript": "^5.1.3"
  }

BigRaj commented 1 year ago

I found that running npx storybook@next automigrate properly updated everything in storybook to work.

kyotodevIndie commented 11 months ago

I solved this problem in 3 steps:

I installed the storybook
I changed the storybook line in package.json to "storybook": "storybook dev -p 6006",
ran npx storybook@next automigrate

maheenurapsis13 commented 11 months ago

I found this error when i try to run the storybook.

$ yarn storybook
yarn run v1.22.19
warning ..\..\..\package.json: No license field
$ storybook dev -p 6006
C:\Users\jahidun.nur\Desktop\APSIS-PACKAGES\apsis@engine\node_modules\cli-table3\src\utils.js:1
const stringWidth = require('string-width');
                    ^

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\jahidun.nur\Desktop\APSIS-PACKAGES\apsis@engine\node_modules\string-width\index.js from C:\Users\jahidun.nur\Desktop\APSIS-PACKAGES\apsis@engine\node_modules\cli-table3\src\utils.js not supported.
Instead change the require of index.js in C:\Users\jahidun.nur\Desktop\APSIS-PACKAGES\apsis@engine\node_modules\cli-table3\src\utils.js to a dynamic import() which is available in 
all CommonJS modules.
    at Object.<anonymous> (C:\Users\jahidun.nur\Desktop\APSIS-PACKAGES\apsis@engine\node_modules\cli-table3\src\utils.js:1:21)
    at Object.<anonymous> (C:\Users\jahidun.nur\Desktop\APSIS-PACKAGES\apsis@engine\node_modules\cli-table3\src\table.js:2:15)
    at Object.<anonymous> (C:\Users\jahidun.nur\Desktop\APSIS-PACKAGES\apsis@engine\node_modules\cli-table3\index.js:1:18)
    at Object.<anonymous> (C:\Users\jahidun.nur\Desktop\APSIS-PACKAGES\apsis@engine\node_modules\@storybook\core-server\dist\index.js:113:8215)
    at Object.<anonymous> (C:\Users\jahidun.nur\Desktop\APSIS-PACKAGES\apsis@engine\node_modules\@storybook\cli\dist\generate.js:11:4494)
    at Object.<anonymous> (C:\Users\jahidun.nur\Desktop\APSIS-PACKAGES\apsis@engine\node_modules\@storybook\cli\bin\index.js:9:1)
    at Object.<anonymous> (C:\Users\jahidun.nur\Desktop\APSIS-PACKAGES\apsis@engine\node_modules\storybook\index.js:3:1) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v18.16.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.