cypress smoke tests fail out of the box

[sfatzinger]

Have you experienced this bug with the latest version of the template?

yes

Steps to Reproduce

• I created a new project using the grunge-stack template by running npx create-remix --template remix-run/grunge-stack
• I ran npx run validate
• The smoke tests fail both locally and in github actions

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        10.3.0                                                                         │
  │ Browser:        Electron 100 (headless)                                                        │
  │ Node Version:   v14.19.3 (/<redacted>/.nvm/versions/node/v14.19.3/bin/node)              │
  │ Specs:          1 found (smoke.cy.ts)                                                          │
  │ Searched:       cypress/e2e/**/*.cy.{js,jsx,ts,tsx}                                            │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                    
  Running:  smoke.cy.ts                                                                     (1 of 1)


  smoke tests
    1) should allow you to register and login
    2) should allow you to make a note


  0 passing (3s)
  2 failing

  1) smoke tests
       should allow you to register and login:
     Error: The following error originated from your application code, not from Cypress.

  > Hydration failed because the initial UI does not match what was rendered on the server.

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the `uncaught:exception` event.

https://on.cypress.io/uncaught-exception-from-application
      at throwOnHydrationMismatch (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:8993:17)
      at tryToClaimNextHydratableInstance (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:9014:15)
      at updateHostComponent (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:14184:13)
      at beginWork (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:15256:22)
      at HTMLUnknownElement.callCallback2 (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:3458:22)
      at Object.invokeGuardedCallbackDev (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:3483:24)
      at invokeGuardedCallback (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:3517:39)
      at beginWork$1 (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:19039:15)
      at performUnitOfWork (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:18475:20)
      at workLoopSync (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:18411:13)

  2) smoke tests
       should allow you to make a note:
     Error: The following error originated from your application code, not from Cypress.

  > Hydration failed because the initial UI does not match what was rendered on the server.

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the `uncaught:exception` event.

https://on.cypress.io/uncaught-exception-from-application
      at throwOnHydrationMismatch (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:8993:17)
      at tryToClaimNextHydratableInstance (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:9014:15)
      at updateHostComponent (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:14184:13)
      at beginWork (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:15256:22)
      at HTMLUnknownElement.callCallback2 (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:3458:22)
      at Object.invokeGuardedCallbackDev (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:3483:24)
      at invokeGuardedCallback (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:3517:39)
      at beginWork$1 (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:19039:15)
      at performUnitOfWork (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:18475:20)
      at workLoopSync (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:18411:13)

Expected Behavior

The cypress smoke tests should pass out of the box on a newly created project using the grunge-stack template

Actual Behavior

The cypress smoke tests fail out of the box

[mcansh]

ahhh! I forgot to update the type for the build when using the server-build import, I've fixed it upstream remix-run/remix#3743 - I'll try and get a patch out real quick otherwise you can patch it via patch-package in the interim

[mcansh]

this is also available on the "nightly" train which only contains this fix and a few ci related things - v0.0.0-nightly-f1e94b9-20220715 which you can use by updating all of your @remix-run dependencies or by creating a new project with npx create-remix@0.0.0-nightly-f1e94b9-20220715

[sfatzinger]

Thanks! After updating to the nightly build you pointed me at, tsc works correctly, but I'm getting this error running npm run dev now:

✓ Sandbox Started file watcher
Watching Remix app in development mode...
⚠️  Test routes enabled.
Done in 202ms.

✘ [ERROR] Could not resolve ".//<path>/cypress/support/test-routes/create-user.ts"

    browser-route-module:/<path>/cypress/support/test-routes/create-user.ts?browser:1:24:
      1 │ ...ult } from ".//<path>/...
        ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Build failed with 1 error:
browser-route-module:/<path>/cypress/support/test-routes/create-user.ts?browser:1:24: ERROR: Could not resolve ".//<path>/cypress/support/test-routes/create-user.ts"
💿 Built in 447ms

This also occurs creating a new project using the nightly build

[mcansh]

i’ve noticed that too, i’ll see if i can figure out what’s going on with that in a bit

[lukasalvarezdev]

This error happens whenever I try to update any remix project to React 18. For example, this happens too with the indie-stack, so maybe it is an error with Remix?

[mcansh]

i think it's more-so we're doing some path.join in the stacks which isn't resolving properly