Storybook not working on latest TSDX installation

[walifile]

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]

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]

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]

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]

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]

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

[kyotodevIndie]

I solved this problem in 3 steps:

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

[maheenurapsis13]

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. 

[JamesSatherley]

I also got the above error, anyone know a fix?

[SySagar]

Try deleting node_modules and lock files and reinstall. That solved for me.

[walifile]

You can try this repo https://github.com/walifile/tsdx-tailwind-typescript-component-library

I'm having the same error. I tried the solutions above but it did not work for me. Has anyone found solution?