tsdx Storybook not working on latest TSDX installation

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.

May 06 '23 21:05 walifile

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",

May 10 '23 11:05 palatinus-sb

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"
}

May 11 '23 16:05 babar2023

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;
  },
};

May 11 '23 16:05 jrea

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"
  }

Jun 14 '23 02:06 youngme92

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

Jun 26 '23 17:06 BigRaj

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

Jul 11 '23 18:07 kyotodevIndie

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.