CRA craco
CRA에서 craco를 통해서 webpack 설정을 할때 tsconfig-paths-webpack-plugins
설정하기
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
plugins: [
...
{
plugin: {
overrideWebpackConfig: ({ webpackConfig }) => {
webpackConfig.resolve.plugins.push(new TsconfigPathsPlugin({}));
return webpackConfig;
}
},
}
],
};
Code language: JavaScript (javascript)
https://github.com/risenforces/craco-alias/issues/5#issuecomment-734810303
Storybook
storybook에서 tsconfig-paths-webpack-plugins
사용할 떄는 storybook 설정에서 플러그인이 자동적으로 tsconfig.json을 가져오는 경로가 바르지 못하는 것으 확인할 수 있습니다. 그래서 해당 플러그인의 옵션으로 tsconfig.json을 직접 경로를 설정해서 가져오게 하면 오류를 해결할 수 있습니다.
config.resolve.plugins = [
new TsconfigPathsPlugin({
configFile: path.resolve(__dirname, "../tsconfig.json")
})
];
Code language: JavaScript (javascript)
const path = require('path')
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-create-react-app',
],
typescript: {
check: false,
checkOptions: {},
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
propFilter: (prop) =>
prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
},
},
webpackFinal: async (config) => {
config.resolve.plugins.push(
new TsconfigPathsPlugin({
configFile: path.resolve(__dirname, '../tsconfig.json'),
}),
)
return config
},
}
Code language: JavaScript (javascript)
https://github.com/storybookjs/storybook/issues/3291#issuecomment-500472928