[Bug?]: route is not a function

[razzeee]

What's not working?

I'm running into problems trying to upgrade to redwood 8.
Specifically, when running tests, they throw warnings when using routes and seem to not render correctly after that.

Error: Uncaught [TypeError: _router.routes.project is not a function]

As first mentioned in
https://community.redwoodjs.com/t/redwood-v8-0-0-upgrade-guide/7250/28?u=razzeee

How do we reproduce the bug?

1. Checkout https://github.com/razzeee/redwoodjs-repro-route-not-function
2. yarn
3. yarn rw test web
4. You should get errors/warnings in the log

The diff here, should be relevant, as that's the only change from current stock (new project) redwood razzeee/redwoodjs-repro-route-not-function@fe63140

What's your environment? (If it applies)

No response

Are you interested in working on this?

• I'm interested in working on this

[Philzen]

When i check out your repo and run yarn rw test, there are no warnings/errors whatsoever:

Determining test suites to run...
Running Prisma CLI...
$ yarn prisma db push --force-reset --accept-data-loss --schema ~/redwoodjs-repro-route-not-function/api/db/schema.prisma

Prisma schema loaded from api/db/schema.prisma
Datasource "db": SQLite database "test.db" at "file:~/redwoodjs-repro-route-not-function/.redwood/test.db"

The SQLite database "test.db" at "file:~/redwoodjs-repro-route-not-function/.redwood/test.db" was successfully reset.

🚀  Your database is now in sync with your Prisma schema. Done in 22ms

✔ Generated Prisma Client (v5.20.0) to ./node_modules/@prisma/client in 232ms

 PASS   api  api/src/directives/requireAuth/requireAuth.test.ts
 PASS   api  api/src/directives/skipAuth/skipAuth.test.ts
 PASS   web  web/src/components/ProjectCard/ProjectCard.test.tsx

Test Suites: 3 passed, 3 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        7.588 s
Ran all test suites in 2 projects.

Watch Usage: Press w to show more.

also running tests only for the web side with yarn rw test web seems fine:

 PASS   web  web/src/components/ProjectCard/ProjectCard.test.tsx
  ProjectCard
    ✓ renders successfully (68 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.26 s
Ran all test suites.

Watch Usage: Press w to show more.

🤔

One noteworthy thing though: when i run yarn to install the deps, i get a completely rewritten yarn.lock file.

-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@adobe/css-tools@^4.4.0":
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.4.1.tgz#2447a230bfe072c1659e6815129c03cf170710e3"
-  integrity sha512-12WG
+# This file is generated by running "yarn install" inside your project.
+# Manual changes might be lost - proceed with caution!
+
+__metadata:
+  version: 8
+  cacheKey: 10c0
+
+"@adobe/css-tools@npm:^4.4.0":
+  version: 4.4.1
+  resolution: "@adobe/css-tools@npm:4.4.1"
+  checksum: 
+10c0/1a68ad9af490f45fce7b6e50dd2d8ac0c546d74431649c0d42ee4ceb1a9fa057fae0a7ef1e148effa12d84ec00ed71869ebfe0fb1dcdcc80bfcb6048c12abcc0
+  languageName: node
+  linkType: hard

What's your output of yarn -v respectively yarn rw info?

[razzeee]

It seems like I've trimmed down the example too much and having the watcher running for the web tests did not correctly update. It's passing here too now.

Will rework this next week hopefully.

One thing to note, if I comment out the route

<Route path="/projects/{id:Int}" page={ProjectProjectPage} name="project" />

It seems very similar to the error I'm seeing in the real project.

[razzeee]

@Philzen can you check if razzeee/redwoodjs-repro-route-not-function@7feb8b0 breaks it for you?

[Philzen]

@razzeee The lockfile is still yarn v1. Can you kindly ensure this project is generated with yarn 4?

What's your output of yarn -v respectively yarn rw info?

Also, posting the output of yarn rw info (as the issue template explicitly asks for) is always a good thing ;)

[razzeee]

Updated the project to use yarn 4, doesn't change the problematic behavior.

  System:
    OS: Linux 6.12 Fedora Linux 41 (Workstation Edition)
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 20.16.0 - /tmp/xfs-3f621cc3/node
    Yarn: 4.6.0 - /tmp/xfs-3f621cc3/yarn
  Databases:
    SQLite: 3.46.1 - /usr/bin/sqlite3
  npmPackages:
    @redwoodjs/core: 8.4.2 => 8.4.2 
    @redwoodjs/project-config: 8.4.2 => 8.4.2 
  redwood.toml:
    [web]
      title = "Redwood App"
      port = 8910
      apiUrl = "/.redwood/functions" # You can customize graphql and dbauth urls individually too: see https://redwoodjs.com/docs/app-configuration-redwood-toml#api-paths
      includeEnvironmentVariables = [
        # Add any ENV vars that should be available to the web side to this array
        # See https://redwoodjs.com/docs/environment-variables#web
      ]
    [api]
      port = 8911
    [browser]
      open = true
    [notifications]
      versionUpdates = ["latest"]

[Philzen]

Thanks, now the good news is: i was able to reproduce it – the bad news is: i'm also not sure what's the root cause here. May be the reduced / conditional exports in v8... definitely seems like jest isn't picking up the generated AvailableRoutes. Adding the relevant stack trace here for further investigation:

    console.error
      The above error occurred in the <ProjectCard> component:
      
          at project (~/redwoodjs-repro-route-not-function/web/src/components/ProjectCard/ProjectCard.tsx:3:24)
          at MockParamsProvider (~/redwoodjs-repro-route-not-function/node_modules/@redwoodjs/testing/dist/web/MockParamsProvider.js:36:31)
          at LocationProvider (~/redwoodjs-repro-route-not-function/node_modules/@redwoodjs/router/dist/cjs/location.js:41:1)
          at GraphQLHooksProvider (~/redwoodjs-repro-route-not-function/node_modules/@redwoodjs/web/dist/cjs/components/GraphQLHooksProvider.js:76:13)
          at ErrorBoundary (~/redwoodjs-repro-route-not-function/node_modules/@redwoodjs/web/dist/cjs/apollo/index.js:163:1)
          at ApolloProvider (~/redwoodjs-repro-route-not-function/node_modules/@apollo/client/react/context/ApolloProvider.js:6:21)
          at ApolloProviderWithFetchConfig (~/redwoodjs-repro-route-not-function/node_modules/@redwoodjs/web/dist/cjs/apollo/index.js:55:42)
          at FetchConfigProvider (~/redwoodjs-repro-route-not-function/node_modules/@redwoodjs/web/dist/cjs/components/FetchConfigProvider.js:46:3)
          at RedwoodApolloProvider (~/redwoodjs-repro-route-not-function/node_modules/@redwoodjs/web/dist/cjs/apollo/index.js:173:3)
          at _HelmetProvider (~/redwoodjs-repro-route-not-function/node_modules/react-helmet-async/lib/index.js:483:5)
          at RedwoodProvider (~/redwoodjs-repro-route-not-function/node_modules/@redwoodjs/web/dist/cjs/components/RedwoodProvider.js:38:3)
          at MockProviders (~/redwoodjs-repro-route-not-function/node_modules/@redwoodjs/testing/dist/web/MockProviders.js:47:26)
          at wrapper

[Philzen]

Just for the lols i ran your project against the current main branch at dcfb077, which gives:

 FAIL   web  web/src/components/ProjectCard/ProjectCard.test.tsx
  ● Test suite failed to run

    TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')

    > 1 | import { Link, routes } from '@redwoodjs/router'
        |                                                 ^
      2 |
      3 | const ProjectCard = ({ project }: { project: { id: number } }) => {
      4 |   return <Link to={routes.project({ id: project.id })}>Test</Link>

      at web/node_modules/react/cjs/react-jsx-runtime.development.js:328:51
      at Object.<anonymous> (web/node_modules/react/cjs/react-jsx-runtime.development.js:1332:5)
      at Object.<anonymous> (web/node_modules/react/jsx-runtime.js:6:20)
      at Object.require (web/src/components/ProjectCard/ProjectCard.tsx:1:49)
      at Object.require (web/src/components/ProjectCard/ProjectCard.test.tsx:3:1)

@Tobbe do you have any theory what could be the culprit here?

[Philzen]

As it so happens, this started surfacing in my own project now as well. Shows up as red squiggles in VSCode and also in yarn rw typecheck – weirdly the same job finishes fine on our CI. On my project i'm juggling a lot of different branches and the issue sometimes suddenly surfaces in one branch and disappears in another although they all are on RW 8.4.2. Will continue to watch this closely.

My hunch is that it's some fringe case where typescript gets confused which type to resolve – it ends up in the the empty interface declaration of AvailableRoutes in @redwood/router instead of picking up the generated one with includes the correct routes in .redwood/types/includes/web-routerRoutes.d.ts.

[rapzo]

I can confirm this as well, but can't even reproduce it on a fresh project, only through upgrade.

[cdubz]

I've also just (seemingly randomly?) started experiencing this with RW 8.4.2. It has started after making unrelated updates to other packages with yarn. 🤔

Edit: Also, I just noticed there is an 8.4.4 tag so I tried yarn rw upgrade and after that ran the issue went away again.