毎日更新

87日目 個人開発記15 -emotionからの脱却-

こんばんは。

土日もある程度開発の時間は確保できました（全然進んではいない）。
フロントエンドのテスト環境構築が終わり、テストを書く前にスタイリングをemotionからcss moduleに変更しようとしたところでタイムアップ。

厳密に言えば、「TSのエラーは吐いているけどとりあえずmodule化したcssファイルを読み込んでスタイル当てることはできた」のですが、「emotionの記述を消すとエラーになってコンパイルできない」という摩訶不思議現象に見舞われています。

TSを入れるより前にemotionを使ってスタイリングはしていました。TSを導入してコンパイルしたとき、謎の「Cannot find name 'jsx'」というエラーがjsxを書いている全ファイルで検知されました。いろいろ調べていると、emotionを使う場合にはTS用に追加の記述が必要で、

import React from "react";
import { Link } from "react-router-dom";

import { jsx, css } from "@emotion/core";
/** @jsx jsx */
jsx;

const Header = () => {
    return (
        <div className={styles.header}>
            <div>
                <Link to={{ pathname: "/" }}>タイトル</Link>
            </div>
            <ul className={styles.ul}>
                <li className={styles.list}>
                    <Link to={{ pathname: "Login" }}>Login</Link>
                </li>
                <li className={styles.list}>
                    <Link to={{ pathname: "Register" }}>Register</Link>
                </li>
            </ul>
        </div>
    );
};

export default Header;
import { jsx, css } from "@emotion/core";
/** @jsx jsx */
jsx;

この部分の記述が必要だとのこと。emotionからjsxをインポートしてるところまでは分かりますが、

/** @jsx jsx */
jsx;

という謎の記述を書くことによりエラーが出なくなります。

、、、、、とここまで書いたところで、「もしかしたらemotionを導入するときに何か他の設定ファイルをemotion用に書き換えたのかもしれないな」ということに気づいたので、その辺記憶を辿りながら詰まっている箇所の原因究明をがんばります。

もう遅いのでおわりー

  • この記事を書いた人

きわっち

元食品メーカー製造マンが未経験からwebエンジニアになりました。 エンジニアとして０から成長していく過程を発信していきたいと思っています。