"Uncaught Error: Function components cannot have string refs" when adding a "?ref=xyz" param to the base url

[ronatory]

Seems to be easy reproducible. Just create a new redwood project and start the dev server via yarn rw dev and then add to the base url a ref parameter like this -> http://localhost:8910?ref=example. Then the error in the title will occur -> Uncaught Error: Function components cannot have string refs

[KrisCoulson]

I just took a look into it.

I think we spread all the params and ref is being passed as a string

redwood/packages/router/src/router.tsx

Line 101 in 230f79d

const allParams = { ...searchParams, ...pathParams }

redwood/packages/router/src/router.tsx

Line 118 in 230f79d

return <Page {...allParams} />

[jtoar]

@KrisCoulson Nice, that looks like what's happening indeed. I haven't thought about it much yet, but a solution that comes immediately to mind is renaming ref to something else. Is that too superficial?

[arioberek]

Same error here, running in production environment. In my case I can't control this URL param, it's inserted right after it's accessed from other URL, is there a workaround for this scenario?

[jtoar]

@arrbrk1 I'll prioritize getting feedback on #5537, in the meantime, your best option is to use yarn patch to update the dist file. You can watch me do it in this video:

ref-patch.mp4

Or read along below. In your Redwood project:

yarn patch @redwoodjs/router
# ...
code /the/path/yarn/gave/you

Once you've opened the directory yarn gave you, navigate to the utils.js file. Replace that file with this one: https://gist.github.com/jtoar/06d45adcec70a12a2cafbe09ee4dbb01. Then run:

yarn patch-commit -s /the/path/yarn/gave/you

Very important: make sure all versions of your redwoodjs packages are pinned to v2.2.3 (or whatever version you're using). Pinned means no caret (^). Then:

yarn install
git add .
git commit -m "patch router"

Make sure it's fixed locally, then redeploy. (And when the patch comes out, undo all of that.)

[arioberek]

It worked, thank you! :)

[jtoar]

@arrbrk1 the patch with the fix just went out: https://github.com/redwoodjs/redwood/releases/tag/v2.2.4. When you upgrade be sure to get rid of the yarn patch file, or at least change the resolution so that it's just 2.2.4.

[ronatory]

Hello @jtoar I just upgraded to v3.0.0 and the error still occurs when doing the same steps as written in my first comment

[Tobbe]

@ronatory I tried to reproduce, but I couldn't.

Seems to work fine.

Just had to do yarn create redwood-app and then yarn rw dev, right?

[ronatory]

@Tobbe thanks for checking. I just didn't upgraded correctly to v3.0.0. Now I did and everything works fine 🎉