为什么@chakra-ui/gatsby-plugin 会使 gatsby 崩溃？

Question

尝试将 ChakraUI 应用到我的 gatsby 项目。

我已经安装了所有必要的软件包

"@chakra-ui/gatsby-plugin": "^1.0.1"

"@chakra-ui/react": "^1.1.3"

"@emotion/react": "^11.1.4"

"@emotion/styled": "^11.0.0"

"framer-motion": "^3.2.0"

然后将插件添加到gatsby-config.js

...
{
  resolve: '@chakra-ui/gatsby-plugin',
  options: {
    isResettingCSS: true,
    isUsingColorMode: true,
  },
},
...

但是在我运行 `yarn develop 之后，输出是：

> yarn develop yarn run v1.22.10 $ gatsby develop success open and validate gatsby-configs - 0.045s success load plugins - 0.693s success onPreInit - 0.039s success initialize cache - 0.018s success copy gatsby files - 0.093s success onPreBootstrap - 0.022s success createSchemaCustomization - 0.010s success Checking for changed pages - 0.001s success source and transform nodes - 0.068s success building schema - 0.234s info Total nodes: 31, SitePage nodes: 1 (use --verbose for breakdown) success createPages - 0.004s success Checking for changed pages - 0.001s success createPagesStatefully - 0.123s success update schema - 0.031s success write out redirect data - 0.002s success Build manifest and related icons - 0.126s success onPostBootstrap - 0.139s info bootstrap finished - 5.753s success onPreExtractQueries - 0.003s success extract queries from components - 0.207s success write out requires - 0.010s success run page queries - 0.029s - 3/3 104.13/s ERROR There was an error compiling the html.js component for the development server. See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html TypeError: Object(...) is not a function 27 | }; 28 | > 29 | return transform ? compose(transform, rtlTransform) : rtlTransform; | ^ 30 | } 31 | 32 | export function logical(opts) { WebpackError: TypeError: Object(...) is not a function - logical-prop.js:29 node_modules/@chakra-ui/styled-system/dist/esm/utils/logical-prop.js:29:29 - logical-prop.js:41 node_modules/@chakra-ui/styled-system/dist/esm/utils/logical-prop.js:41:1 - position.js:20 node_modules/@chakra-ui/styled-system/dist/esm/config/position.js:20:22 - index.js:1 node_modules/@chakra-ui/styled-system/dist/esm/config/index.js:1:1 - index.js:1 node_modules/@chakra-ui/styled-system/dist/esm/index.js:1:1 - index.js:1 node_modules/@chakra-ui/system/dist/esm/index.js:1:1 - chakra-provider.js:1 node_modules/@chakra-ui/react/dist/esm/chakra-provider.js:1:1 - index.js:1 node_modules/@chakra-ui/react/dist/esm/index.js:1:1 - gatsby-ssr.js:1 node_modules/@chakra-ui/gatsby-plugin/gatsby-ssr.js:1:1 not finished Building development bundle - 5.148s error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

你有什么想法吗？我什至不使用自定义 html.js。

Answer 1

注意，@chakra-ui/gatsby-plugin 与 gatsby-plugin-chakra-ui 不同。按照这个例子：https://www.gatsbyjs.com/plugins/gatsby-plugin-chakra-ui/

您需要安装这些软件包：

yarn add gatsby-plugin-chakra-ui @chakra-ui/core @emotion/core @emotion/styled emotion-theming

在你的gatsby-config.js：

module.exports = {
  plugins: ["gatsby-plugin-chakra-ui"],
};

安装后，随意使用。例如：

import React from "react";
import { Box, Text } from "@chakra-ui/core";

function IndexPage() {
  return (
    <Box p={8}>
      <Text fontSize="xl">Hello World</Text>
    </Box>
  );
}

export default IndexPage;

---

更新：最近的文档建议遵循 https://chakra-ui.com/docs/getting-started#gatsby 而不是弃用的包（由于迁移）。对于那些可能遇到相同问题的人，请检查依赖项弃用。