TypeScript + electron-webpackでemotionを動かしたときのメモ

electron-webpack で emotion を動かそうとして試行錯誤したのでその結果のメモ。

ライブラリとバージョン Link to heading

TypeScript(3.9.5)
electron-webpack(2.8.2)
emotion(10.0.27)
ts-loader(7.0.5)
babel-loader(8.1.0)
babel-plugin-emotion(10.0.33)

起きた問題 Link to heading

styled-componentsのselectorに別のComponentsを指定しようとしたときに、 babel-plugin-emotion が必要というエラーが発生した。

const StyledCheckbox = styled.div<StyledCheckboxProps>`
  display: inline-block;
  background: ${(props) => (props.checked ? 'salmon' : 'papayawhip')};
  border-radius: 3px;
  transition: all 150ms;

  ${/* sc-selector */ HiddenCheckbox}:focus + & {
    box-shadow: 0 0 0 3px pink;
  }
`

Component selectors can only be used in conjunction with babel-plugin-emotion

electron-webpackのドキュメントに、 babel-plugin-* は自動で設定されると書いてあったため指示通りに babel-plugin-emotion をインストールしたのですが、それだけでは上手く動かなかった。

原因 Link to heading

以下の部分を見ると、拡張子がjsのファイルにしか当たっておらず、TypeScriptのトランスパイルに失敗していたため babel-plugin-emotion がでていた。

https://github.com/electron-userland/electron-webpack/blob/v2.8.2/packages/electron-webpack/src/targets/BaseTarget.ts#L25-L29

解決策 Link to heading

色々試行錯誤したのですが、最終的にelectron-webpackの設定修正を使って以下のようにts-loaderとbabel-loaderをかませるようにしたらうまくいった。

module.exports = (config) => {

  // ~~~~

  const tsRules = config.module.rules.filter((rule) => rule.test.toString().match(/tsx/));
  tsRules.forEach((rule) => {
    rule.use = [
      {
        loader: 'babel-loader',
        options: {
          plugins: ['emotion'],
        },
      },
      {
        loader: 'ts-loader',
      },
    ];
  });

  // ~~~~

  return config;
};