在 CodePen 上使用 @emotion/react 的方法！

2 年 ago

文, 翔

3 minutes

首先

在 CodePen 上尝试使用 @emotion/react 的过程中遇到困难，所以我写了一篇文章。

这里是使用了 TypeScript + React + @emotion/react 的可用的 CodePen 示例。

在CodePen上，通过Wataru Yamada (@wataru86)在@emotion/react中查看该笔记本。

在 CodePen 中使用 npm 包

@emotion/react 是一个用于在React中使用Emotion CSS库的npm包。

在CodePen中使用npm包有多种方法，但我尝试的方法有以下两种。

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

我会对每个进行解释。

从设置中的“添加外部脚本/笔”选项中添加CDN的URL。

打开 CodePen 的设置，然后打开 JS 的配置页面，就会显示如下界面。

您可以在此处的“添加外部脚本/样式表”中输入要使用的库的名称进行搜索，也可以直接提供 URL。

当我试着输入”emotion”时，出现了”emotion-core”。

选择emotion-core后，以下URL已被添加，但是是404错误。

由于我想使用的软件包是 @emotion/react，因此我暂时放弃了这种方法。

在设置中的”添加软件包”中，添加CDN的URL。

接下来尝试的是位于之前的“添加外部脚本/画笔”的下方的“添加包裹”。

也可以输入一个包含包名的选项，所以我尝试输入了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'))

以为这样会运行起来，结果却没有显示任何结果。

当我打开开发者工具并检查控制台时，我发现显示了以下错误。

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更改为这个链接后，我成功地应用了样式！

在CodePen上，通过Wataru Yamada（@wataru86）在@emotion/react中查看Pen。

通过这种方式，在 CodePen 上成功搭建了可使用 TypeScript、React 和 @emotion/react 的环境！