javascript - Storybook + Typescript ile babel-emotion-plugin nasıl kullanılır?

Şu anda TypeScript ile Storybook (v.5.3.18) kullanıyorum ve TypeScript webpack.config.js dosyamı kurmak için talimatları başarıyla uyguladım. Bu sorunsuz çalışıyor.

Ancak, yapılandırmaya bir babel eklentisi başarıyla eklemenin herhangi bir yolunu bulamıyor gibiyim. Aşağıda, işe yaramayan son denemem var.

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;
};

Eğer bu konfigürasyonla Storybook'u başlatırsam, "Component selectors yalnızca babel-plugin-emotion ile birlikte kullanılabilir." mesajını görmeye devam ediyorum, bu da Emotion babel eklentisinin Storybook tarafından algalanmadığı anlamına geliyor.

CRA kullanmıyorum, sadece saf React ve Typescript kullanıyorum.

İşte benim tsconfig'im:

{
  "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"
  ]
}

ve benim .babelrc dosyam:

{
  "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"
        }
      }
    ]
  ]
}

Herhangi bir öneri?

Teşekkürler.

Cevap #1

Sorununuzu çözüp çözmeyeceğini bilmiyorum, ama benimki sadece .storybook/main.js içinde bu yapılandırmayı kullanarak çözüldü:

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;
  },
};

Ben herhangi bir özel webpack yapılandırması kullanmıyorum (o bir tanesi hariç) ve bununla storybook üzerinde geliştirirken type-checking yapmayacaksınız, bu yüzden ihtiyaçlarınıza uyup uymadığını kontrol etmelisiniz.

Umarım bir şekilde yardımcı olur.

Cevap #2

Bu benim için işe yarıyor:

Önce ekle

devDependency:
  "babel-plugin-emotion": "^10.0.33",

sonra storybook main.js yapılandırma dosyasına aşağıdakileri ekleyin

module.exports = {
  ...

  babel: async (options) => ({
    ...options,
    plugins: ['emotion']
  }),

  ...
}