CodePen で @emotion/react を使う方法！

# はじめに

CodePen で `@emotion/react` を使う方法がわからず試行錯誤したので、記事にしました。

完成した TypeScript + React + @emotion/react が使える CodePen はこちらです。

<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="NWzaWWa" data-user="wataru86" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wataru86/pen/NWzaWWa">
  @emotion/react in CodePen</a> by Wataru Yamada (<a href="https://codepen.io/wataru86">@wataru86</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# npm パッケージを CodePen で使用する

`@emotion/react` は css ライブラリ Emotion を React で使うための npm パッケージです。

https://emotion.sh/docs/introduction#react

CodePen で npm パッケージを使う方法はいくつかありますが、僕が試した方法は以下の2通りです。

- 設定の `Add External Scripts/Pens` から CDN の URL を追加する
- 設定の `Add Packages` から CDN の URL を追加する

それぞれについて説明していきます。

## 設定の `Add External Scripts/Pens` から CDN の URL を追加する

CodePen の `Settings` を開き `JS` の設定画面を開くと、このような画面になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325392/4b07547d-fd84-02d1-851f-3dd0fc6e1cd3.png)

こちらの `Add External Scripts/Pens` で使いたいライブラリの名前を入れて検索したり、直接 URL を指定することができます。

試しに `emotion` と入力したら、 `emotion-core` が出てきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325392/0bc70435-f8c7-e14a-e4c6-d60d27fb81f0.png)

`emotion-core` を選択すると以下の URL が追加されるのですが、404 となっていました...

https://cdnjs.cloudflare.com/ajax/libs/emotion-core/11.0.0/core.umd.min.js

使いたいパッケージは `@emotion/react` だったので、一旦この方法はあきらめました。

## 設定の `Add Packages` から CDN の URL を追加する

次に試したのが、先ほどの `Add External Scripts/Pens` の下にある `Add Packages` です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325392/520323f2-ed4d-b9dc-7c86-730a56ac905b.png)

こちらもパッケージ名を入れられるようなので、 `emotion/react` を入力してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325392/53b6517b-5fb4-7688-afe4-ecff47d9a765.png)

`@emotion/react` が出てきたので選択してみると、以下が `JS` タブに追加されました。

```typescript
import * as EmotionReact from "https://cdn.skypack.dev/@emotion/react";
```

なんだかいけそうな雰囲気が出てきたので、React 等を追加してみました。

```HTML:HTML
<div id="app"></div>
```

```tsx:JS
/** @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 を開いてみると、次のようにビルドのエラーが表示されました。

https://cdn.skypack.dev/@emotion/react

```
/*
 * [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` を直接指定してみました。

https://cdn.skypack.dev/@emotion/react@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に変更してみたことろ、無事にスタイルを当てることができました！！

<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="NWzaWWa" data-user="wataru86" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wataru86/pen/NWzaWWa">
  @emotion/react in CodePen</a> by Wataru Yamada (<a href="https://codepen.io/wataru86">@wataru86</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

これで CodePen で TypeScript + React + @emotion/react が使える環境ができました！