Redwood v8.0.0 Upgrade Guide

Hey @QuinnsCode! Sorry about the typo in the upgrade guide - I’ve corrected it now. It should be the same commands as before yarn rw exp setup-....

I see the unknown with yarn rw --version now too. Strange I’ll try find some time to look into this later today/tomorrow.

1 Like

Hi im seeing this error after upgrading to v8.

[commonjs--resolver] Missing "./dist/toast" specifier in "@redwoodjs/web" package
    at e (file:///Users/henghonglee/fortune/fortune-app-rw/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:45937:25)
    at n (file:///Users/henghonglee/fortune/fortune-app-rw/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:45937:627)
    at o (file:///Users/henghonglee/fortune/fortune-app-rw/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:45937:1297)
    at resolveExportsOrImports (file:///Users/henghonglee/fortune/fortune-app-rw/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:46558:18)
    at resolveDeepImport (file:///Users/henghonglee/fortune/fortune-app-rw/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:46581:25)
    at tryNodeResolve (file:///Users/henghonglee/fortune/fortune-app-rw/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:46346:16)
    at Object.resolveId (file:///Users/henghonglee/fortune/fortune-app-rw/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:46096:19)
    at file:///Users/henghonglee/fortune/fortune-app-rw/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:19918:40
    at async PluginDriver.hookFirstAndGetPlugin (file:///Users/henghonglee/fortune/fortune-app-rw/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:19818:28)
    at async resolveId (file:///Users/henghonglee/fortune/fortune-app-rw/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:18509:26)
    at async ModuleLoader.resolveId (file:///Users/henghonglee/fortune/fortune-app-rw/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:18912:15)
    at async Object.resolveId (file:///Users/henghonglee/fortune/fortune-app-rw/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:12833:10)
    at async PluginDriver.hookFirstAndGetPlugin (file:///Users/henghonglee/fortune/fortune-app-rw/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:19818:28)
    at async resolveId (file:///Users/henghonglee/fortune/fortune-app-rw/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:18509:26)
    at async ModuleLoader.resolveId (file:///Users/henghonglee/fortune/fortune-app-rw/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:18912:15)
    at async file:///Users/henghonglee/fortune/fortune-app-rw/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:19215:50 {

tried importing a bunch of other seemingly related packages to the package.json file but doesnt seem to make this issue go away.
also tried deleting node_modules and dist and rebuilding. same errors

Hey @mat! I’ll loop in some help on that error since that’s not my area of strength. I’ll likely have to work on a reproduction as the first step. But no ideas come to my mind right away sorry!

Hey @henghonglee-menyala :wave:

Does you error go away if instead of doing:

import { Toast } from '@redwoodjs/web/dist/toast'

you instead don’t use the dist in the import and do:

import { Toast } from '@redwoodjs/web'

Something may be off in the eslint config for javascript in the 8.0 release. If i initialize a new 8.0 project, and open App.jsx (just one of many examples) in VS Code, I see an error on line 9:

"Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (9:2)eslint"

If I init a new 7.7.4 project (via npx create-redwood-app@7.7.4 ./rw-seven) and open the same App.jsx, I do not see this error. Again, this may be specific to choosing javascript vs typescript. Has something maybe changed in the the redwood eslint plugin?

1 Like

How are we supposed to import this now?

import { DevFatalErrorPage } from '@redwoodjs/web/dist/components/DevFatalErrorPage'

1 Like

Tests also seem unhappy about routes?

<Link to={routes.project({ id: project.id })}>
...
 Error: Uncaught [TypeError: _router.routes.project is not a function]
1 Like

You can continue to use that existing import for the DevFatalErrorPage. I’ll update the guide to be more accurate that some imports still remain.

I can reproduce this. I’ve created a GitHub issue to track and I’ll work on this today. [Bug]: Linting fails on v8.0.0 javascript projects · Issue #11457 · redwoodjs/redwood · GitHub

Having a bit of fun with the new setup and hitting some snags

yarn create redwood-app Version8Test --typescript
cd Version8Test
yarn rw dev

I see it start up the redwood starter home page so things seems to working on first glance for v8.

Then go to upgrade to SSR+RSC

yarn rw exp setup-streaming-ssr --force

Overwrite entry.client.tsx (y)

It seemed to not like me already having a tsconfig in the web side, but also failed when I removed/renamed the existing tsconfig so I had to use the --force flag. Otherwise I get this:

yarn rw exp setup-streaming-ssr
✔ Check prerequisites
✔ Adding config to redwood.toml...
✔ Adding entry.client.tsx...
✔ Adding entry.server.tsx...
✔ Adding Document.tsx...
✖ /Users/ryanquinn/Documents/projects/Version8Test/Version8Test/web/tsconfig.json already exists.
◼ Adding resolution for "@apollo/client-react-streaming/superjson"
◼ Adding required web packages...
/Users/ryanquinn/Documents/projects/Version8Test/Version8Test/web/tsconfig.json already exists.
yarn rw exp setup-rsc

then when I go to do:

yarn rw build -v && yarn rw serve

I am getting the error about failed to resolve import from ‘react-server-dom-webpack’. I am not sure if that should still be there with the move to Vite. It is used in that RscRoutes.js so I could not just pluck out the import from there.

[COMPLETED] Generating Prisma Client...
[STARTED] Verifying graphql schema...
[COMPLETED] Verifying graphql schema...
[STARTED] Building API...
[COMPLETED] Building API...
[STARTED] Building Web...


1. rscBuildAnalyze
==================

node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[vite]: Rollup failed to resolve import "react-server-dom-webpack/client" from "/Users/ryanquinn/Documents/projects/Version8Test/Version8Test/node_modules/@redwoodjs/router/dist/rsc/RscRoutes.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at viteWarn (file:///Users/ryanquinn/Documents/projects/Version8Test/Version8Test/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:65471:17)
    at Object.onWarn [as onwarn] (file:///Users/ryanquinn/Documents/projects/Version8Test/Version8Test/node_modules/@redwoodjs/vite/dist/lib/onWarn.js:8:3)
    at onwarn (/Users/ryanquinn/Documents/projects/Version8Test/Version8Test/node_modules/@vitejs/plugin-react/dist/index.cjs:272:40)
    at onRollupWarning (file:///Users/ryanquinn/Documents/projects/Version8Test/Version8Test/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:65501:5)
    at onwarn (file:///Users/ryanquinn/Documents/projects/Version8Test/Version8Test/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:65166:7)
    at file:///Users/ryanquinn/Documents/projects/Version8Test/Version8Test/node_modules/rollup/dist/es/shared/node-entry.js:18668:13
    at Object.logger [as onLog] (file:///Users/ryanquinn/Documents/projects/Version8Test/Version8Test/node_modules/rollup/dist/es/shared/node-entry.js:20306:9)
    at ModuleLoader.handleInvalidResolvedId (file:///Users/ryanquinn/Documents/projects/Version8Test/Version8Test/node_modules/rollup/dist/es/shared/node-entry.js:19257:26)
    at file:///Users/ryanquinn/Documents/projects/Version8Test/Version8Test/node_modules/rollup/dist/es/shared/node-entry.js:19215:26 {
  watchFiles: [
    ...
...
  ]
}

Node.js v20.10.0
[FAILED] Command failed with exit code 1: node /Users/ryanquinn/Documents/projects/Version8Test/Version8Test/node_modules/@redwoodjs/vite/bins/rw-vite-build.mjs --webDir="/Users/ryanquinn/Documents/projects/Version8Test/Version8Test/web" --verbose=true
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Error: Command failed with exit code 1: node /Users/ryanquinn/Documents/projects/Version8Test/Version8Test/node_modules/@redwoodjs/vite/bins/rw-vite-build.mjs --webDir="/Users/ryanquinn/Documents/projects/Version8Test/Version8Test/web" --verbose=true
    at makeError (/Users/ryanquinn/Documents/projects/Version8Test/Version8Test/node_modules/execa/lib/error.js:60:11)
    at handlePromise (/Users/ryanquinn/Documents/projects/Version8Test/Version8Test/node_modules/execa/index.js:118:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async _Task.task [as taskFn] (/Users/ryanquinn/Documents/projects/Version8Test/Version8Test/node_modules/@redwoodjs/cli/dist/commands/buildHandler.js:112:9)
    at async _Task.run (/Users/ryanquinn/Documents/projects/Version8Test/Version8Test/node_modules/listr2/dist/index.cjs:2049:11)

I tried the normal games of yarn cache clean, delete node_modules and redo yarn install, delete yarn.lock and node_modules and yarn install.

Steps to reproduce:
Node: v20.10.0
Yarn: v4.4.0

yarn create redwood-app Version8Test --typescript
cd Version8Test
yarn rw exp setup-streaming-ssr --force
yarn rw exp setup-rsc
yarn rw build -v && yarn rw serve
1 Like

Hello! I’m having some trouble using SSR on a brand new Redwood app.

Repro steps

  1. Setup new app, yarn create redwood-app my-redwood-project, yarn
  2. Add SSR experimental feature yarn rw exp setup-streaming-ssr -f
  3. Run using yarn rw dev

When running I see the following in my browser when navigating to http://localhost:8910/

Error: 404 handling not implemented
    at file:///Users/ryandushane/Code/diagon/my-redwood-project/node_modules/@redwoodjs/vite/dist/streaming/createReactStreamingHandler.js:75:13

Additionally, I’m getting some TS errors

➜  my-redwood-project git:(main) ✗ yarn rw dev
✔ Generating the Prisma client...
web | Error: The following dependencies are imported but could not be resolved:
web | 
web |   src/pages/FatalErrorPage (imported by /Users/ryandushane/Code/diagon/my-redwood-project/web/src/App.tsx)
web | 
web | Are they installed?
web |     at file:///Users/ryandushane/Code/diagon/my-redwood-project/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:50548:15
web |     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
web |     at async file:///Users/ryandushane/Code/diagon/my-redwood-project/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:50053:26
gen | Generating full TypeScript definitions and GraphQL schemas
web | Started server on http://localhost:8910
gen | Done.

Is there some configuration I’m missing here?

4 Likes

I haven’t been able to produce this issue.

I tried a basic setup with:

const HomePage = () => {
  return (
    <>
      <Link to={routes.pageWithParam({ param: 'test' })}>
        Page with param: test
      </Link>
      <hr />
      <BlogPostsCell />
    </>
  )
}
const PageWithParamPage = ({ param }: { param: string }) => {
  return (
    <>
      <h1>PageWithParamPage</h1>
      <p>Param: {param} </p>
    </>
  )
}
...
<Route path="/with-param/{param:String}" page={PageWithParamPage} name="pageWithParam" />
...
describe('HomePage', () => {
  it('renders successfully', () => {
    expect(() => {
      render(<HomePage />)
    }).not.toThrow()
  })
})

Does running yarn rw g types help at all? Any recommendations on reproducing this?

Hey there!

Just upgraded to Redwood v8, and I use Auth0 for authentication.

Things work normally locally, but in the dev environment, I get an error that says “ReferenceError: global is not defined”, which appears to occur in a function called createAuthImplementation()… which I believe is located here: redwood/packages/auth-providers/auth0/web/src/auth0.ts

I suspect that the use of global in the above function should in fact be globalThis? Or maybe this is a big ol’ red herring and the problem is elsewhere?

Has anyone encountered this? Or, does anyone have any suggestions of how to eliminate the error?

2 Likes

Here’s some screen shots of what is occurring:


…as you can see, there’s a line inside a function called createAuthImplementation(auth0Client) where the error is occurring, which makes me think it’s specifically an issue with Redwood’s Auth0 package.

As far as steps to reproduce, I suppose the bare minimum would be to spin up a new Redwood JS project using v8, and set up Auth0 per the docs, and then this would happen (although, to be clear, my project has been in the works for over a year and Auth0 has been working properly, and this has only just occurred after having upgraded to Redwood V8).

If helpful, I’ve tried toying with versions of node and yarn but haven’t been successful.

Most recently attempted to deploy via FlightControl using yarn 4.4.0, Nixpacks 1.28.1, Node 20, and this “global is not defined” error persists.

Hey @nullsett :wave: Thanks for reporting this and giving more information. I’ve just managed to reproduce this with the minimal redwodod+auth0 setup. I see this happen not for yarn rw dev but I do see it with yarn rw serve. I’ll look into a getting a fix for it now.

Brilliant! Thanks so much @Josh-Walker-GM , I appreciate it!

1 Like

Would you be able to confirm that v8.1.1 that was just released fixes this problem for you?

1 Like

This should be fixed in v8.1.0 if you’re able to confirm that it works for you now?

My man! Yup, just upgraded to 8.1.1, that appears to have done the trick.

Thanks again!

1 Like