⚠️ note: not ready for merge.

TODO

Redwood deps we need to have React 18 support before upgrading (links to open Issue(s) if applicable)

[ ] Needs
[ ] More
[ ] Research

Redwood deps that require React 18

[ ] Chakra 2
- Version 2 of Chakra UI is only compatible with React 18. If you are still needing to use React 17 or earlier, please use version 1 of Chakra UI.

Goals

Want to explore how best to accommodate pre react@18 usage, what a frictionless upgrade might be, and what a codemod(s?) might look like.

See also:

https://github.com/redwoodjs/redwood/pull/5381
storybook
- https://github.com/storybookjs/storybook/pull/17215
  - https://github.com/storybookjs/storybook/issues/10543
  - https://github.com/storybookjs/storybook/issues/17831
https://github.com/reactwg/react-18/discussions/5#discussioncomment-2275882
https://nx.dev/guides/react-18#react-18-migration

Apr 02 '22 14:04 virtuoushub

Deploy Preview for redwoodjs-docs ready!

Name	Link
Latest commit	665037c355958c73310c9fca74af09634f2eeea8
Latest deploy log	https://app.netlify.com/sites/redwoodjs-docs/deploys/62def502c7027a0008f351b1
Deploy Preview	https://deploy-preview-4992--redwoodjs-docs.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Apr 02 '22 14:04 netlify[bot]

@virtuoushub one important, helpful thing you could do in the OP is list the Redwood deps we need to have React 18 support before upgrading with link to open Issue if applicable. fwiw

Apr 08 '22 19:04 thedavidprice

reopening, in case someone is interested in helping.

Jun 23 '22 14:06 virtuoushub

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 665037c355958c73310c9fca74af09634f2eeea8. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

🟥 Failed Commands
`cli run test --concurrency 2 -- --colors --maxWorkers 2`
`cli run test --concurrency 2 -- --colors --maxWorkers 2`

✅ Successfully ran 9 targets

Sent with 💌 from NxCloud.

Jul 25 '22 19:07 nx-cloud[bot]

Wouldn't this be an opportunity to upgrade to chakra 2? https://github.com/redwoodjs/redwood/tree/main/packages/cli/src/commands/setup/ui/libraries/chakra-ui.js#L31

Sep 02 '22 16:09 standuprey

Wouldn't this be an opportunity to upgrade to chakra 2? https://github.com/redwoodjs/redwood/tree/main/packages/cli/src/commands/setup/ui/libraries/chakra-ui.js#L31

Yes, although that upgrade will most likely happen in a different PR. Will add a note that it is a known dependency and that people interested in using it are waiting on this.

Sep 02 '22 22:09 virtuoushub

In response to this comment (reopening if someone is interested in helping) from @virtuoushub I would like to offer any help that would match my skills (I am a lot more an application developer than framework developer, having some experience in building RW apps). For some time I m waiting for the React 18 based RW release to be able to use Chakra 2.0, so if there is anything I could help in this context, please do let me know.

Sep 20 '22 19:09 adriatic

In response to this comment (reopening if someone is interested in helping) from @virtuoushub I would like to offer any help that would match my skills (I am a lot more an application developer than framework developer, having some experience in building RW apps). For some time I m waiting for the React 18 based RW release to be able to use Chakra 2.0, so if there is anything I could help in this context, please do let me know.

Thanks @adriatic - from an application perspective, I am not sure if you have to wait for the RW framework to be based off of React 18 to be able to use React 18. The https://github.com/redwoodjs/example-storybook project has been on React 18 for close to six months.

For RW application devs wanting to try out React 18 right now:

Update web/package.json to bump React's version to 18: e.g. https://github.com/redwoodjs/example-storybook/pull/12
Add custom web index web/src/index.js: e.g. ` https://github.com/redwoodjs/example-storybook/pull/144/files
1. see also: https://redwoodjs.com/docs/cli-commands#setup-custom-web-index

note: the example-storybook project is in JavaScript, so if your project uses TypeScript then you'll also want to bump the relevant React @types/* dependencies

I would like to offer any help that would match my skills

Not sure what this encompasses. Did you take a look at this PR and have suggestions?

Sep 21 '22 22:09 virtuoushub

@standup75 please check the remark by @virtuoushub above:

Thanks @adriatic - from an application perspective, I am not sure if you have to wait for the RW framework to be based off of React 18 to be able to use React 18. The https://github.com/redwoodjs/example-storybook project has been on React 18 for close to six months.

Sep 22 '22 02:09 adriatic

@standup75 please check the remark by @virtuoushub above:

Thanks @adriatic - from an application perspective, I am not sure if you have to wait for the RW framework to be based off of React 18 to be able to use React 18. The https://github.com/redwoodjs/example-storybook project has been on React 18 for close to six months.

quick follow up - I'd be remiss if I did not also mention all the hard work @Gresliebear put in verifying React 18 w/ the tutorial. Please see: https://github.com/redwoodjs/redwood/issues/5881#issuecomment-1183857875

Sep 22 '22 17:09 virtuoushub

@virtuoushub - I built the simplest RW app, changed web/package.json to use

    "react": "18.2.0",
    "react-dom": "18.2.0"

and added the minimal chakra 2.0 code as described at https://chakra-ui.com/getting-started/redwoodjs-guide

No errors or warnings. If you care to know my progress, please let me know a location where I should write it (here in the continuation of this comment??)

Sep 23 '22 01:09 adriatic

@virtuoushub - I built the simplest RW app, changed web/package.json to use
    "react": "18.2.0",
    "react-dom": "18.2.0"
and added the minimal chakra 2.0 code as described at https://chakra-ui.com/getting-started/redwoodjs-guide

No errors or warnings. If you care to know my progress, please let me know a location where I should write it (here in the continuation of this comment??)

Thanks for the update, a good place to share progress is the Show & Tell portion of our community's Discourse forum.

Let's do our best to keep comments in this PR, about the changes being made in this PR.

Sep 23 '22 14:09 virtuoushub

Oh ya thank you sorry for not finishing this, life is hitting like a truck right now. I really wish I got this done with more testing. So I can close https://github.com/redwoodjs/redwood/issues/5881 now with this merge? or is this still need testing or the upgrade is made?

Oct 02 '22 21:10 Gresliebear

16 replays were recorded for 3826c4f27daa7d11fe39310aa6f5f011435872fd.

0 Failed

16 Passed

requireAuth graphql checks

locator.waitFor: Target closed
=========================== logs ===========================
waiting for locator('.rw-form-error-title').locator('text=You don\'t have permission to do that') to be visible
============================================================

useAuth hook, auth redirects checks
Check that tags are rendering the correct dynamic data
Check that a specific blog post is prerendered
Check that about is prerendered
Check that homepage is prerendered
Check that you can navigate from home page to specific blog post
Waterfall prerendering (nested cells)
RBAC: Admin user should be able to delete contacts
RBAC: Should not be able to delete contact as non-admin user
Smoke test with dev server
Smoke test with rw serve
Loads Cell mocks when Cell is nested in another story
Loads Cell Stories
Loads MDX Stories
Mocks current user, and updates UI while dev server is running

View test run on Replay ↗︎

Oct 07 '22 17:10 replay-io[bot]

One thing I'm seeing in the test project when running yarn rw test web --no-watch (nothing we haven't seen before...). I've tried making sure the version of @testing-library/react is 13 via resolutions. I forget if we said though that this won't be a problem after the decoupling auth PR goes in. (All the tests still pass.)

 PASS   web  web/src/pages/AboutPage/AboutPage.test.tsx
  ● Console

    console.error
      Warning: An update to AuthProvider inside a test was not wrapped in act(...).
      
      When testing, code that causes React state updates should be wrapped into act(...):
      
      act(() => {
        /* fire events that update state */
      });
      /* assert on the output */
      
      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
          at AuthProvider (/Users/dom/prjcts/test-project/node_modules/@redwoodjs/auth/dist/AuthProvider.js:61:5)
          at MockProviders (/Users/dom/prjcts/test-project/node_modules/@redwoodjs/testing/dist/web/MockProviders.js:80:3)
          at wrapper

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
      at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27589:9)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25508:5)
      at Object.enqueueSetState (node_modules/react-dom/cjs/react-dom.development.js:14067:7)
      at AuthProvider.Object.<anonymous>.Component.setState (node_modules/react/cjs/react.development.js:354:16)
      at AuthProvider.reauthenticate (node_modules/@redwoodjs/auth/dist/AuthProvider.js:167:16)

Oct 07 '22 19:10 jtoar

Oh ya thank you sorry for not finishing this, life is hitting like a truck right now. I really wish I got this done with more testing. So I can close #5881 now with this merge? or is this still need testing or the upgrade is made?

Hi @Gresliebear - still needs testing. Let's leave #5881 open for now.

Nov 02 '22 00:11 virtuoushub

@jtoar

...
src/pages/ProfilePage/ProfilePage.tsx(31,21): error TS2322: Type 'unknown' is not assignable to type 'ReactNode'.
...

https://github.com/redwoodjs/redwood/actions/runs/3942582022/jobs/6746415523#step:24:82

how do I quickly repro/fix this? I think it has to do with generators

Jan 17 '23 19:01 virtuoushub

@jtoar
...
src/pages/ProfilePage/ProfilePage.tsx(31,21): error TS2322: Type 'unknown' is not assignable to type 'ReactNode'.
...
https://github.com/redwoodjs/redwood/actions/runs/3942582022/jobs/6746415523#step:24:82

how do I quickly repro/fix this? I think it has to do with generators

nvm - I figured out where this is coming from: https://github.com/redwoodjs/redwood/blob/main/tasks/test-project/codemods/profilePage.js#L25

Had to use https://github.com/redwoodjs/redwood/blob/main/.github/actions/setup_test_project/setup_test_project.mjs. to figure out the steps CI was doing.

Jan 17 '23 19:01 virtuoushub

redwood
redwood copied to clipboard

[draft] chore(react): Explore upgrade to react 18

TODO

Goals

Deploy Preview for redwoodjs-docs ready!

☁️ Nx Cloud Report

redwood redwood copied to clipboard

[draft] chore(react): Explore upgrade to react 18

TODO

Goals

✅ Deploy Preview for redwoodjs-docs ready!

☁️ Nx Cloud Report

redwood
redwood copied to clipboard

Deploy Preview for redwoodjs-docs ready!