解决 Next.js & Storybook 无法使用 Emotion 的问题

TL;博士

设置 Next.js 之间的共享 ⇄ Storybook故事书插件下一个几乎可以解决所有问题。先用这个。
但是，如果您使用扩展 JSX 的库，例如 Emotion，插件将不会自动解析它。还需要在 Storybook 端的设置中写入
如果您没有在 Storybook 设置中将文档语法 MDX 从 v1 提升到 v2，则在输入 Emotion 时会崩溃

背景

我需要为个人发展创建一个前端，
让我们让它简单明了，在某种程度上使它成为一个坚固的结构，
因此，我开始着手将其设置为以下形式。

React（前端框架）
TypeScript（语言）
Next.js（我想使用目录结构和自动路由）
故事书（更易于实施和检查每个组件）
情感（易画CSSinJS）

直到 Next.js 和 Storybook 的引入

暂时，使用 create 命令创建一个带有 TypeScript 配置的 Next 模板。您将被以交互式格式询问各种问题，因此请适当输入。

$ yarn create next-app --typescript

接下来介绍Storybook。这也是CLI格式的介绍，所以选择它。

$ npx storybook init

因此，这是一个将 Next.js 端设置（图像导入处理、页面路由行为等）部署到 Storybook 的附加组件故事书插件下一个介绍

$ yarn add -D storybook-addon-next

.storybook/main.js

module.exports = {
  ...
  addons: [
    'storybook-addon-next',         // ← インストールしたNext.js連携用アドオンを追加
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions'
  ]
  ...
}

这样就完成了 Next.js 和 Storybook 的设置。
现在搭建环境真的很容易。无配置、零配置的理念万岁！

引入情感

扩展 JSX（元素道具）的基本功能需要做一些工作。
先把包裹放进去。

$ yarn add @emotion/react
$ yarn add -D @emotion/babel-plugin

接下来，在项目根目录中创建一个 Babel 配置文件。 babel.config.js 是我个人的喜好。
此处导入Next的标准设置，设置为在其上注入Emotion的扩展处理。

babel.config.js

module.exports = {
  presets: [
    presets: [
      [
        'next/babel',
        {
          'preset-react': {
            runtime: 'automatic',
            importSource: '@emotion/react'
          }
        }
      ]
    ],
    plugins: ['@emotion']
  ]
}

此外，重写设置以便注入 Emotion，以便在 TypeScript 端不会发生错误。

tsconfig.json

{
  ...
  "types": ["@emotion/react/types/css-prop"],
  "jsxImportSource": "@emotion/react"
  ...
}

types 或 jsxImportSource 可能会更好。
这很烦人，所以我决定将两者都包括在内。稍后验证。

有了这个，Emotion 的造型在 Next 方面变得有效。
但是，当您使用 Storybook 启动它时，应该设置样式的 CSS 元素具有以下文本。

<span css="You have tried to stringify object returned from css function. It isn't supposed to be used directly (e.g. as value of the className prop), but rather handed to emotion so it can handle it (e.g. as value of css prop).">

我收到一条消息，它不起作用。

对策一、描述Storybook端的Babel设置

如果你试图从 @987654335 @ 强制输出日志，这是 Storybook 的设置文件，
显然 Next 端的 Babel 设置只读取了一部分，结果发现 Emotion injection 设置并没有传递到 Storybook 端。

然后，直到您在 Storybook 中单独设置它。

.storybook/main.js

module.exports = {
  ...
  babel: async (options) => {
    // emotion用の注入設定
    // preset-react ローダーを取得してくる
    const presetReact = options.presets.find((p) => /preset-react/.test(p[0]));
    // preset-react　ローダのオプションを設定
    presetReact[1] = {
      ...presetReact[1],
      runtime: 'automatic',
      importSource: '@emotion/react'
    }
    // Emotionプラグインを追加
    options.plugins.push(require.resolve('@emotion/babel-plugin'));
    
    return options;
  }
}

目前，理论上这应该可行，所以尝试启动 Storybook。
但是，这一次它崩溃并出现以下错误：

src/stories/Introduction.stories.mdx: importSource cannot be set when runtime is classic.

普通组件的构建似乎通过了，如果我删除 .mdx 这是一个文档文件，它就会正常启动。

措施二：提升MDX版本

然而，令人恶心的是只有文档文件掉落，所以我决定寻找原因。
preset-react在库中，runtime: classic不支持注入Emotion等外部库，所以必须设置为automatic(Babel 官方文档参考）。
然而，首先，runtime 在装载机端被设置为automatic，却奇怪地被当作classic 对待。

经过快速搜索，我发现了以下问题。
https://github.com/mdx-js/mdx/issues/1441

显然，MDX 构建插件只支持runtime: classic，
在最近的v2 之后，似乎现在支持runtime: automatic。
Storybook 作为标准使用的 MDX 构建插件是v1.6.22，这似乎解决了这个问题。

我查了一下，它还处于实验阶段，但是似乎 Storybook 中有一个功能可以启用 MDX2.
尝试使用此升级。

$ yarn add -D @storybook/mdx2-csf

.storybook/main.js

module.exports = {
  ...
  features: [
    previewMdx2: true
  ]
  ...
}

现在尝试启动 Storybook... 好的，它可以工作了！造型也体现得恰到好处！

这应该是一个快速的设置，但它花费的时间比预期的要多。
毕竟，即使没有配置，对较新的库的支持也是有限的，
我真的觉得，如果我做得不好，那是行不通的。
莫名其妙的累了，明天就去实现吧……

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308623564.html