chore(deps): bump setup of Chakra UI to V2

[virtuoushub]

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.

see also:

• https://chakra-ui.com/getting-started
• feat(react): Upgrade to React 18 #4992 (comment)
• Fix: use v1 range in setup chakra for @chakra-ui/react #5614

[replay-io]

16 replays were recorded for b28c0d1.

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 ↗︎

[jtoar]

Looks good @virtuoushub, and looks like this really is all the changes we'll have to make on the framework's side. There's a few more breaking changes, but those are only relevant if you're using specific Chakra components. We'll just have to refer users to Chakra's migration guide in the release notes.

[adriatic]

The following paragraphs are written for a potential benefit to @virtuoushub and @jtoar - no need to comment (or even read) any of that:

---

I will test the Redwood 4.2 (do I need to get some newer version ?) with Chakra latest and report back here.

The recommendation "If you are still needing to use React 17 or earlier, please use version 1 of Chakra UI." may not be very helpful as I spent some time to try that path and the documentation for Chakra v1 and Redwood (https://v1.chakra-ui.com/guides/first-steps) is broken. I discussed this with a member of Chakra team (Lazar Nikolov) and he wasn't able to help. (it seems that this documentation was created by someone from Redwood (my guess))

Running the minimal RedwoodJS app results with the message:

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

This is not surprising, since my RW app defined the dependencies as

 "dependencies": {
    "@redwoodjs/forms": "4.2.0",
    "@redwoodjs/router": "4.2.0",
    "@redwoodjs/web": "4.2.0",
    "prop-types": "15.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }

My interpretation is that @jtoar's comment suggests that the current RW release does not address the React's 18 issue Use createRoot instead, yet.

Also notice to @dennemark with respect to his comment at discord

I am using chakra v2 and redwood with react 18 for a while now. No issues so far.

I believe that you did not look at the devtools console, right?

[virtuoushub]

Hi @adriatic, thanks for your comment. Is there something specific with this PR which is causing issues with your project?

Also friendly reminder React 18 support in Redwood is currently experimental, so please use it at your own risk.

---

I will test the Redwood 4.2 (do I need to get some newer version ?) with Chakra latest and report back here.

Redwood 5+ ( canary as of the time of this writing) is a valid test.

---

may not be very helpful as I spent some time to try that path and the documentation for Chakra v1 and Redwood (https://v1.chakra-ui.com/guides/first-steps) is broken

Is this documented somewhere? Was not aware of a broken Chakra integration.

Also what is meant by broken? is it that

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

Shows up in the console? Because depending on the version combinations used, that is the expected behavior.

---

My interpretation is that #7649 (review) suggests that the current RW release does not address the React's 18 issue Use createRoot instead, yet.

While the current 4.x RW releases do not have the createRoot API update, canary does. The workaround to get this to work in versions less than 5 (canary) is documented over at #4992

Looking at your https://github.com/adriatic/rw-chakra I did not notice any web/src/index.js which is why you see that Warning: ReactDOM.render is no longer supported... warning.

Please either upgrade redwood to canary or add a custom web index (web/src/index.js) as documented on #4992 to try and get that warning to go away.

[adriatic]

Hi @adriatic, thanks for your comment. Is there something specific with this PR which is causing issues with your project?

Hello, @virtuoushub
Probably the biggest issue is described in my just published post Typescript 4.2 import paths breaking change, which requires the change in RedwoodJS generated file tsconfig

Also friendly reminder React 18 support in Redwood is currently experimental, so please use it at your own risk.

Thanks, I understand your warning

I will test the Redwood 4.2 (do I need to get some newer version ?) with Chakra latest and report back here.

Redwood 5+ ( canary as of the time of this writing) is a valid test.

Ack

... the documentation for Chakra v1 and Redwood (https://v1.chakra-ui.com/guides/first-steps) is broken

Is this documented somewhere? Was not aware of a broken Chakra integration.

Also what is meant by broken?

Look at the site Chakra UI v 1.8.8 RedwoodJS integration guide and realize that the very first command to create Redwood setup is

yarn redwood setup ui chakra-ui

results with adding the Chakra UI v 2.x libraries. I discussed this with Chakra team member Lazar Nikolov

Neither of us knew who authored that guide.

Please either upgrade redwood to canary or add a custom web index (web/src/index.js) as documented on #4992 to try and get that warning to go away.

I decided to add custom web index (I am not sure about the need to do that, as not knowing about this "trick", I set the home page to at / (see this line and observe that the HomePage is "completely Chakra")

[adriatic]

Added later:

1. I modified the web/package.json to be

{
  "name": "web",
  "version": "0.0.0",
  "private": true,
  "browserslist": {
    "development": [
      "last 1 version"
    ],
    "production": [
      "defaults",
      "not IE 11",
      "not IE_Mob 11"
    ]
  },
  "dependencies": {
    "@redwoodjs/forms": "4.2.0",
    "@redwoodjs/router": "4.2.0",
    "@redwoodjs/web": "4.2.0",
    "prop-types": "15.8.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

[virtuoushub]

Hi again @adriatic, fwiw due to formatting I had a really difficult time following your response thread.

That being said to address:

Look at the site Chakra UI v 1.8.8 RedwoodJS integration guide and realize that the very first command to create Redwood setup is

yarn redwood setup ui chakra-ui
results with adding the Chakra UI v 2.x libraries. ...

I am unable to reproduce this behavior. Do you have a reproduction repo? I am unable to help without one.

For reference #5614 is used in Redwood v4.x and below (for the most part) and is there for the explicit purpose to pin Chakra UI to v1.

Here is what I see when running that command:

➜  yarn redwood setup ui chakra-ui

✔ Installing packages...
  ✔ Install @chakra-ui/react@^1, @emotion/react@^11, @emotion/styled@^11, framer-motion@^6
...

resulting web/package.json

{
...
  "dependencies": {
    "@chakra-ui/react": "^1",
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "@redwoodjs/forms": "4.2.0",
    "@redwoodjs/router": "4.2.0",
    "@redwoodjs/web": "4.2.0",
    "framer-motion": "^6",
    "prop-types": "15.8.1",
...
  },
...
}

---

In case it helps clarify things, the PR we are currently commenting on bumps Chakra UI to V2 because we will be bumping to React 18 in Redwood v5 (#4992).

Currently there is no way to specify which version of a library to install via yarn rw setup ui <library>. If you want you can read up on this command here: https://redwoodjs.com/docs/cli-commands#setup-ui

If there was something missing in that document that you think others can benefit from, I encourage you to document it (can be done here: https://github.com/redwoodjs/redwood/blob/main/docs/docs/cli-commands.md#setup-ui).

If you want to explicitly set a version, please use yarn add similar to what is seen over at the manual section of the docs you referenced ( https://v1.chakra-ui.com/guides/getting-started/redwoodjs-guide#manual )

For example I modified their example slightly so that we pin chakra to v1. fwiw this is what #5614 does:

yarn add @chakra-ui/react^1 @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

---

Also while I get your comments are Chakra related, I think we are getting into unrelated territory to this PR.

Unless it is related to this PR, if you think something is broken; please open a separate issue and add additional references where necessary.