I am currently using Storybook (v.5.3.18) with TypeScript and have successfully followed the instructions to set up my TypeScript webpack.config.js. This works fine.
However, I cannot seem to find any way of successfully adding a babel plugin to the config. My latest attempt is below, which does not work.
module.exports = (baseConfig, env, config) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
use: [
{
loader: require.resolve('awesome-typescript-loader'),
options: {
exclude: /node_modules/,
presets: [['react-app', { flow: false, typescript: true }]],
configFileName: './.storybook/tsconfig.json',
babelOptions: {
babelrc: false,
presets: [],
plugins: ['emotion'],
},
},
},
{
loader: require.resolve('react-docgen-typescript-loader'),
options: {},
},
],
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
};
If I boot Storybook with this config, I continue to see the message "Component selectors can only be used in conjunction with babel-plugin-emotion.", which means that the Emotion babel plugin is not being picked up by Storybook.
I am not using CRA, just plain ol' React and Typescript.
Here's my tsconfig:
{
"compilerOptions": {
"outDir": "build/lib",
"module": "commonjs",
"strictNullChecks": true,
"skipLibCheck": true,
"moduleResolution": "node",
"esModuleInterop": true,
"experimentalDecorators": true,
"jsx": "react",
"noUnusedParameters": true,
"noUnusedLocals": true,
"noImplicitAny": true,
"noImplicitThis": true,
"declaration": true,
"allowSyntheticDefaultImports": true,
"emitDecoratorMetadata": true,
"target": "es5",
"lib": ["es5", "es6", "es7", "es2017", "dom"],
"sourceMap": true,
"types": ["react", "node"],
"baseUrl": "../",
"paths": {
"~*": ["./src*"],
"components": ["./src/components/*"],
"ui-components": ["./src/ui-components/*"],
"pages": ["./src/pages/*"],
"common": ["src/common/*"],
"mocks": ["./mocks/*"],
"lib": ["./lib/*"]
}
},
"include": ["src/**/*", "../src/typings.d.ts"],
"exclude": [
"node_modules",
"build",
"dist",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts",
"**/*/*.test.ts",
"examples"
]
}
and my.babelrc:
{
"presets": ["@babel/preset-react"],
"plugins": [
"inline-svg",
["emotion", { "inline": true }],
[
"module-resolver",
{
"root": ["."],
"alias": {
"~": "./src",
"common": "./src/common",
"components": "./src/components",
"ui-components": "./src/ui-components",
"lib": "./lib",
"pages": "./pages",
"static": "./public/static"
}
}
]
]
}
Any suggestions?
Thanks.
I don't know if might solve your issue, but i got mine by just using this configuration in .storybook/main.js
:
module.exports = {
stories: ['../packages/**/*.stories.tsx'],
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
plugins: ['emotion'],
presets: [['react-app', { flow: false, typescript: true }]],
},
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
},
};
I'm not using any custom webpack config (apart from that one), and with this you won't have type-chicking when developing on storybook, so you should check if this fits your needs.
Hope it helps somehow.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.