Comments (8)
This is actually mentioned here: https://storybook.js.org/docs/configurations/typescript-config/
It lists the requirement for adding babel-preset-react-app
and webpackFinal prop inside main.js, but it is easily overlooked.
from presets.
Hi @josias-r, this is quite strange - as if you have react-scripts installed, you must also have that preset installed. Can you provide a reproduction repo?
@vlaja that is actually a little confusing, the example you're referring to is for setting up TypeScript with CRA if you're not using this preset.
from presets.
@mrmckeb You might be true on that one.
On the project where I tested, a have a bit of a hybrid config, with unejected react-scripts, but actually a non-standard library structure inside the src folder, as I'm using storybook directly for dev env, instead of CRA start.
I'm willing to try to set up a fresh CRA app with this preset included and see if it is working for me, or I still need to do some changes, and for what reason.
from presets.
That would be great, please give any feedback you have - we want to make presets great, and the CRA preset is by far the most popular.
from presets.
Tested the preset with the latest CRA with the base template and the typescript one.
JS CRA
npx create-react-app storybook-preset-test
This bootstraps the latest CRA app with the following package versions:
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"
npx -p @storybook/cli sb init
The following devDependencies are installed:
"devDependencies": {
"@storybook/addon-actions": "^5.3.9",
"@storybook/addon-links": "^5.3.9",
"@storybook/addons": "^5.3.9",
"@storybook/preset-create-react-app": "^1.5.2",
"@storybook/react": "^5.3.9"
}
- added a test component as
src/components/TestComponent.js(x)
and imported to story - yarn storybook
Observed behaviour: Works as intended with both .js
and .jsx
extensions.
TS CRA
npx create-react-app storybook-preset-test --template typescript
This bootstraps the latest CRA app with the following package versions:
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0",
"typescript": "~3.7.2"
npx -p @storybook/cli sb init
The following devDependencies are installed:
"devDependencies": {
"@storybook/addon-actions": "^5.3.9",
"@storybook/addon-links": "^5.3.9",
"@storybook/addons": "^5.3.9",
"@storybook/preset-create-react-app": "^1.5.2",
"@storybook/react": "^5.3.9"
}
- added a test component as
src/components/TestComponent.tsx
and imported to story - yarn storybook
Observed behaviour:
- Works as intended with
.tsx
components - Doesn't work with '.ts' components, which is ok as
.tsx
is required by default to correctly infer react JSX.Elements - Stories need to remain in
.js
or.jsx
format in order for stories to actually load, although the UI doesn't break, and project compiles normally.
@mrmckeb I would personally say this works as intended, so the issue seems to be with the project setup.
@josias-r can you post more info about the error you are getting and your versions of react
, react-scripts
and all storybook
packages?
from presets.
As a separate comment, I would personally expect the preset, when used with TypeScript CRA config which is widely used to behave differently:
- create default stories in
.tsx
format. - register '.ts' and '.tsx' extensions with your webpack config
The current situation, unfortunately, allows users to import a TypeScript component, and pass wrong props as opposed to the definition inside an interface.
While you can see the required props in the editor, there is no automatic linting applied (vscode).
I would say that in the TS scenario, things simply work best if it is all is written TS, and I'm personally confused whether it is intended for the preset to support templates or not.
To avoid maintenance issues of the core CRA preset, my suggestion is to maybe create separate presets for templates such as the typescript and simply update the CLI to load them on storybook init.
from presets.
@vlaja I have now removed the babel-preset-react-app again to try to create a reproduction. Unfortunately, I don't get the error anymore :/
I've updated pretty much all the packages that could have had an influence on this since then (storybook, react-scripts, babel/core, etc.) but only minor versions. I tried rolling back the react-scripts version though, so that was not the cause of the issue. Anyways, I can now see the preset in the package-lock.
I guess the issue is now magically resolved, sorry for stealing your time!
from presets.
π‘It just hit me, that I have an error sometimes when working on a project with a team (w/ git) it can happen that when someone resets the package-lock file and I pull those changes & even run npm i
but without deleting the node_modules folder I get an error too saying that babel-preset-react-app
was not found in node_modules, even though it should be in there.
Maybe because the way storybook logs error it displayed it differently than I usually see that error and I thought it was a storybook related bug.
Anyways if anyone stumbles across this issue, try to delete node_modules first. π
from presets.
Related Issues (20)
- [Bug] CRA does not print eslint errors to terminal anylonger
- [Bug] CRA preset does not support ES2020 dependencies HOT 2
- Where are the tests for your presets?
- V3.2.0 works but V4.0.0 does not HOT 4
- [Bug] preset-create-react-app: Storybook config dir webpack override breaks default CRA config
- [Bug] Install @storybook/preset-scss with default storybook's bundler 'webpack4' doesn't works HOT 5
- [Bug] CRA5, [email protected] HOT 6
- [Bug] Fails in case of using custom folder structure inside /src
- [Help] Cannot find module '@babel/plugin-proposal-private-property-in-object'
- @storybook/preset-create-react-app 4.0.1 breaks Storybook HOT 4
- [Bug]: macos - Error: Cannot find module '.../node_modules/config/webpack.config' HOT 5
- [Bug] URL from readme does not exist on the website
- [Bug] ENAMETOOLONG on "preset-create-react-app@4" package installation HOT 1
- [Bug] start-storybook breaks when tsconfig.json has comments (preset-create-react-app)
- [Bug] Package dependency HOT 4
- [Bug] Confusing error message when stories folder is outside of src.
- [Bug] cannot run storybook with CRA preset version 4.1.0. HOT 1
- @storybook/react-docgen-typescript-plugin canary dependency
- [Bug] Storybook preset function `getReactScriptsPath` has bug HOT 2
- Missing license file
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 presets.