Redwood v6.0.0 Upgrade Guide

dthyresson · July 19, 2023, 8:12pm

Hi. Do you see any difference if you also include:

credentials: true

As an option ?

mat · July 19, 2023, 8:13pm

no difference

dom · July 19, 2023, 11:22pm

I can reproduce this, thanks!

Update: @mat I think I’ve figured this one out and it seems to be a regression in @what-wg/node-fetch: CORS Preflight requests aren't resolving · Issue #703 · ardatan/whatwg-node · GitHub.

Tobbe · July 20, 2023, 3:10pm

@fmiranda It’s not possible to directly create a v6 RC project. But you can create a canary project. It’s v6 + initial work on v6.1 and v7. It’s more unstable, but works most of the time

Just run npx create-redwood-app@canary ~/tmp/rw-npx-canary

Or, to bypass all prompts and go with the defaults (TS project with git initialized)

npx -y create-redwood-app@canary -y ~/tmp/rw-npx-canary

dom · July 20, 2023, 6:56pm

@mat things are work locally for me now that there’s a new version of @whatwg-node/node-fetch (v0.4.11) out. You may have to redo your yarn.lock file to get it because none of Redwood’s packages depend on it directly.

In your project, if you run yarn why @whatwg-node/node-fetch, you should get ~three versions:

├─ @whatwg-node/fetch@npm:0.8.8
│  └─ @whatwg-node/node-fetch@npm:0.3.6 (via npm:^0.3.6)
│
├─ @whatwg-node/fetch@npm:0.9.7
│  └─ @whatwg-node/node-fetch@npm:0.4.11 (via npm:^0.4.6)
│
└─ @whatwg-node/fetch@npm:0.9.9
   └─ @whatwg-node/node-fetch@npm:0.4.11 (via npm:^0.4.8)

If you don’t see those two 0.4.11s, could you rebuild your lock file (i.e. delete it and yarn install) and see if that fixes things for you?

fmiranda · July 20, 2023, 6:57pm

Hi guys, thanks for the answers! I think I’m going to wait for the official release of 6.0. I’m curious about 6.0 but the last stable release works perfectly fine.
Thanks!

dom · July 20, 2023, 8:35pm

@razzeee, @danny shared this with me—we do have new recommendations for custom fonts with Vite that should make them play well with Storybook:

github.com

redwoodjs/redwood/blob/main/docs/docs/assets-and-files.md#custom-fonts

---
description: How to include assets—like images—in your app
---

# Assets and Files

There are two ways to add an asset to your Redwood app:

1. co-locate it with the component using it and import it into the component as if it were code
2. add it to the `web/public` directory and reference it relative to your site's root

Where possible, prefer the first strategy.

It lets Vite include the asset in the bundle when the file is small enough.

### Co-locating and Importing Assets

Let's say you want to show your app's logo in your `Header` component.
First, add your logo to the `Header` component's directory:

This file has been truncated. show original

dom · July 20, 2023, 8:38pm

Thanks for reporting this, the latest RC has a fix for this:

github.com/redwoodjs/redwood

fix(graphql-server): Allow correct context behaviour in testing

redwoodjs:main ← redwoodjs:jgmw-graphql-server/context-in-tests

opened 12:33AM - 18 Jul 23 UTC

Josh-Walker-GM

+118 -63

**Problem** The v6 RC has shown that during tests the context was not behaving …correctly after our modifications to request context isolation. As a result of our changes the context object would always be an empty object during testing. This was only the case during testing. In standard operation the context was isolated as expected. **Changes** This PR introduces three changes: 1. Fixes a slight error in the file ignore regex for the framework sync tool. This was preventing the `testing` package from being synced. 2. This removes the recently added changes to the directive testing helper function which used async local storage to ensure context was behaving correctly during such testing. 3. Adds a `beforeEach` that is applied to every redwood project test that mocks out the returned value of `getAsyncStoreInstance`. This returned value is mocked to ensure that a new, empty, context is received during each individual test. **Outstanding** 1. Validate the context is still correctly isolated in production - just as a super precaution. 2. Clear the spy I created in the `beforeEach` - be a good jest citizen? **Notes** 1. I'm not sure of the performance implications that change will have on massive test suites. I don't have such a test project to benchmark with. I believe it is likely better to have tests with the correct behaviour than faster tests. 2. I flip-flopped slightly on the mocked return value of `getAsyncStoreInstance().getStore`. I think returning an object which is lacking the full functionality will ensure that should we reach for this behaviour in the future then we will be aware it may not work as expected without further changes. 3. A smarter or more determined person might have been able to keep the `getAsyncStoreInstance` function in the file it was original in. Right now I could only get it to work by putting it in its own file.

mat · July 22, 2023, 4:11pm

Works perfectly now, thanks!

razzeee · July 24, 2023, 2:50pm

Context seems fin now, but I can’t get the font to work.

Presumably the relative path doesn’t work, not sure why. If I set it with public I can see the browser trying to actually access it in a folder named public.

QuinnsCode · July 26, 2023, 12:01am

Just did the upgrade from v4 to v5 and now looking at going v5 to v6.

Hit a snag going from v5 to v6 where it looks like I either deleted out the tailwind config or it got reset on the v4 to v5 or v5 to v6 jump.
Either way, now that there are some .jsx extensions (as per moving from v5 to v6), I had to update the tailwind.config.css to include those in case anyone else hit this snag:

Before:

After:

tailwind.config.css before:

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

updated to:

module.exports = {
  content: ['./src/*.{js,jsx}', './src/**/*.{js,jsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

dom · July 26, 2023, 2:13am

Thanks @QuinnsCode! I’ll see if I can add that step to a codemod; if not I’ll update the guide to include it.

noire.munich · July 27, 2023, 12:37pm

Just ran the upgrade, I am seeing this.

My other models should fail first, any chance Subscription would be a reserved name?

dthyresson · July 27, 2023, 2:09pm

With v6, real-time adds GraphQL subscription support and as it tries to validate your type needs a directive.

We should test if other GraphQL operations would fail similarly if you defined a mode called Query or Mutation or Client for example.

Could you write up an issue for this as will either want to handle better, give a friendlier message and or document reserved types.

sean-ac · July 31, 2023, 1:32pm

I’m getting an error with storybook and TypeScript… even if I start a new app from scratch:

$ node --version
v18.16.0
$ yarn --version
1.22.19
$ yarn create redwood-app --typescript ./testrw
$ cd testrw
$ yarn rw tc
... no errors
$ yarn rw g page MyTest
$ yarn rw tc
src/pages/MyTestPage/MyTestPage.stories.tsx:1:37 - error TS2307: Cannot find module '@storybook/react' or its corresponding type declarations.

1 import type { Meta, StoryObj } from '@storybook/react'
                                      ~~~~~~~~~~~~~~~~~~


Found 1 error in src/pages/MyTestPage/MyTestPage.stories.tsx:1

EDIT: fixed via:

$ yarn workspace web add -D @storybook/react
$ yarn rw tc

Seems like a dependency is missing somewhere in the default install…?

Josh-Walker-GM · July 31, 2023, 2:04pm

Hey @sean-ac sorry about that! We recently changed the CLI to lazy install storybook so that it’s not installed by default but when you first run a storybook command it is installed automatically for you. Looks like we might have missed this issue. I’ll take a look today, thanks!

jonoc330 · August 3, 2023, 1:07am

I noticed people are saying this all works fine now but we are running 6.0.2 and still seeing this as broken.

Entelechy · August 3, 2023, 4:19am

I am also seeing this around services named Subscription. Is there a workaround? All directives appear to be correctly implemented.

dthyresson · August 3, 2023, 2:42pm

Hi. An issue [Bug?]: v6 doesn't allow for a Subscription sdl type. · Issue #8988 · redwoodjs/redwood · GitHub is written up for this and I’ll have a look.

I think any model/type name Query or Mutation in your schema might fail, too.

Josh-Walker-GM · August 3, 2023, 3:50pm

Hey @jonoc330, could you share a little more information about the issue that still persists? Do all your API tests that deal with context fail or only some? Would you be able to share a small example of a failure?

Prior to the changes we made in v6 the context was not isolated between tests but now every new test has a clean context. This is more in keeping with a real redwood request which itself has an isolated context. This does however mean that if you want some value in the context across various tests you’ll have to update the initial context every time. This cannot be done in a beforeAll.