tsconfig-paths-webpack-plugins 완벽하게 사용하기

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