Upgraded Expo to version 46 and Next.js to version 12.2.x #120

WillenOLeal · 2022-08-07T20:29:41Z

I am a noob to monorepos, and Next.js, but figured I would give my best attempt at upgrading the Solito monorepo. The project seems to run fine after the changes I made. The libs below were the ones that gave me the most trouble:

Upgrade Notes

next.js: 12.2.2: Could not upgrade all the way to 12.2.4 kept getting 'Invalid next.config.js options detected' server waring vercel/next.js#39161

react-native-reanimated: 2.8.0: After upgrading to Expo SDK 46, with the expo upgrade command inside apps/expo, it installed react-native-reanimated v2.9.1. Native ran okay, but I kept getting this error on Web: software-mansion/react-native-reanimated#3355. So I put a yarn resolution on packages/app module for reanimated v2.8.0

@types/react: 18.0.1: Kept running into this next.js server error while using the latest version of this package, so I kept v18.0.1

vercel · 2022-08-07T20:29:48Z

Someone is attempting to deploy a commit to a Personal Account owned by @nandorojo on Vercel.

@nandorojo first needs to authorize it.

vercel · 2022-08-07T20:29:49Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
solito	✅ Ready (Inspect)	Visit Preview	Aug 30, 2022 at 10:06PM (UTC)
solito-app	✅ Ready (Inspect)	Visit Preview	Aug 30, 2022 at 10:06PM (UTC)
with-custom-fonts	✅ Ready (Inspect)	Visit Preview	Aug 30, 2022 at 10:06PM (UTC)

nandorojo · 2022-08-08T13:11:18Z

thank you for this! upgrading a monorepo with expo can be a huge pain so i appreciate it. i’ll review when i have some time.

michaelangeloio · 2022-08-11T15:44:56Z

Not sure if Next 12.2 is compatible, I was getting this weird error

error - Error: "Document.getInitialProps()" should resolve to an object with a "html" prop set with a valid html string
    at loadDocumentInitialProps (/Users/angelo/developer/mileaday/node_modules/next/dist/server/render.js:774:23)
    at async renderDocument (/Users/angelo/developer/mileaday/node_modules/next/dist/server/render.js:856:43)
    at async Object.renderToHTML (/Users/angelo/developer/mileaday/node_modules/next/dist/server/render.js:893:28)
    at async doRender (/Users/angelo/developer/mileaday/node_modules/next/dist/server/base-server.js:912:38)
    at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (/Users/angelo/developer/mileaday/node_modules/next/dist/server/base-server.js:1017:28)
    at async /Users/angelo/developer/mileaday/node_modules/next/dist/server/response-cache.js:69:36 {
  page: '/'
}

Which seemed to be affecting the custom default export behavior in _document.tsx. Downgrading from 12.2 to 12.1 solved the issue I had locally.

nandorojo · 2022-08-11T15:59:32Z

i believe showtime faced this, could you reference their repo for a solution?

michaelangeloio · 2022-08-11T17:16:30Z

I believe this is the PR you might be referring to @nandorojo showtime-xyz/showtime-frontend#1261

I can try making it work locally but will need some time.

nandorojo · 2022-08-11T17:59:50Z

thanks guys! i'm super tied up with work but will look when i can. the showtime document file and commits should offer some assistance. it's also potentially worth splitting RNW 0.18 / Expo SDK 46 into a PR separate from Next 12.2, since they each have their own quirks.

WillenOLeal · 2022-08-11T18:26:16Z

@michaelangrivera thank you for the showtime PR! I was not able to reproduce the error you posted above, was that on the solito monorepo? Or on this PR?

@nandorojo that makes sense. Would you like me to close this PR? I can attempt to make 2 separate PRs for Expo and Next?

popejs · 2022-08-12T01:57:10Z

@WillenOLeal Your upgrade PR helped me migrate my app to Expo 46 SDK but I had to do the following in order to get Renaimated 2/Moti to work on the web

next.config.js
```
reactStrictMode: false
```

app -> package.json

"resolutions": {
  "react-native-reanimated": "2.8.0"
},

I then had to make these changes to get EAS to build my project for iOS and Android:

app -> expo -> package.json

"workspaces": {
    "nohoist": [
      "react-native",
      "**/react-native-codegen"
    ]
  }

dohomi · 2022-08-14T04:44:27Z

I ran into the upgrade process myself and realised that there seems to be mismatch with the new typings. How did you guys get around this?

dohomi · 2022-08-14T08:43:40Z

@WillenOLeal NextJS 12.2.5 got released. The app starts but a bunch of console warnings are exposed, I think they are related to the underlying configuration

WillenOLeal · 2022-08-18T23:28:00Z

@dohomi I wasn't able to reproduce the type error you got. I am on @types/react: 18.0.17 and @types/react-native: 0.69.5. Also yeah I tried upgrading to 12.2.5, but kept getting a bunch of warnings, regarding the next.config.js file invalid options, still trying to figure out how to resolve them. I checked the showtime-xyz/showtime-frontend project, they are on 12.2.3-canary.2 as of writing, this version seems to work okay for now.

dohomi · 2022-08-19T00:47:55Z

@WillenOLeal I found https://github.com/tamagui/starters where I am borrowing some additional config and types finally worked with latest versions.

WillenOLeal · 2022-08-19T20:16:49Z

Hey Thank you @dohomi, for that repo! I was able to upgrade Nextjs to version 12.2.5 with no apparent server warnings. I pushed to this branch, left here as a reference.

SleeplessByte · 2022-08-23T23:37:33Z

@WillenOLeal Your branch worked for me as well without hassle (after pulling hehehe).

nandorojo · 2022-08-30T22:07:17Z

example-monorepos/blank/apps/next/next.config.js

-  [withTM, withFonts, withImages, [withExpo, { projectRoot: __dirname }]],
-  nextConfig
-)
+const transform = withPlugins([withTM, withFonts, withImages, withExpo])


I wonder if we should keep the nextConfig variable placed separately. This way we can get the JSDoc suggestions, and we can spread it onto here.

Also, is the projectRoot not needed from Expo?

nandorojo · 2022-08-30T22:10:02Z

example-monorepos/blank/packages/app/package.json

    "solito": "latest"
  },
+  "resolutions": {
+    "react-native-reanimated": "2.8.0"


I think resolutions should go in the root package.json

In the packages/expo/package.json ""react-native-reanimated": "~2.9.1" but the resolution is "react-native-reanimated": "2.8.0". Is there any specific reason why it's done like this ?

I originally placed that resolution there, because on web the app would crash with this error: software-mansion/react-native-reanimated#3355 on version 2.9.x and up. I think it might be fixed as of the latest 3.0.x version of react-native-reanimated

SleeplessByte · 2022-08-31T00:32:49Z

FWIW, the custom fonts preview on vercel doesn't render the custom fonts, because the font files cannot be found. Don't know if that's related to this PR, but wanted to let you know in case you didn't see that.

nandorojo · 2022-08-31T03:09:12Z

@SleeplessByte looks like an issue unrelated to this PR. I’ll take a look tomorrow

nandorojo · 2022-09-05T17:30:15Z

@WillenOLeal could you fix the comments I left and then I'll review the PR locally?

example-monorepos/blank/apps/expo/package.json

nandorojo · 2022-09-08T19:04:48Z

I wonder if there is a way to copy these changes into the other example monorepos without doing it manually...🫣

nandorojo · 2022-09-08T19:32:34Z

Thanks @WillenOLeal for this! Looks good to me. Merged!

I added the following changes:

Keep Reanimated 2.9.1 and add this hack fix for now
Disable strict mode on Web with a note to add it later

Upgraded Expo to version 46 and Next.js to version 12.2.x

38c5f3e

WillenOLeal mentioned this pull request Aug 7, 2022

Upgrade to Expo SDK 46 / Next 12.2 #99

Closed

vercel bot deployed to Preview – solito-app August 7, 2022 20:32 View deployment

Upgraded Next.js + eslint-config-next

032768c

vercel bot deployed to Preview – solito-app August 11, 2022 19:38 View deployment

Upgraded react types

c404361

vercel bot deployed to Preview – solito-app August 18, 2022 23:18 View deployment

Upgraded next to 12.2.5

bde1a1d

Merge branch 'master' into expo46-upgrade

74aba92

vercel bot deployed to Preview – solito-app August 30, 2022 22:04 View deployment

vercel bot deployed to Preview – solito August 30, 2022 22:06 View deployment

vercel bot deployed to Preview – with-custom-fonts August 30, 2022 22:06 View deployment

nandorojo reviewed Aug 30, 2022

View reviewed changes

xinha-sh reviewed Sep 8, 2022

View reviewed changes

example-monorepos/blank/apps/expo/package.json Show resolved Hide resolved

nandorojo mentioned this pull request Sep 8, 2022

Expo46 + Next.js 12.2 Upgrade #137

Merged

nandorojo merged commit 74aba92 into nandorojo:master Sep 8, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgraded Expo to version 46 and Next.js to version 12.2.x #120

Upgraded Expo to version 46 and Next.js to version 12.2.x #120

WillenOLeal commented Aug 7, 2022 •

edited

Loading

vercel bot commented Aug 7, 2022

vercel bot commented Aug 7, 2022 •

edited

Loading

nandorojo commented Aug 8, 2022

michaelangeloio commented Aug 11, 2022

nandorojo commented Aug 11, 2022

michaelangeloio commented Aug 11, 2022

nandorojo commented Aug 11, 2022

WillenOLeal commented Aug 11, 2022

popejs commented Aug 12, 2022 •

edited

Loading

dohomi commented Aug 14, 2022

dohomi commented Aug 14, 2022

WillenOLeal commented Aug 18, 2022

dohomi commented Aug 19, 2022

WillenOLeal commented Aug 19, 2022

SleeplessByte commented Aug 23, 2022 •

edited

Loading

nandorojo Aug 30, 2022

nandorojo Aug 30, 2022

xinha-sh Sep 8, 2022

WillenOLeal Sep 8, 2022

SleeplessByte commented Aug 31, 2022

nandorojo commented Aug 31, 2022

nandorojo commented Sep 5, 2022

nandorojo commented Sep 8, 2022

nandorojo commented Sep 8, 2022 •

edited

Loading

Upgraded Expo to version 46 and Next.js to version 12.2.x #120

Upgraded Expo to version 46 and Next.js to version 12.2.x #120

Conversation

WillenOLeal commented Aug 7, 2022 • edited Loading

Upgrade Notes

vercel bot commented Aug 7, 2022

vercel bot commented Aug 7, 2022 • edited Loading

nandorojo commented Aug 8, 2022

michaelangeloio commented Aug 11, 2022

nandorojo commented Aug 11, 2022

michaelangeloio commented Aug 11, 2022

nandorojo commented Aug 11, 2022

WillenOLeal commented Aug 11, 2022

popejs commented Aug 12, 2022 • edited Loading

dohomi commented Aug 14, 2022

dohomi commented Aug 14, 2022

WillenOLeal commented Aug 18, 2022

dohomi commented Aug 19, 2022

WillenOLeal commented Aug 19, 2022

SleeplessByte commented Aug 23, 2022 • edited Loading

nandorojo Aug 30, 2022

Choose a reason for hiding this comment

nandorojo Aug 30, 2022

Choose a reason for hiding this comment

xinha-sh Sep 8, 2022

Choose a reason for hiding this comment

WillenOLeal Sep 8, 2022

Choose a reason for hiding this comment

SleeplessByte commented Aug 31, 2022

nandorojo commented Aug 31, 2022

nandorojo commented Sep 5, 2022

nandorojo commented Sep 8, 2022

nandorojo commented Sep 8, 2022 • edited Loading

WillenOLeal commented Aug 7, 2022 •

edited

Loading

vercel bot commented Aug 7, 2022 •

edited

Loading

popejs commented Aug 12, 2022 •

edited

Loading

SleeplessByte commented Aug 23, 2022 •

edited

Loading

nandorojo commented Sep 8, 2022 •

edited

Loading