During our upgrade, we got blocked by v2.2.3 DOMException [SyntaxError]: '.disabled):not(:disabled)' is not a valid selector · Issue #81 · dperini/nwsapi · GitHub
Seems it’s related to Chakra UI + testing library, and it’s a dependency of jsdom library.
We changed our yarn.lock directly to use nwsapi 2.2.2 and its working now.
Hey @dom! Awesome upgrade guide.
After upgrading, I now get the following breaking error when running yarn rw dev:
I’m using a custom vite config so that I can use SSL in local dev (required for cross-site cookies). That config looks as follows:
Is this expected? I’ve tried running git clean -fxd && yarn but the error persists.
Thanks!
Hey @arimendelow, thanks for reporting—I can reproduce this on latest, and no it’s not expected. Let me take a closer look.
Update: I can fix this by changing commonjs to commonjs.default. Still looking for what changed when. Working on a fix here: fix(vite): import default from `vite-plugin-commonjs` by jtoar · Pull Request #8279 · redwoodjs/redwood · GitHub. It looks like this is new as of v5.1.0.
Hey @arimendelow I just released a patch, I test and resolved locally with @danny, but let us know if it works for you:
Worked like a charm 
Thank you for the super quick fix!!
Hello, upgrading from v4.4.2 and I unfortunately have already encountered an error at step 1 after running yarn rw upgrade:
Could not find the latest version
@dmasters19 that’s an odd one, I’ll try to reproduce on that version, but if you want to continue upgrading in the meantime all you have to do is update the version of the @redwoodjs/* packages in all the package.jsons (in the root, the api dir, and the web dir) to 5.1.2 (the latest version at this time) and then run yarn install.
@dom Thank you, I upgraded all my redwood packages as well as my react packages and my application starts succesfully.
I am now getting this error when trying to start storybook:
ModuleParseError: Module parse failed: parser.destructuringAssignmentPropertiesFor is not a function.
File was processed with these loaders: * …/node_modules/@redwoodjs/core/node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js * …/node_modules/@redwoodjs/core/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
TypeError: parser.destructuringAssignmentPropertiesFor is not a function
hi @dmasters19, if you don’t mind sharing the output from yarn why webpack, that might prove useful in helping figure out what is going on. also if you have webpack explicitly defined somewhere in your package.json will you please try something like "webpack": "^5.82.0"?. I am basing this logic off of quick research into the error I did.
@dom , I experience the same error.
If that command “yarn rw upgrade” executed under the corporate proxy , you might be able to re-produce it.
Thanks @bitshift. I do not have webpack explicitly defined in any of my package.json files. Here are the results of yarn why webpack:
├─ @redwoodjs/core@npm:5.1.2
│ └─ webpack@npm:5.82.0 [33535] (via npm:5.82.0 [33535])
│
├─ @storybook/builder-webpack4@npm:6.5.17-alpha.0
│ └─ webpack@npm:4.46.0 (via npm:4)
│
├─ @storybook/builder-webpack4@npm:6.5.17-alpha.0 [602bf]
│ └─ webpack@npm:4.46.0 [7cc3d] (via npm:4 [7cc3d])
│
├─ @storybook/builder-webpack5@npm:6.5.17-alpha.0
│ └─ webpack@npm:5.76.3 (via npm:^5.9.0)
│
├─ @storybook/builder-webpack5@npm:6.5.17-alpha.0 [bc674]
│ └─ webpack@npm:5.76.3 [5869e] (via npm:^5 [5869e])
│
├─ @storybook/core-common@npm:6.5.17-alpha.0
│ └─ webpack@npm:4.46.0 (via npm:4)
│
├─ @storybook/core-common@npm:6.5.17-alpha.0 [15eed]
│ └─ webpack@npm:4.46.0 [7cc3d] (via npm:4 [7cc3d])
│
├─ @storybook/core-common@npm:6.5.17-alpha.0 [d2a1d]
│ └─ webpack@npm:4.46.0 [7cc3d] (via npm:4 [7cc3d])
│
├─ @storybook/core-server@npm:6.5.17-alpha.0
│ └─ webpack@npm:4.46.0 (via npm:4)
│
├─ @storybook/core-server@npm:6.5.17-alpha.0 [c5ae5]
│ └─ webpack@npm:4.46.0 [7cc3d] (via npm:4 [7cc3d])
│
├─ @storybook/manager-webpack4@npm:6.5.17-alpha.0
│ └─ webpack@npm:4.46.0 (via npm:4)
│
├─ @storybook/manager-webpack4@npm:6.5.17-alpha.0 [602bf]
│ └─ webpack@npm:4.46.0 [7cc3d] (via npm:4 [7cc3d])
│
├─ @storybook/manager-webpack5@npm:6.5.17-alpha.0
│ └─ webpack@npm:5.76.3 (via npm:^5.9.0)
│
├─ @storybook/manager-webpack5@npm:6.5.17-alpha.0 [bc674]
│ └─ webpack@npm:5.76.3 [5869e] (via npm:^5 [5869e])
│
├─ @storybook/react@npm:6.5.17-alpha.0
│ └─ webpack@npm:5.76.3 (via npm:>=4.43.0 <6.0.0)
│
├─ @storybook/react@npm:6.5.17-alpha.0 [bc674]
│ └─ webpack@npm:5.76.3 [5869e] (via npm:^5 [5869e])
│
├─ @types/webpack@npm:5.28.1
│ └─ webpack@npm:5.76.3 [5869e] (via npm:^5 [5869e])
│
└─ babel-timing@npm:0.9.1
└─ webpack@npm:4.46.0 [7cc3d] (via npm:4 [7cc3d])
Edit:
Of note, even if I do then explicitly define "webpack": "^5.82.0" and yarn install, I still get the same error when starting storybook.
thanks, sorry you’re still running into this. let me check with the Storybook folks and see something I am not.
@dmasters19 would you be able to fill this issue I opened here? [Bug?]: can't start storybook on v5 · Issue #8299 · redwoodjs/redwood · GitHub
Mainly, the reproduction section—is there a story file you can isolate the bug to? Is this a stack trace in the browser or is it in the CLI when you run yarn rw sb? The more details the better
The rename-validate-with codemod did not work for me. Easy to fix with search and replace, but wanted to let y’all know.
Thanks for letting us know @arimendelow—would it be possible to DM me a file or a snippet it errored out on? Would like to debug and patch if possible
I did not upgrade to 5 till now as we do some fetches to our CMS directly and all the tests on web including a fetch are throwing this error. The error leads to a broken build pipeline.
PASS web web/src/components/Overview/OverviewTopHint/OverviewTopHint.test.tsx
//node_modules/jsdom/lib/jsdom/browser/Window.js:376
return idlUtils.wrapperForImpl(idlUtils.implForWrapper(window._document)._location);
^
TypeError: Cannot read properties of null (reading '_location')
at Window.get location [as location] (//node_modules/jsdom/lib/jsdom/browser/Window.js:376:79)
at FetchInterceptor.<anonymous> (//node_modules/@mswjs/interceptors/src/interceptors/fetch/index.ts:52:9)
at step (//node_modules/@mswjs/interceptors/lib/interceptors/fetch/index.js:59:23)
at Object.next (//node_modules/@mswjs/interceptors/lib/interceptors/fetch/index.js:40:53)
at fulfilled (//node_modules/@mswjs/interceptors/lib/interceptors/fetch/index.js:31:58)
Node.js v18.16.0
or as an image:
A search brought up this but I did not get how to apply it in my case:
This is my test
import { render } from '@redwoodjs/testing/web'
import OverviewTopHint from './OverviewTopHint'
describe('OverviewTopHint', () => {
// skip for now as the fetch throwns an error
it.skip('renders successfully', () => {
expect(() => {
render(<OverviewTopHint />)
}).not.toThrow()
})
})
I would appreciate ideas how to fix this. I already tried to mock fetch but it was not successful.
I have no idea how to fix it, but can you try if this changes anything, just curious:
import { render, waitFor } from '@redwoodjs/testing/web'
import OverviewTopHint from './OverviewTopHint'
describe('OverviewTopHint', () => {
// skip for now as the fetch throwns an error
it('renders successfully', () => {
expect(async () => {
await waitFor(() => {
render(<OverviewTopHint />)
})
}).not.toThrow()
})
})
Thanks for reporting @tilmannb, I’ll try a few things. Could you provide the contents of the OverviewTopHint component too so I could debug locally? (You can also DM me if you don’t want to share here)
@tilmannb the render function returns an object with an unmount property that you can destructure and try calling. Here’s the react testing library docs on it: API | Testing Library. And here’s an example:
import { render } from '@redwoodjs/testing/web'
import OverviewTopHint from './OverviewTopHint'
describe('OverviewTopHint', () => {
// skip for now as the fetch throwns an error
it.skip('renders successfully', () => {
expect(() => {
- render(<OverviewTopHint />)
+ const { unmount} = render(<OverviewTopHint />)
+ unmount()
}).not.toThrow()
})
})
@razzeee @dom Thanks for the ideas. Both suggestions show the same problem as before. 
Here is my reduced reproduction case:
import { useEffect } from 'react'
const FetchTest = () => {
useEffect(() => {
fetch('http://localhost/test' as 'RequestInfo | URL', {
method: 'GET',
headers: {
'content-type': 'application/json',
},
}).then(async (data) => {
const result = await data.json()
console.log(result)
})
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return (
<div>
<h2>{'FetchTest'}</h2>
<p>{'Find me in ./web/src/components/FetchTest/FetchTest.tsx'}</p>
</div>
)
}
export default FetchTest
import { render } from '@redwoodjs/testing/web'
import FetchTest from './FetchTest'
describe('FetchTest', () => {
it('renders successfully', () => {
expect(() => {
render(<FetchTest />)
}).not.toThrow()
})
})