Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Storybook not working on latest TSDX installation #1179

Open
walifile opened this issue May 6, 2023 · 11 comments
Open

Storybook not working on latest TSDX installation #1179

walifile opened this issue May 6, 2023 · 11 comments

Comments

@walifile
Copy link

walifile commented May 6, 2023

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
Copy link

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
Copy link

babar2023 commented May 11, 2023

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
Copy link

jrea commented May 11, 2023

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
Copy link

In my case this command does not install storybook

npx tsdx create component-library
스크린샷 2023-06-14 오전 11 24 47
  "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
Copy link

BigRaj commented Jun 26, 2023

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

@kyotodevIndie
Copy link

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
Copy link

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
Copy link

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

@SySagar
Copy link

SySagar commented Nov 8, 2023

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

@walifile
Copy link
Author

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

11 participants