Code Monkey home page Code Monkey logo

Comments (11)

babar2023 avatar babar2023 commented on June 1, 2024 4

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

from tsdx.

BigRaj avatar BigRaj commented on June 1, 2024 4

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

from tsdx.

maheenurapsis13 avatar maheenurapsis13 commented on June 1, 2024 2

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. 

from tsdx.

palatinus-sb avatar palatinus-sb commented on June 1, 2024 1

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

from tsdx.

kyotodevIndie avatar kyotodevIndie commented on June 1, 2024 1

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

from tsdx.

mateusborba avatar mateusborba commented on June 1, 2024 1

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

from tsdx.

jrea avatar jrea commented on June 1, 2024

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

from tsdx.

youngme92 avatar youngme92 commented on June 1, 2024

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

from tsdx.

JamesSatherley avatar JamesSatherley commented on June 1, 2024

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

from tsdx.

SySagar avatar SySagar commented on June 1, 2024

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

from tsdx.

walifile avatar walifile commented on June 1, 2024

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?

from tsdx.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.