Cannot Compile Project on vercel (<H1> error )

[bhyoo99]

"dependencies": { "@babel/plugin-proposal-private-methods": "^7.18.6", "@babel/plugin-proposal-private-property-in-object": "^7.18.6", "@expo-google-fonts/ibm-plex-sans-kr": "^0.2.2", "@homielab/react-native-auto-scroll": "^0.0.8", "@react-navigation/native": "^6.0.11", "@react-navigation/native-stack": "^6.7.0", "@react-navigation/stack": "^6.2.2", "babel-preset-expo": "^9.1.0", "dripsy": "^3.6.0", "expo": "^45.0.0", "expo-font": "~10.1.0", "expo-linear-gradient": "^11.3.0", "expo-linking": "^3.1.0", "expo-splash-screen": "^0.15.1", "expo-status-bar": "^1.3.0", "moti": "^0.18.0", "next": "11.1.0", "next-compose-plugins": "^2.2.1", "next-fonts": "^1.5.1", "next-images": "^1.8.4", "next-seo": "^5.4.0", "next-transpile-modules": "^9.0.0", "raf": "^3.4.1", "react": "16.13.1", "react-dom": "17.0.2", "react-native": "0.68.2", "react-native-gesture-handler": "~2.2.1", "react-native-reanimated": "~2.8.0", "react-native-safe-area-context": "4.2.4", "react-native-screens": "~3.11.1", "react-native-web": "0.17.7", "webpack": "^5.73.0" }, "devDependencies": { "@babel/core": "^7.12.9", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-transform-react-jsx": "^7.18.6", "@expo/next-adapter": "^4.0.8", "@types/react": "~17.0.21", "patch-package": "^6.4.7", "postinstall-postinstall": "^2.1.0", "typescript": "~4.3.5" },

=================================================

I worked successfully in my local environment. w "yarn next dev",

and also I can compile in local environment, w "yarn next build"

but in vercel, compile fail look like this.

Type error: Type '{ children: string[]; sx: { fontFamily: string; color: string; fontSize: string; }; }' is not assignable to type 'IntrinsicAttributes & PropsWithChildren<StyledProps<"text"> & ((Pick<TextProps, "testID" | "onLayout" | "nativeID" | "accessible" | "accessibilityActions" | ... 29 more ... | keyof WebTextProps> & RefAttributes<...>) | (Pick<...> & { ...; }))>'.

https://github.com/nandorojo/dripsy/issues/67 I also checked and applied this issue, but it didn't work. Is there any other solution?

[nandorojo]

i think your typescript version is too old

[bhyoo99]

"devDependencies": { "@babel/core": "^7.12.9", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-transform-react-jsx": "^7.18.6", "@expo/next-adapter": "^4.0.8", "@types/react": "~17.0.21", "patch-package": "^6.4.7", "postinstall-postinstall": "^2.1.0", "typescript": "^4.7.4" },

I tryed lastest ts, but same error...

btw, thank you for making such great libraries. I'm a big fan

[nandorojo]

happy to help!

if it works locally with next build, i’m not totally sure what the issue is. can you clear your node modules and yarn cache clean and delete .next and try again?

[nandorojo]

also try yarn why typescript — you may need a resolution

[bhyoo99]

yarn next build yarn run v1.22.18 warning ../package.json: No license field $ /Users/bhyoo99/tipy/node_modules/.bin/next build info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5 info - Checking validity of types

./components/AutoScroll.tsx 56:5 Warning: React Hook React.useCallback has a missing dependency: 'checkContent'. Either include it or remove the dependency array. react-hooks/exhaustive-deps 90:5 Warning: React Hook React.useCallback has missing dependencies: 'delay', 'duration', 'endPaddingWidth', and 'isLTR'. Either include them or remove the dependency array. react-hooks/exhaustive-deps 110:5 Warning: React Hook React.useMemo has a missing dependency: 'checkContent'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules info - Using external babel configuration from /Users/bhyoo99/tipy/babel.config.js Warning: useTransformReactJsxExperimental has been renamed to useTransformReactJSXExperimental (capitalized JSX) in react-native@0.64.0 info - Using external babel configuration from /Users/bhyoo99/tipy/babel.config.js info - Using external babel configuration from /Users/bhyoo99/tipy/babel.config.js info - Using external babel configuration from /Users/bhyoo99/tipy/babel.config.js info - Using external babel configuration from /Users/bhyoo99/tipy/babel.config.js info - Using external babel configuration from /Users/bhyoo99/tipy/babel.config.js info - Using external babel configuration from /Users/bhyoo99/tipy/babel.config.js info - Using external babel configuration from /Users/bhyoo99/tipy/babel.config.js info - Using external babel configuration from /Users/bhyoo99/tipy/babel.config.js info - Using external babel configuration from /Users/bhyoo99/tipy/babel.config.js info - Using external babel configuration from /Users/bhyoo99/tipy/babel.config.js info - Using external babel configuration from /Users/bhyoo99/tipy/babel.config.js info - Creating an optimized production build
info - Compiled successfully info - Collecting page data
info - Generating static pages (3/3) info - Finalizing page optimization

Page Size First Load JS ┌ ○ / (585 ms) 144 kB 323 kB ├ /_app 0 B 180 kB └ ○ /404 194 B 180 kB

• First Load JS shared by all 180 kB ├ chunks/framework.ab3ef0.js 42 kB ├ chunks/main.fcd63e.js 23.2 kB ├ chunks/pages/_app.543165.js 114 kB └ chunks/webpack.0e0f5c.js 870 B

λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ○ (Static) automatically rendered as static HTML (uses no initial props) ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps) (ISR) incremental static regeneration (uses revalidate in getStaticProps)

✨ Done in 46.10s.

in vercel [12:18:45.261] Retrieving list of deployment files... [12:18:50.097] Downloading 5059 deployment files... [12:19:56.201] Installing build runtime... [12:19:58.570] Build runtime installed: 2.369s [12:19:59.108] Looking up build cache...

[12:20:06.492] Installing dependencies... [12:20:06.914] yarn install v1.22.17 [12:20:07.030] [1/4] Resolving packages... [12:20:07.822] [2/4] Fetching packages... [12:20:30.762] warning mini-css-extract-plugin@0.5.0: Invalid bin field for "mini-css-extract-plugin". [12:20:40.643] [3/4] Linking dependencies... [12:20:40.655] warning "dripsy > @dripsy/core > @expo/html-elements@0.0.1" has incorrect peer dependency "react-native-web@~0.13.7". [12:20:40.657] warning " > next@11.1.0" has incorrect peer dependency "react@^17.0.2". [12:20:40.657] warning "next > @next/react-dev-overlay@11.1.0" has incorrect peer dependency "react@^17.0.2". [12:20:40.658] warning "next > use-subscription@1.5.1" has incorrect peer dependency "react@^16.8.0 || ^17.0.0". [12:20:40.659] warning " > react-dom@17.0.2" has incorrect peer dependency "react@17.0.2". [12:20:40.659] warning " > react-native@0.68.2" has incorrect peer dependency "react@17.0.2". [12:20:40.659] warning "react-native > react-shallow-renderer@16.14.1" has incorrect peer dependency "react@^16.0.0 || ^17.0.0". [12:20:40.660] warning "react-native > react-native-codegen > jscodeshift@0.13.1" has unmet peer dependency "@babel/preset-env@^7.1.6". [12:20:40.660] warning "react-native-screens > react-freeze@1.0.0" has incorrect peer dependency "react@^17.0.0". [12:20:40.661] warning " > @expo/next-adapter@4.0.8" has incorrect peer dependency "react@^17". [12:20:59.234] [4/4] Building fresh packages... [12:20:59.852] Done in 52.95s. [12:20:59.900] Detected Next.js version: 11.1.0 [12:20:59.903] Running "yarn run build" [12:21:00.239] yarn run v1.22.17 [12:21:00.278] $ next build [12:21:01.745] info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5 [12:21:02.656] info - Checking validity of types... [12:21:08.029] Failed to compile. [12:21:08.029] [12:21:08.029] ./screens/HomeScreen.tsx:1834:12 [12:21:08.029] Type error: Type '{ children: string[]; sx: { fontFamily: string; color: string; fontSize: string; }; }' is not assignable to type 'IntrinsicAttributes & PropsWithChildren<StyledProps<"text"> & ((Pick<TextProps, "onLayout" | "onPress" | "testID" | "nativeID" | "accessible" | ... 29 more ... | keyof WebTextProps> & RefAttributes<...>) | (Pick<...> & { ...; }))>'. [12:21:08.030] Type '{ children: string[]; sx: { fontFamily: string; color: string; fontSize: string; }; }' is missing the following properties from type 'Pick<Omit<any, "style" | "accessibilityRole"> & WebTextProps & { children?: ReactNode; }, "children" | "onLayout" | "onPress" | "testID" | "nativeID" | ... 30 more ... | keyof WebTextProps>': onLayout, onPress, testID, nativeID, and 30 more. [12:21:08.030] [12:21:08.030]   1832 |  style={{ paddingTop: 64, paddingHorizontal: 16, paddingBottom: 32 }} [12:21:08.030]   1833 |  > [12:21:08.030] > 1834 |  <H1 sx={{ fontFamily: "bold", color: "$white", fontSize: "$4" }}> [12:21:08.030]   |  ^ [12:21:08.031]   1835 |  asda{"\n"}asdasd! [12:21:08.031]   1836 |  </H1> [12:21:08.031]   1837 |  <TouchableOpacity [12:21:08.067] error Command failed with exit code 1. [12:21:08.067] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. [12:21:08.080] Error: Command "yarn run build" exited with 1

===================================================================

I tryed but, same err.

but I can deploy using Text tag, so I desiced change H1 tag to Text

[bhyoo99]

Temporary solution, I decided not to use TS :) haha

[nandorojo]

Can you try to reproduce with the solito starter? works fine there: npx create-solito-app

[seanaguinaga]

I am getting this error as well from a forked repo using your solito-test repo @nandorojo

https://github.com/Round-Technologies/apps

packages/app/features/home/screen

[nandorojo]

thanks for the repro, will look when i find some time

[nandorojo]

Can you try upgrading to 3.7.x and see if that fixes it?