Comments (11)
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.
I found that running npx storybook@next automigrate
properly updated everything in storybook to work.
from tsdx.
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.
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.
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
from tsdx.
I'm having the same error.
I tried the solutions above but it did not work for me.
Has anyone found solution?
from tsdx.
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.
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"
}
from tsdx.
I also got the above error, anyone know a fix?
from tsdx.
Try deleting node_modules and lock files and reinstall. That solved for me.
from tsdx.
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)
- Module parse failed: Unexpected token HOT 1
- tailwindcss not applied after building package with tsdx HOT 1
- Unable to override tsconfig.compilerOptions.moduleResolution HOT 1
- Cannot install dependencies HOT 6
- Build fails with TS2339 but property exists on interface HOT 2
- not able to run storybook after typescript 5 HOT 1
- Not able to run test when creating new library due to typescript v5
- Example fails to run after creating a fresh lib HOT 1
- Test suite failed to run TypeError: The "path" argument must be of type string. Received undefined HOT 1
- Failure to run test HOT 7
- Upgrade to parcel v2, react 18 for example folder HOT 1
- Images not displaying in published package when using SVG or other image formats i.e jpg , png .
- Unabel to use .css files alongside .ts(x) files
- Getting error TS2305: Module has no exported member, but the member is exported
- tsdx build error : need help
- 9
- ESLint failing on fresh package
- outdated storybook configuration with TSDX create
- Failed to resolve 'react-dom/client' from './index.tsx' HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tsdx.