@expo/html types errors #67
Comments
|
Hmm, inspecting the types output from export declare const H3: import("react").ForwardRefExoticComponent<(Pick<import("../css/types").StyledProps<import("@expo/html-elements/build/primitives/Text").TextProps>, "sx" | "style" | "themeKey" | "variant" | "variants" | "as" | "webContainerSx"> & Pick<import("react-native").TextProps & import("react").ClassAttributes<typeof rText>, "ref" | "key" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onTextLayout" | "onPress" | "onLongPress" | "maxFontSizeMultiplier" | "adjustsFontSizeToFit" | "minimumFontScale" | "suppressHighlighting" | "selectable" | "selectionColor" | "textBreakStrategy"> & import("@expo/html-elements/build/primitives/Text").WebTextProps & import("react").RefAttributes<import("react").ComponentType<import("@expo/html-elements/build/primitives/Text").TextProps>>) | (Pick<import("../css/types").StyledProps<import("@expo/html-elements/build/primitives/Text").TextProps>, "sx" | "style" | "themeKey" | "variant" | "variants" | "as" | "webContainerSx"> & Pick<import("react-native").TextProps & import("react").ClassAttributes<typeof rText>, "ref" | "key" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onTextLayout" | "onPress" | "onLongPress" | "maxFontSizeMultiplier" | "adjustsFontSizeToFit" | "minimumFontScale" | "suppressHighlighting" | "selectable" | "selectionColor" | "textBreakStrategy"> & import("@expo/html-elements/build/primitives/Text").WebTextProps & {
children?: import("react").ReactNode;
} & import("react").RefAttributes<import("react").ComponentType<import("@expo/html-elements/build/primitives/Text").TextProps>>)>;That's gibberish, but it shows that |
|
Is it possible |
That's an interesting hypothesis, that would make since. |
|
Yeah, it just seems like such an odd decision, and I would expect it to happen to other components, too. The HTML elements have had a number of issues, oddly. This is my {
"main": "__generated__/AppEntry.js",
"version": "1.0.0",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "yarn local",
"eject": "expo eject",
"build": "NODE_OPTIONS=--max_old_space_size=8192 next build",
"local": "node local.js && NODE_OPTIONS=--max_old_space_size=8192 next --hostname 0.0.0.0",
"lint": "eslint src --ext .ts,.tsx",
"lint:fix": "npm run lint -- --fix",
"serve": "yarn next start --hostname 0.0.0.0 -p 4000",
"postinstall": "expo-yarn-workspaces postinstall",
"analyze": "EXPO_WEB_DEBUG=true ANALYZE=true yarn build",
"customserver": "NEXT_PUBLIC_OPEN_API_ENDPOINT=http://192.168.1.136:8000 yarn local",
"localcustomserver": "NEXT_PUBLIC_OPEN_API_ENDPOINT=http://0.0.0.0:8000 yarn local",
"speed": "yarn analyze && next start"
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"@beatgig/analytics": "*",
"@beatgig/api": "*",
"@beatgig/api-hooks": "*",
"@beatgig/api-services": "*",
"@beatgig/auth-hooks": "*",
"@beatgig/calendar-embed": "*",
"@beatgig/calendars": "*",
"@beatgig/components": "*",
"@beatgig/constants": "*",
"@beatgig/design": "*",
"@beatgig/forms": "*",
"@beatgig/helpers": "*",
"@beatgig/hooks": "*",
"@beatgig/navigation": "*",
"@beatgig/next-pages": "*",
"@beatgig/payments": "*",
"@beatgig/providers": "*",
"@beatgig/screens": "*",
"@beatgig/search": "*",
"@beatgig/theme": "*",
"@beatgig/ui": "*",
"@beatgig/vendors": "*",
"@date-io/date-fns": "1.x",
"@expo/html-elements": "^0.0.1",
"@expo/vector-icons": "^12.0.0",
"@fullcalendar/core": "^5.4.0",
"@fullcalendar/daygrid": "^5.4.0",
"@fullcalendar/interaction": "^5.4.0",
"@fullcalendar/list": "^5.4.0",
"@fullcalendar/luxon": "^5.4.0",
"@fullcalendar/moment-timezone": "^5.4.0",
"@fullcalendar/react": "^5.4.0",
"@fullcalendar/timegrid": "^5.5.0",
"@material-ui/core": "^4.11.0",
"@material-ui/pickers": "^3.2.10",
"@module-federation/next-transpile-modules": "^4.2.1",
"@nandorojo/swr-firestore": "^0.13.2",
"@next/bundle-analyzer": "^9.5.3",
"@popperjs/core": "^2.5.4",
"@react-native-async-storage/async-storage": "^1.13.2",
"@react-native-community/datetimepicker": "^3.0.4",
"@react-native-community/masked-view": "0.1.10",
"@react-native-community/netinfo": "5.9.7",
"@react-native-community/slider": "^4.0.0-rc.2",
"@react-native-picker/picker": "1.9.2",
"@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0",
"@react-spring/native": "^9.0.0-rc.3",
"@segment/snippet": "^4.13.1",
"@sentry/browser": "^5.25.0",
"@sentry/node": "^5.25.0",
"@sentry/webpack-plugin": "^1.13.0",
"@theme-ui/color": "^0.4.0-rc.5",
"@types/lodash": "^4.14.161",
"@types/lodash.get": "^4.4.6",
"@types/lodash.last": "^3.0.6",
"@types/lodash.orderby": "^4.6.6",
"@vvo/tzdb": "^6.3.0",
"@welldone-software/why-did-you-render": "^6.0.5",
"@zeit/next-source-maps": "^0.0.4-canary.1",
"algoliasearch": "^4.4.0",
"cloudinary-tiny-js": "^1.0.0",
"color": "^3.1.3",
"date-fns": "^2.16.1",
"drift-js": "^0.0.0",
"dripsy": "^1.4.6",
"expo": "^40.0.0",
"expo-analytics-segment": "~9.1.0",
"expo-asset": "~8.2.0",
"expo-blur": "~8.2.0",
"expo-clipboard": "^1.0.1",
"expo-font": "~8.4.0",
"expo-image-manipulator": "~8.3.0",
"expo-linear-gradient": "~8.3.0",
"expo-network": "~2.3.0",
"expo-next-react-navigation": "^1.2.1",
"expo-progress": "^0.0.2",
"expo-status-bar": "~1.0.2",
"expo-video": "^1.0.2",
"expo-web-browser": "~8.5.0",
"firebase": "7.9.0",
"firebase-admin": "^9.1.1",
"framer-motion": "^2.9.4",
"glsl-shader-loader": "^0.1.6",
"highlight-words-core": "^1.2.2",
"imagemin-optipng": "^8.0.0",
"intercom-react": "^1.0.0-alpha.6",
"lodash.get": "^4.4.2",
"lodash.last": "^3.0.0",
"lodash.orderby": "^4.6.0",
"lodash.set": "^4.3.2",
"logrocket": "^1.0.14",
"lottie-react-native": "~2.6.1",
"luxon": "^1.25.0",
"mapbox-gl": "^2.0.1",
"moment": "^2.18.1",
"moment-timezone": "^0.5.32",
"next": "^10.0.1",
"next-circular-dependency": "^1.0.1",
"next-compose-plugins": "^2.2.0",
"next-fonts": "^1.4.0",
"next-images": "^1.6.0",
"next-optimized-images": "^2.6.2",
"next-seo": "^4.15.0",
"next-transpile-modules": "^4.1.0",
"numeral": "^2.0.6",
"postinstall-postinstall": "^2.1.0",
"react": "16.13.1",
"react-cache": "^2.0.0-alpha.1",
"react-cool-img": "^1.2.5",
"react-datepicker": "^3.3.0",
"react-dates": "21.8.0",
"react-dom": "16.13.1",
"react-driftjs": "^1.1.11",
"react-fast-compare": "^3.2.0",
"react-fullstory": "^1.4.0",
"react-intersection-observer": "^8.30.3",
"react-mapbox-gl": "^5.1.1",
"react-merge-refs": "^1.1.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-animatable": "^1.3.3",
"react-native-doorman": "^1.4.0",
"react-native-gesture-handler": "~1.7.0",
"react-native-google-places-autocomplete": "^2.1.1",
"react-native-maps": "0.27.1",
"react-native-masked-text": "^1.13.0",
"react-native-modal-datetime-picker": "^9.0.0",
"react-native-notifier": "^1.3.2",
"react-native-picker-select": "8.0.3",
"react-native-popover-view": "^3.1.1",
"react-native-reanimated": "2.0.0-rc.0",
"react-native-redash": "^14.2.4",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "~2.15.2",
"react-native-shared-element": "0.7.0",
"react-native-skeleton-content": "^1.0.20",
"react-native-web": "^0.14.10",
"react-native-web-hooks": "3.0.1",
"react-native-web-lottie": "^1.4.4",
"react-native-web-maps": "^0.3.0",
"react-native-webview": "10.7.0",
"react-navigation": "^4.4.0",
"react-navigation-heavy-screen": "^1.0.2",
"react-navigation-shared-element": "^3.0.0",
"react-navigation-stack": "^2.8.2",
"react-plaid-link": "^3.0.0",
"react-spring": "^8.0.27",
"react-typed": "^1.2.0",
"react-use": "^15.3.8",
"react-with-direction": "^1.3.1",
"react-with-styles-interface-aphrodite": "^6.0.1",
"recyclerlistview": "^3.0.0",
"resize-observer-polyfill": "^1.5.1",
"sentry-expo": "^2.1.2",
"setimmediate": "^1.0.5",
"smoothscroll-polyfill": "^0.4.4",
"swr": "^0.3.2",
"the-platform": "^0.10.1",
"tippy.js": "^6.2.7",
"yup": "^0.29.3"
},
"devDependencies": {
"@babel/core": "~7.9.0",
"@expo/next-adapter": "^2.1.25",
"@expo/webpack-config": "~0.12.45",
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
"@types/algoliasearch": "^3.34.10",
"@types/color": "^3.0.1",
"@types/highlight-words-core": "^1.2.0",
"@types/intercom-web": "^2.8.10",
"@types/lodash.sortby": "^4.7.6",
"@types/luxon": "^1.25.0",
"@types/numeral": "^0.0.28",
"@types/plaid-link": "^2.0.7",
"@types/react-datepicker": "^3.1.1",
"@types/react-dates": "^21.8.0",
"@types/react-native": "~0.63.2",
"@types/react": "16.13.1",
"@types/segment-analytics": "^0.0.32",
"@types/yup": "^0.29.7",
"babel-plugin-transform-require-ignore": "^0.1.1",
"eslint-config-nando": "^1.1.0",
"husky": "^4.3.0",
"patch-package": "^6.2.2",
"prettier": "^2.1.2",
"stripe": "^8.127.0",
"typescript": "^4.1.1-rc",
"webpack-hot-middleware": "^2.25.0"
},
"private": true,
"resolutions": {
"@theme-ui/core": "0.4.0-rc.1",
"@theme-ui/css": "0.4.0-rc.1",
"@theme-ui/mdx": "0.4.0-rc.1"
},
"husky": {
"hooks": {
"pre-commit": "yarn tsc",
"pre-push": "# yarn analyze"
}
}
} |
|
Were you able to publish the latest version of the monorepo? The types should be working in it, I'm curious if they work for you as well. We might be able to reverse engineer the typescript config to find the setting causing the issue. If the |
|
I haven't published it yet, I've been pulling my hair out a bit trying to get my app to be compatible with Expo SDK 40. It seems like the upgrade may have messed with my lock file or something and installed a bunch of random stuff. I can see if pushing the monorepo and installing that works. |
I feel your pain... I've been dealing with a babel issue on and off for the last day or so. |
|
Yeah, I've also had a perennial Babel issue lately, where running For now, I'm hoping I can just get I have to admit, this one is really confusing me. Something seems up with Example(Ignore this, fixed in next comment) Here's an example of a
And yet, this error:
Meanwhile, no issue for
|
|
Ah, well removing the cast fixed the above one, so ignore that, haha. The issue really comes down to the |
|
@cmaycumber Let me know what you think we should do with the merge conflicts on the yarn workspaces branch and I can publish that one |
|
Okay so one very ugly bandaid fix I have is to edit the |
|
It seems like children is not the issue. Rather, it makes all props of a given component required, including optional ones... |
|
Okay, I identified the issue. For some reason, the react native However, with some declaration merging, I was able to solve it by just making them optional. All you need to do is put this TS file anywhere in your app: // dripsy-hack.d.ts
import 'react-native'
declare module 'react-native' {
// fix HTML elements
interface TextProps {
accessibilityComponentType?: string
accessibilityTraits?: string
}
// pressable type support
interface PressableStateCallbackType {
hovered?: boolean
focused?: boolean
}
// transition support in view props
interface ViewStyle {
transitionProperty?: string
transitionDuration?: string
}
} |
I'm weirdly getting this error again. Seems like something changed with React's types, since I'm getting this after upgrading to Expo SDK40:
I think we need to add a
{ children?: React.ReactNode }to the return type ofcreateThemedComponent...not sure. Will investigate this more. Usingdripsy@1.4.6The text was updated successfully, but these errors were encountered: