मेरे गैट्सबी प्रोजेक्ट में चक्रुई को लागू करने की कोशिश कर रहा हूं।

मैंने सभी आवश्यक पैकेज स्थापित कर लिए हैं

"@ चक्र-यूई/गैट्सबी-प्लगइन": "^ 1.0.1"

"@ चक्र-उई/प्रतिक्रिया": "^ 1.1.3"

"@ भावना/प्रतिक्रिया": "^11.1.4"

"@ इमोशन/स्टाइल": "^11.0.0"

"फ्रैमर-मोशन": "^ 3.2.0"

फिर प्लगइन को gatsby-config.js में जोड़ा

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

लेकिन जब मैं 'यार्न डेवलपमेंट' चलाता हूं, तो आउटपुट होता है:

  

> 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 का भी उपयोग नहीं करता।

2
James 11 जिंदा 2021, 02:45

2 जवाब

सबसे बढ़िया उत्तर

सावधान रहें, @chakra-ui/gatsby-plugin gatsby-plugin-chakra-ui के समान नहीं है। इस उदाहरण का अनुसरण करें: https://www.gatsbyjs.com/plugins/gatsby -प्लगइन-चक्र-यूआई/

आपको इन पैकेजों को स्थापित करने की आवश्यकता होगी:

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;
1
Ferran Buireu 11 जिंदा 2021, 09:00
मुझे लगता है कि इसे स्वीकार कर लिया गया था क्योंकि अब आपके पास समस्या नहीं है लेकिन चक्र दस्तावेज़ीकरण से पता चलता है कि आपको अब gatsby-plugin-chakra-ui का उपयोग नहीं करना चाहिए chakra-ui.com/docs/migration#changes - मैंने अभी-अभी @chakra-ui/gatsby-plugin के साथ भी इसका अनुभव करना शुरू किया है, लेकिन कोई समाधान नहीं मिला अभी तक...
 – 
Jamie Bradley
11 जिंदा 2021, 19:42

हरे रंग की टिक के साथ चिह्नित समाधान बहिष्कृत है, आपको चक्र डॉक्स का पालन करने की आवश्यकता है: https: //chakra-ui.com/docs/getting-started#gatsby

0
nerdess 21 अप्रैल 2021, 17:15