[英]Why does @chakra-ui/gatsby-plugin crashes gatsby?
尝试将 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"
“成帧器运动”:“^3.2.0”
然后将插件添加到gatsby-config.js
...
{
resolve: '@chakra-ui/gatsby-plugin',
options: {
isResettingCSS: true,
isUsingColorMode: true,
},
},
...
但在我运行 `yarn develop 之后,output 是:
> 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。
注意, @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
正如@jamie-bradley 所指出的,不鼓励按照接受的答案中的建议使用gatsby-plugin-chakra-ui
。
@chakra-ui/gatsby-plugin
的当前版本仍然会导致问题,但降级到版本2.0.4
仍然有效(使用 Gatsby v4和v5测试):
"@chakra-ui/gatsby-plugin": "^2.0.4",
除了这个版本,您还可以使用最新版本的@chakra-ui/react
和@chakra-ui/icons
:
"@chakra-ui/icons": "^2.0.14",
"@chakra-ui/react": "^2.4.4",
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.