SWC 관련 / css-prop 적용 안됨

짜증나게 맨날 잊고 맨날 다시 찾아보는거 귀찮아서 적어놓는 메모장...

"next/font" requires SWC although Babel is being used due to a custom babel config being present.

Can't get emotion's css prop working inside storybook

SVG

SWC 어쩌구

다른 설정 필요 없고 아래 설정
이유는 next.js가 babel을 swc로 전환했기 때문
next-font쪽에서 에러남

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    emotion: true,
  },
  experimental: {
    forceSwcTransforms: true,
  },
};

module.exports = nextConfig;

CSS-Prop / SVGr (스토리북 포함)

Next.js는 그냥 CSS-In-CSS 쓰는게 정답인 것 같다ㅎ.ㅎ
그리고 그게 더 좋ㅇ..

.storybook > main.ts

삽입해야하는 부분

  core: {
    builder: '@storybook/builder-webpack5',
  },
  babel: async (options) => {
    options?.presets?.push('@emotion/babel-preset-css-prop');
    return options;
  },
  webpackFinal: async (config) => {
    const imageRule = config.module?.rules?.find((rule) => {
      const test = (rule as { test: RegExp }).test;

      if (!test) {
        return false;
      }

      return test.test('.svg');
    }) as { [key: string]: any };

    imageRule.exclude = /\.svg$/;

    config.module?.rules?.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },

전체 코드

import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  stories: ['../**/*.mdx', '../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
    '@storybook/addon-mdx-gfm',
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  core: {
    builder: '@storybook/builder-webpack5',
  },
  babel: async (options) => {
    options?.presets?.push('@emotion/babel-preset-css-prop');
    return options;
  },
  webpackFinal: async (config) => {
    const imageRule = config.module?.rules?.find((rule) => {
      const test = (rule as { test: RegExp }).test;

      if (!test) {
        return false;
      }

      return test.test('.svg');
    }) as { [key: string]: any };

    imageRule.exclude = /\.svg$/;

    config.module?.rules?.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

export default config;

next.config.js

  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },

@types/custom.d.ts

declare module '*.svg' {
  import React from 'react';
  const svg: React.FC<React.SVGProps<SVGSVGElement>>;
  export default svg;
}

tsconfig.json

  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "src/@types",
    "**/*.d.ts"
  ],

쩝

사실 이런 사소한 문제는 외울 때가 되었는데
프로젝트를 그렇게 많이해도 이런 초기세팅은 항상 버벅버벅인다.. 바보같운나