はじめに
CodePen で @emotion/react を使う方法がわからず試行錯誤したので、記事にしました。
完成した TypeScript + React + @emotion/react が使える CodePen はこちらです。
See the Pen @emotion/react in CodePen by Wataru Yamada (@wataru86) on CodePen.
npm パッケージを CodePen で使用する
@emotion/react は css ライブラリ Emotion を React で使うための npm パッケージです。
CodePen で npm パッケージを使う方法はいくつかありますが、僕が試した方法は以下の2通りです。
- 設定の
Add External Scripts/Pensから CDN の URL を追加する - 設定の
Add Packagesから CDN の URL を追加する
それぞれについて説明していきます。
設定の Add External Scripts/Pens から CDN の URL を追加する
CodePen の Settings を開き JS の設定画面を開くと、このような画面になります。
こちらの Add External Scripts/Pens で使いたいライブラリの名前を入れて検索したり、直接 URL を指定することができます。
試しに emotion と入力したら、 emotion-core が出てきました。
emotion-core を選択すると以下の URL が追加されるのですが、404 となっていました...
使いたいパッケージは @emotion/react だったので、一旦この方法はあきらめました。
設定の Add Packages から CDN の URL を追加する
次に試したのが、先ほどの Add External Scripts/Pens の下にある Add Packages です。
こちらもパッケージ名を入れられるようなので、 emotion/react を入力してみました。
@emotion/react が出てきたので選択してみると、以下が JS タブに追加されました。
import * as EmotionReact from "https://cdn.skypack.dev/@emotion/react";
なんだかいけそうな雰囲気が出てきたので、React 等を追加してみました。
<div id="app"></div>
/** @jsx jsx */
import React, { useState } from "https://cdn.skypack.dev/react"
import ReactDOM from "https://cdn.skypack.dev/react-dom"
import { jsx, css } from "https://cdn.skypack.dev/@emotion/react@11.9.3"
const App = () => {
return (
<div css={style}>
Qiita Advent Calendar 2022 開催中！
</div>
)
}
const style = css({
backgroundColor: "#a50a23",
border: "8px ridge #ffffff",
color: "#ffffff",
fontWeight: 600,
padding: 32,
textAlign: "center",
})
ReactDOM.render(<App />, document.querySelector('#app'))
これで動くかと思いきや、Result に何も表示されませんでした。
デベロッパーツールを開き、Consoleをみてみたら、以下のようなエラーが表示されていました。
Uncaught Error: [Package Error] "@emotion/react@v11.10.5" could not be built.
at react@v11.10.5-g1q9dWMoxdTJ3Vy4YMir:17:7
ビルドが失敗しているのでえ、 CDN の URL を開いてみると、次のようにビルドのエラーが表示されました。
/*
* [Package Error] "@emotion/react@v11.10.5" could not be built.
*
* [1/5] Verifying package is valid…
* [2/5] Installing dependencies from npm…
* [3/5] Building package using esinstall…
* Running esinstall...
* Cannot find module '@emotion/react/types/css-prop'
*
* How to fix:
* - If you believe this to be an error in Skypack, file an issue here: https://github.com/skypackjs/skypack-cdn/issues
* - If you believe this to be an issue in the package, share this URL with the package authors to help them debug & fix.
* - Use https://skypack.dev/ to find a web-friendly alternative to find another package.
*/
console.warn("[Package Error] \"@emotion/react@v11.10.5\" could not be built. \n[1/5] Verifying package is valid…\n[2/5] Installing dependencies from npm…\n[3/5] Building package using esinstall…\nRunning esinstall...\nCannot find module '@emotion/react/types/css-prop'");
throw new Error("[Package Error] \"@emotion/react@v11.10.5\" could not be built. ");
export default null;
バージョンを指定しないと最新の 11.10.5 が選択されるようです。
最新版だとまだ安定していないのかな？思い、一つ前のマイナーバージョン 11.9.3 を直接指定してみました。
/*
* Skypack CDN - @emotion/react@11.9.3
*
* Learn more:
* 📙 Package Documentation: https://www.skypack.dev/view/@emotion/react
* 📘 Skypack Documentation: https://www.skypack.dev/docs
*
* Pinned URL: (Optimized for Production)
* ▶️ Normal: https://cdn.skypack.dev/pin/@emotion/react@v11.9.3-1vxW2SSj85ktMRPtn0Au/mode=imports/optimized/@emotion/react.js
* ⏩ Minified: https://cdn.skypack.dev/pin/@emotion/react@v11.9.3-1vxW2SSj85ktMRPtn0Au/mode=imports,min/optimized/@emotion/react.js
*
*/
// Browser-Optimized Imports (Don't directly import the URLs below in your application!)
export * from '/-/@emotion/react@v11.9.3-1vxW2SSj85ktMRPtn0Au/dist=es2019,mode=imports/optimized/@emotion/react.js';
export {default} from '/-/@emotion/react@v11.9.3-1vxW2SSj85ktMRPtn0Au/dist=es2019,mode=imports/optimized/@emotion/react.js';
ビルドに成功しているみたいです！
こちらのURLに変更してみたことろ、無事にスタイルを当てることができました！！
See the Pen @emotion/react in CodePen by Wataru Yamada (@wataru86) on CodePen.
これで CodePen で TypeScript + React + @emotion/react が使える環境ができました！