Comments (2)
Hello @Mu-xue!
I've encountered the same issue after ejecting my CRA app that used @storybook/preset-create-react-app, and based my thoughts on the following answer storybookjs/storybook#6690 (typescript config advice from that issue didn't solve anything):
The CRA config doesn't support ejection right now, you'd need to write your own config in that case - as we no longer have a reliable source.
So, I'm entirely new to Storybook infrastructure, but my understanding of things is this: Storybook has its own webpack config, which is configurable through presets specifically @storybook/preset-create-react-app. After ejecting, as per above issue, this preset no longer valid so actual storybook launch degrades to its default webpack config, which is actually reported in console output:
Default webpack config is lacking support of typescript (your case, you've got a syntax error due to non-js :FC
type declaration) and JSX (my case and from the issue above).
So, what you have to do now is restore JSX and typescript support with separate config by adressing Typescript Config and Storybook for React sections of documentantion.
I was able to restore my expected behaviour (jsx, typescript and ts props exctraction) from @storybook/preset-create-react-app with following manual configuration:
// .storybook/main.js
const path = require("path")
module.exports = {
stories: ['../src/**/*.stories.(tsx|mdx)'],
webpackFinal: async config => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
include: path.resolve(__dirname, "../src"),
use: [
// There is also a second option in documentation to use babel instead of ts-loader which should also work
{
loader: require.resolve('ts-loader'),
},
{
loader: require.resolve('react-docgen-typescript-loader'),
options: {
tsconfigPath: path.resolve(__dirname, "../tsconfig.json")
}
}
],
})
config.resolve.extensions.push('.ts', '.tsx');
return config
},
addons: [
'@storybook/addon-docs'
]
}
and tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": false,
"jsx": "react"
},
"include": [
"src"
]
}
This correspond to my original config which I had before ejecting my CRA:
// .storybook/main.js
module.exports = {
stories: ['../src/**/*.stories.tsx'],
addons: [
{
name: '@storybook/preset-create-react-app',
options: {
tsDocgenLoaderOptions: {},
},
},
'@storybook/addon-docs'
]
}
from presets.
I was able to make it work with these changes:
Hello @Mu-xue!
I've encountered the same issue after ejecting my CRA app that used @storybook/preset-create-react-app, and based my thoughts on the following answer storybookjs/storybook#6690 (typescript config advice from that issue didn't solve anything):
The CRA config doesn't support ejection right now, you'd need to write your own config in that case - as we no longer have a reliable source.
So, I'm entirely new to Storybook infrastructure, but my understanding of things is this: Storybook has its own webpack config, which is configurable through presets specifically @storybook/preset-create-react-app. After ejecting, as per above issue, this preset no longer valid so actual storybook launch degrades to its default webpack config, which is actually reported in console output:
Default webpack config is lacking support of typescript (your case, you've got a syntax error due to non-js
:FC
type declaration) and JSX (my case and from the issue above).So, what you have to do now is restore JSX and typescript support with separate config by adressing Typescript Config and Storybook for React sections of documentantion.
I was able to restore my expected behaviour (jsx, typescript and ts props exctraction) from @storybook/preset-create-react-app with following manual configuration:
// .storybook/main.js const path = require("path") module.exports = { stories: ['../src/**/*.stories.(tsx|mdx)'], webpackFinal: async config => { config.module.rules.push({ test: /\.(ts|tsx)$/, include: path.resolve(__dirname, "../src"), use: [ // There is also a second option in documentation to use babel instead of ts-loader which should also work { loader: require.resolve('ts-loader'), }, { loader: require.resolve('react-docgen-typescript-loader'), options: { tsconfigPath: path.resolve(__dirname, "../tsconfig.json") } } ], }) config.resolve.extensions.push('.ts', '.tsx'); return config }, addons: [ '@storybook/addon-docs' ] }and tsconfig.json:
{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": false, "jsx": "react" }, "include": [ "src" ] }This correspond to my original config which I had before ejecting my CRA:
// .storybook/main.js module.exports = { stories: ['../src/**/*.stories.tsx'], addons: [ { name: '@storybook/preset-create-react-app', options: { tsDocgenLoaderOptions: {}, }, }, '@storybook/addon-docs' ] }
I was able to restore expected behaviour as well, but with a bit different webpack 4 config for storybook:
const path = require('path')
module.exports = {
stories: [
'../src/**/*.stories.mdx',
'../src/**/*.stories.@(js|jsx|ts|tsx)',
], webpackFinal: async config => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
include: path.resolve(__dirname, '../src'),
use: [// There is also a second option in documentation to use babel instead of ts-loader which should also work
{
loader: require.resolve('babel-loader'), options: {
customize: require.resolve('babel-preset-react-app/webpack-overrides'),
presets: [
[require.resolve('babel-preset-react-app'), { runtime: 'automatic' }],
[require.resolve('@babel/preset-env'), { targets: 'defaults' }],
],
plugins: [
[require.resolve('babel-plugin-named-asset-import'),
{ loaderMap: { svg: { ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]' } } },
],
],
},
}],
}, {
test: /\.ts$/,
loader: 'babel-loader',
exclude: /node_modules/,
}, // Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[require.resolve('babel-preset-react-app/dependencies'), { helpers: true }],
],
cacheDirectory: true, // See #6846 for context on why cacheCompression is disabled
cacheCompression: false, // Babel sourcemaps are needed for debugging into node_modules
// code. Without the options below, debuggers like VSCode
// show incorrect code and set breakpoints on the wrong lines.
sourceMaps: true,
inputSourceMap: true,
},
}, {
test: /\.scss$/,
use: ['style-loader', 'css-loader', {
loader: 'postcss-loader',
options: { plugins: () => [require('autoprefixer')()] },
}, 'sass-loader'],
})
config.resolve.extensions.push('.ts', '.tsx')
return config
}, addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
],
}
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.