gluestack / gluestack-ui

React & React Native Components & Patterns (copy-paste components & patterns crafted with Tailwind CSS (NativeWind))
https://gluestack.io/
MIT License
2.76k stars 121 forks source link

Error when starting Gluestack UI v2 in Next.js. #2560

Closed chenerge closed 2 weeks ago

chenerge commented 2 weeks ago

Description

Cannot use styles.

CodeSandbox/Snack link

.

Steps to reproduce

  1. Go to '...'
  2. Click on '...'
  3. Scroll down to '...'
  4. See error

gluestack-ui Version

3.3.1

Platform

Other Platform

No response

Additional Information

No response

chenerge commented 2 weeks ago

{ '$$typeof': Symbol(react.element), type: 'style', key: null, ref: null, props: { dangerouslySetInnerHTML: { __html: '[stylesheet-group="0"]{}\n' + 'body{margin:0;}\n' + 'button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}\n' + 'html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}\n' + 'input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}\n' + '[stylesheet-group="1"]{}\n' + '.css-accessibilityImage-9pa8cd{bottom:0px;height:100%;left:0px;opacity:0;position:absolute;right:0px;top:0px;width:100%;z-index:-1;}\n' + '.css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}\n' + '.css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;}\n' + '.css-textinput-11aywtz{-moz-appearance:textfield;-webkit-appearance:none;background-color:rgba(0,0,0,0.00);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:0px;border-top-right-radius:0px;border:0 solid black;box-sizing:border-box;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;margin:0px;padding:0px;resize:none;}\n' + '.css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}\n' + '[stylesheet-group="2"]{}\n' + '.r-borderColor-1awa8pu{border-bottom-color:rgba(101,119,134,1.00);border-left-color:rgba(101,119,134,1.00);border-right-color:rgba(101,119,134,1.00);border-top-color:rgba(101,119,134,1.00);}\n' + '.r-borderColor-1d4xg89{border-bottom-color:rgba(170,184,194,1.00);border-left-color:rgba(170,184,194,1.00);border-right-color:rgba(170,184,194,1.00);border-top-color:rgba(170,184,194,1.00);}\n' + '.r-borderColor-1jyn79y{border-bottom-color:rgba(0,150,136,1.00);border-left-color:rgba(0,150,136,1.00);border-right-color:rgba(0,150,136,1.00);border-top-color:rgba(0,150,136,1.00);}\n' + '.r-borderColor-4a18lf{border-bottom-color:rgba(255,0,0,1.00);border-left-color:rgba(255,0,0,1.00);border-right-color:rgba(255,0,0,1.00);border-top-color:rgba(255,0,0,1.00);}\n' + '.r-borderColor-60ke3l{border-bottom-color:rgba(0,128,0,1.00);border-left-color:rgba(0,128,0,1.00);border-right-color:rgba(0,128,0,1.00);border-top-color:rgba(0,128,0,1.00);}\n' + '.r-borderColor-9x6qib{border-bottom-color:rgba(204,214,221,1.00);border-left-color:rgba(204,214,221,1.00);border-right-color:rgba(204,214,221,1.00);border-top-color:rgba(204,214,221,1.00);}\n' + '.r-borderColor-fx7oqy{border-bottom-color:rgba(0,0,255,1.00);border-left-color:rgba(0,0,255,1.00);border-right-color:rgba(0,0,255,1.00);border-top-color:rgba(0,0,255,1.00);}\n' + '.r-borderRadius-1j16mh1{border-bottom-left-radius:100%;border-bottom-right-radius:100%;border-top-left-radius:100%;border-top-right-radius:100%;}\n' + '.r-borderRadius-1jkafct{border-bottom-left-radius:2px;border-bottom-right-radius:2px;border-top-left-radius:2px;border-top-right-radius:2px;}\n' + '.r-borderStyle-1phboty{border-bottom-style:solid;border-left-style:solid;border-right-style:solid;border-top-style:solid;}\n' + '.r-borderWidth-d045u9{border-bottom-width:2px;border-left-width:2px;border-right-width:2px;border-top-width:2px;}\n' + '.r-borderWidth-rs99b7{border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-width:1px;}\n' + '.r-display-krxsd3{display:-webkit-box;}\n' + '.r-display-xoduu5{display:inline-flex;}\n' + '.r-flex-13awgt0{flex:1;}\n' + '.r-margin-crgep1{margin:0px;}\n' + '.r-margin-ywje51{margin:auto;}\n' + '.r-overflow-1udh08x{overflow-x:hidden;overflow-y:hidden;}\n' + '.r-padding-edyy15{padding:8px;}\n' + '.r-padding-t60dpp{padding:0px;}\n' + '[stylesheet-group="2.2"]{}\n' + '.r-insetInlineStart-10s2tm5{left:0%;}\n' + '.r-insetInlineStart-16o8guy{right:100%;}\n' + '.r-insetInlineStart-dqe1q{right:0%;}\n' + '.r-insetInlineStart-rci37q{left:100%;}\n' + '[stylesheet-group="3"]{}\n' + '.r-WebkitBoxOrient-8akbws{-webkit-box-orient:vertical;}\n' + '.r-WebkitOverflowScrolling-150rngu{-webkit-overflow-scrolling:touch;}\n' + '.r-alignItems-1awozwy{align-items:center;}\n' + '.r-alignSelf-k200y{align-self:flex-start;}\n' + '.r-animationDuration-17bb2tj{animation-duration:0.75s;}\n' + '.r-animationDuration-1ay1djp{animation-duration:1s;}\n' + '.r-animationDuration-1ielgck{animation-duration:300ms;}\n' + '.r-animationIterationCount-1muvv40{animation-iteration-count:infinite;}\n' + '.r-animationKeyframes-13aq9py{animation-name:r-animation-1iq689l;}\n' + '.r-animationKeyframes-1qulhi1{animation-name:r-animation-1pzkwqh;}\n' + '.r-animationKeyframes-1yef0xd{animation-name:r-animation-11cv4x;}\n' + '.r-animationKeyframes-ebwn4k{animation-name:r-animation-q67da2;}\n' + '.r-animationKeyframes-g3mlsw{animation-name:r-animation-t2lo5v;}\n' + '.r-animationKeyframes-xx3c9p{animation-name:r-animation-imtty0;}\n' + '.r-animationPlayState-1abnn5w{animation-play-state:paused;}\n' + '.r-animationTimingFunction-1ldzwu0{animation-timing-function:linear;}\n' + '.r-animationTimingFunction-1uypc71{animation-timing-function:ease-in;}\n' + '.r-animationTimingFunction-nvplwv{animation-timing-function:ease-out;}\n' + '.r-appearance-30o5oe{-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none;}\n' + '.r-backgroundColor-11mpjr4{background-color:rgba(223,223,223,1.00);}\n' + '.r-backgroundColor-11udlyb{background-color:rgba(0,150,136,1.00);}\n' + '.r-backgroundColor-14lw9ot{background-color:rgba(255,255,255,1.00);}\n' + '.r-backgroundColor-14sbq61{background-color:rgba(33,150,243,1.00);}\n' + '.r-backgroundColor-1niwhzg{background-color:rgba(0,0,0,0.00);}\n' + '.r-backgroundColor-dkge59{background-color:rgba(170,184,194,1.00);}\n' + '.r-backgroundColor-u92y06{background-color:rgba(255,165,0,1.00);}\n' + '.r-backgroundImage-rs94m5{background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K");}\n' + '.r-backgroundPosition-1mrlafo{background-position:0;}\n' + '.r-backgroundPosition-vvn4in{background-position:center;}\n' + '.r-backgroundRepeat-17leim2{background-repeat:repeat;}\n' + '.r-backgroundRepeat-u6sd8q{background-repeat:no-repeat;}\n' + '.r-backgroundSize-1sxrcry{background-size:auto;}\n' + '.r-backgroundSize-4gszlv{background-size:cover;}\n' + '.r-backgroundSize-ehq7j7{background-size:contain;}\n' + '.r-backgroundSize-x3cy2q{background-size:100% 100%;}\n' + '.r-bottom-1p0dtai{bottom:0px;}\n' + '.r-boxShadow-1ewcgjf{box-shadow:0px 1px 3px rgba(0,0,0,0.5);}\n' + '.r-caretColor-van48c{caret-color:transparent;}\n' + '.r-color-c68hjy{color:rgba(161,161,161,1.00);}\n' + '.r-color-jwli3a{color:rgba(255,255,255,1.00);}\n' + '.r-cursor-1ei5mc7{cursor:inherit;}\n' + '.r-cursor-1loqt21{cursor:pointer;}\n' + '.r-cursor-7q8q6z{cursor:default;}\n' + '.r-flexBasis-1mlwlqe{flex-basis:auto;}\n' + '.r-flexDirection-18u37iz{flex-direction:row;}\n' + '.r-flexDirection-1d5kdc7{flex-direction:column-reverse;}\n' + '.r-flexDirection-1euycsn{flex-direction:row-reverse;}\n' + '.r-flexDirection-eqz5dr{flex-direction:column;}\n' + '.r-flexGrow-16y2uox{flex-grow:1;}\n' + '.r-flexShrink-1wbh5a2{flex-shrink:1;}\n' + '.r-fontFamily-1qd0xha{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}\n' + '.r-fontSize-7cikom{font-size:inherit;}\n' + '.r-fontWeight-majxgm{font-weight:500;}\n' + '.r-forcedColorAdjust-1c6unfx{forced-color-adjust:none;}\n' + '.r-height-10ptun7{height:16px;}\n' + '.r-height-1dernwh{height:70%;}\n' + '.r-height-1pi2tsx{height:100%;}\n' + '.r-height-1r8g8re{height:36px;}\n' + '.r-height-4v7adb{height:5px;}\n' + '.r-height-z80fyv{height:20px;}\n' + '.r-justifyContent-1777fci{justify-content:center;}\n' + '.r-left-1d2f490{left:0px;}\n' + '.r-maxWidth-dnmrzs{max-width:100%;}\n' + '.r-opacity-6dt33c{opacity:1;}\n' + '.r-opacity-orgf3d{opacity:0;}\n' + '.r-outlineStyle-1ny4l3l{outline-style:none;}\n' + '.r-overflowX-11yh6sk{overflow-x:hidden;}\n' + '.r-overflowX-lltvgl{overflow-x:auto;}\n' + '.r-overflowY-1rnoaur{overflow-y:auto;}\n' + '.r-overflowY-buy8e9{overflow-y:hidden;}\n' + '.r-paddingBottom-97e31f{padding-bottom:env(safe-area-inset-bottom);}\n' + '.r-paddingLeft-bv2aro{padding-left:env(safe-area-inset-left);}\n' + '.r-paddingRight-hxflta{padding-right:env(safe-area-inset-right);}\n' + '.r-paddingTop-10xqauy{padding-top:env(safe-area-inset-top);}\n' + '.r-placeholderTextColor-6taxm2:-ms-input-placeholder{color:var(--placeholderTextColor);opacity:1;}\n' + '.r-placeholderTextColor-6taxm2::-moz-placeholder{color:var(--placeholderTextColor);opacity:1;}\n' + '.r-placeholderTextColor-6taxm2::-webkit-input-placeholder{color:var(--placeholderTextColor);opacity:1;}\n' + '.r-placeholderTextColor-6taxm2::placeholder{color:var(--placeholderTextColor);opacity:1;}\n' + '.r-pointerEvents-105ug2t{pointer-events:auto!important;}\n' + '.r-pointerEvents-12vffkv>{pointer-events:auto;}\n' + '.r-pointerEvents-12vffkv{pointer-events:none!important;}\n' + '.r-pointerEvents-633pao{pointer-events:none!important;}\n' + '.r-pointerEvents-ah5dr5>{pointer-events:none;}\n' + '.r-pointerEvents-ah5dr5{pointer-events:auto!important;}\n' + '.r-position-1xcajam{position:fixed;}\n' + '.r-position-gtdqiz{position:-webkit-sticky;position:sticky;}\n' + '.r-position-u8s1d{position:absolute;}\n' + '.r-right-zchlnj{right:0px;}\n' + '.r-scrollSnapAlign-cpa5s6{scro'... 2639 more characters }, id: 'react-native-stylesheet' }, _owner: null, _store: {} }

chenerge commented 2 weeks ago

image

chenerge commented 2 weeks ago

I have followed all the steps to add everything, but it still happens when I run it.

chenerge commented 2 weeks ago

image image

chenerge commented 2 weeks ago

https://github.com/chenerge/next.git

chenerge commented 2 weeks ago

https://github.com/chenerge/next.git

Project address.

Viraj-10 commented 2 weeks ago

Hey @chenerge, Can you check your repo? I think you have't pushed your code.

chenerge commented 2 weeks ago

嘿,您能检查一下您的存储库吗?我认为你没有推送你的代码。

image image

Please try again.

chenerge commented 2 weeks ago

嘿,您能检查一下您的存储库吗?我认为你没有推送你的代码。

It was my mistake for not submitting it earlier. Please take a look now.

mithun-si commented 2 weeks ago

HI @chenerge I'm also experienced the same error, in my case I'm just delate the registry.tsx file and also remove the related import from the layout.tsx and that error is not shown anymore

Viraj-10 commented 2 weeks ago

Hey @chenerge, Please check all the changes I have done in this PR. This all changes are mentioned in our manual guide. Feel free to reach out if face any other issue.

chenerge commented 2 weeks ago

嘿,请检查我在此 PR 中所做的所有更改。所有这些更改都在我们的手册指南中提到。如果遇到任何其他问题,请随时与我们联系。

Thank you, I made the changes according to the guide, and the previous issue was resolved. However, this new problem has occurred. Does this mean that the Next.js version needs to be downgraded to v13 to match the version of Next in @gluestack/ui-next-adapter?

[webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Resolving 'next/dist/compiled/webpack/webpack-lib' in D:\reactProject\next\node_modules\@gluestack\ui-next-adapter\dist for build dependencies doesn't lead to expected result 'D:\reactProject\next\node_modules\next\dist\compiled\webpack\webpack-lib.js', but to 'D:\reactProject\next\node_modules\@gluestack\ui-next-adapter\node_modules\next\dist\compiled\webpack\webpack-lib.js' instead. Resolving dependencies are ignored for this path. at unknown 4 next/dist/compiled/webpack/webpack-lib at file dependencies D:\reactProject\next\node_modules\@gluestack\ui-next-adapter\dist\ui-next-adapter.cjs.development.js at file D:\reactProject\next\node_modules\@gluestack\ui-next-adapter\dist\ui-next-adapter.cjs.development.js at file dependencies D:\reactProject\next\node_modules\@gluestack\ui-next-adapter\dist\index.js at file D:\reactProject\next\node_modules\@gluestack\ui-next-adapter\dist\index.js at file dependencies D:\reactProject\next\next.config.js at file D:\reactProject\next\next.config.js at resolve commonjs D:\reactProject\next\next.config.js
technologyconsulting commented 3 days ago

嘿,请检查我在此 PR 中所做的所有更改。所有这些更改都在我们的手册指南中提到。如果遇到任何其他问题,请随时与我们联系。

Thank you, I made the changes according to the guide, and the previous issue was resolved. However, this new problem has occurred. Does this mean that the Next.js version needs to be downgraded to v13 to match the version of Next in @gluestack/ui-next-adapter?

[webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Resolving 'next/dist/compiled/webpack/webpack-lib' in D:\reactProject\next\node_modules@gluestack\ui-next-adapter\dist for build dependencies doesn't lead to expected result 'D:\reactProject\next\node_modules\next\dist\compiled\webpack\webpack-lib.js', but to 'D:\reactProject\next\node_modules@gluestack\ui-next-adapter\node_modules\next\dist\compiled\webpack\webpack-lib.js' instead. Resolving dependencies are ignored for this path. at unknown 4 next/dist/compiled/webpack/webpack-lib at file dependencies D:\reactProject\next\node_modules@gluestack\ui-next-adapter\dist\ui-next-adapter.cjs.development.js at file D:\reactProject\next\node_modules@gluestack\ui-next-adapter\dist\ui-next-adapter.cjs.development.js at file dependencies D:\reactProject\next\node_modules@gluestack\ui-next-adapter\dist\index.js at file D:\reactProject\next\node_modules@gluestack\ui-next-adapter\dist\index.js at file dependencies D:\reactProject\next\next.config.js at file D:\reactProject\next\next.config.js at resolve commonjs D:\reactProject\next\next.config.js

I get this same issue in Next 14.2.18