Error occurs after fresh installation #171

brazenest · 2023-09-27T06:47:53Z

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

Yes

Steps to Reproduce

Run npx create-remix@latest --template remix-run/grunge-stack on Windows 11 with a valid project name, answering yes to all the prompts (automatic initialization of Git repo, automatic installation of npm dependencies, automatic execution of remix.init, automatic execution of "build/tests/etc").

Expected Behavior

Successful, error-free installation of grunge-stack.

Actual Behavior

An error occurs during execution of tests. Relevant portion of output from the procedure follows:

√ Sandbox File watcher now looking for project changes


DevTools listening on ws://127.0.0.1:53569/devtools/browser/374535f8-f14d-4629-b03f-ef43b0fce540
(node:14772) ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

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

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        12.17.3                                                                        │
  │ Browser:        Electron 106 (headless)                                                        │
  │ Node Version:   v20.7.0 (C:\Program Files\nodejs\node.exe)                                     │
  │ Specs:          1 found (smoke.cy.ts)                                                          │
  │ Searched:       cypress/e2e/**/*.cy.{js,jsx,ts,tsx}                                            │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

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


  smoke tests
[REMIX DEV] 3F852232 ready
    1) should allow you to register and login
[REMIX DEV] 3F852232 ready
! Warning: [eb94b313-cb38-445c-889b-0b56c11cc948] Timed out after hitting its 5s timeout!
! Warning: [4144f8e2-8ab5-4bf0-8b00-cadfeb503d9f] Timed out after hitting its 5s timeout!
    2) should allow you to make a note


  0 passing (15s)
  2 failing

  1) smoke tests
       should allow you to register and login:
     AssertionError: Timed out retrying after 4000ms: Unable to find an accessible element with the role "link" and name `/notes/i`

Here are the accessible roles:

  document:

  Name "":
  <body
    class="h-full"
  />

  --------------------------------------------------
  textbox:

  Name "Email address":
  <input
    aria-describedby="email-error"
    autocomplete="email"
    class="w-full rounded border border-gray-500 px-2 py-1 text-lg"
    id="email"
    name="email"
    required=""
    type="email"
  />

  --------------------------------------------------
  button:

  Name "Create Account":
  <button
    class="w-full rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:bg-blue-400"
    type="submit"
  />

  --------------------------------------------------
  link:

  Name "Log in":
  <a
    class="text-blue-500 underline"
    href="/login"
  />

  --------------------------------------------------

Ignored nodes: comments, script, style
<html
  class="h-full"
  lang="en"
>
  <head>
    <meta
      charset="utf-8"
    />
    <meta
      content="width=device-width,initial-scale=1"
      name="viewport"
    />
    <link
      href="/_static/favicon.ico"
      rel="icon"
    />
    <title>
      Sign Up
    </title>
    <link
      href="/_static/build/_assets/tailwind-TTAZ2KQD.css"
      rel="stylesheet"
    />
  </head>
  <body
    class="h-full"
  >
    <div
      class="flex min-h-full flex-col justify-center"
    >
      <div
        class="mx-auto w-full max-w-md px-8"
      >
        <form
          action="/join"
          class="space-y-6"
          method="post"
        >
          <div>
            <label
              class="block text-sm font-medium text-gray-700"
              for="email"
            >
              Email address
            </label>
            <div
              class="mt-1"
            >
              <input
                aria-describedby="email-error"
                autocomplete="email"
                class="w-full rounded border border-gray-500 px-2 py-1 text-lg"
                id="email"
                name="email"
                required=""
                type="email"
              />
            </div>
          </div>
          <div>
            <label
              class="block text-sm font-medium text-gray-700"
              for="password"
            >
              Password
            </label>
            <div
              class="mt-1"
            >
              <input
                aria-describedby="password-error"
                autocomplete="new-password"
                class="w-full rounded border border-gray-500 px-2 py-1 text-lg"
                id="password"
                name="password"
                type="password"
              />
            </div>
          </div>
          <input
            name="redirectTo"
            type="hidden"
            value=""
          />
          <button
            class="w-full rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:bg-blue-400"
            type="submit"
          >
            Create Account
          </button>
          <div
            class="flex items-center justify-center"
          >
            <div
              class="text-center text-sm text-gray-500"
            >
              Already have an account?

              <a
                class="text-blue-500 underline"
                href="/login"
              >
                Log in
              </a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </body>
</html>
      at Context.eval (webpack:///./cypress/e2e/smoke.cy.ts:14:0)

  2) smoke tests
       should allow you to make a note:
     CypressError: `cy.request()` failed on:

http://localhost:8811/__tests/create-user

The response we received from your web server was:

  > 500: Internal Server Error

This was considered a failure because the status code was not `2xx` or `3xx`.

If you do not want status codes to cause failures pass the option: `failOnStatusCode: false`

-----------------------------------------------------------

The request we sent was:

Method: POST
URL: http://localhost:8811/__tests/create-user
Headers: {
  "Connection": "keep-alive",
  "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Cypress/12.17.3 Chrome/106.0.5249.51 Electron/21.0.0 Safari/537.36",
  "accept": "*/*",
  "accept-encoding": "gzip, deflate",
  "content-type": "application/json",
  "content-length": 32
}
Body: {"email":"Myriam19@example.com"}

-----------------------------------------------------------

The response we got was:

Status: 500 - Internal Server Error
Headers: {
  "content-type": "text/html; charset=utf8;",
  "cache-control": "no-cache, no-store, must-revalidate, max-age=0, s-maxage=0",
  "date": "Wed, 27 Sep 2023 06:35:47 GMT",
  "connection": "keep-alive",
  "keep-alive": "timeout=5",
  "content-length": "1371"
}
Body: <head>
<style>
  body {
    font-family: sans-serif;
  }
  code, pre {
    font-family: monospace;
    color: #00c26e;
  }
</style>
<script>
  (() => {
    const url = 'ws://localhost:2223'
    let socket = new WebSocket(url)
    socket.addEventListener('message', message => {
      if (message.data === 'reload') location.reload()
    })
    socket.addEventListener('close', ({ wasClean }) => {
      const retryMs = 1000
      const cancelMs = 5000
      const maxAttempts = Math.round(cancelMs / retryMs)
      let attempts = 0
      const reloadIfCanConnect = () => {
        attempts++
        if (attempts > maxAttempts){
console.error('Could not reconnect to dev server.')
return
        }
        socket = new WebSocket(url)
        socket.addEventListener('error', () => {
setTimeout(reloadIfCanConnect, retryMs)
        })
        socket.addEventListener('open', () => {
if (!wasClean) {
  location.reload()
}
        })
      }
      reloadIfCanConnect()
    })
  })();
</script>
</head>

<h1>Lambda error</h1>
<h2>Error: Timeout error: <p>Lambda timed out after <b>5 seconds</b></p></h2>
<h3>Lambda: <code>@http any /*</code></h3>
<h3>Source: <code>C:\[path-to-project]\server</code></h3>
<p>: <p>Lambda timed out after <b>5 seconds</b></p></p>

<p>(No stack trace)</p>


https://on.cypress.io/request
      at <unknown> (http://localhost:8811/__cypress/runner/cypress_runner.js:149327:80)
      at tryCatcher (http://localhost:8811/__cypress/runner/cypress_runner.js:18744:23)
      at Promise._settlePromiseFromHandler (http://localhost:8811/__cypress/runner/cypress_runner.js:16679:31)
      at Promise._settlePromise (http://localhost:8811/__cypress/runner/cypress_runner.js:16736:18)
      at Promise._settlePromise0 (http://localhost:8811/__cypress/runner/cypress_runner.js:16781:10)
      at Promise._settlePromises (http://localhost:8811/__cypress/runner/cypress_runner.js:16861:18)
      at _drainQueueStep (http://localhost:8811/__cypress/runner/cypress_runner.js:13451:12)
      at _drainQueue (http://localhost:8811/__cypress/runner/cypress_runner.js:13444:9)
      at ../../node_modules/bluebird/js/release/async.js.Async._drainQueues (http://localhost:8811/__cypress/runner/cypress_runner.js:13460:5)
      at Async.drainQueues (http://localhost:8811/__cypress/runner/cypress_runner.js:13330:14)
  From Your Spec Code:
      at Context.login (webpack:///./cypress/support/commands.ts:4:0)



[REMIX DEV] 3F852232 ready

  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        2                                                                                │
  │ Passing:      0                                                                                │
  │ Failing:      2                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  2                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     15 seconds                                                                       │
  │ Spec Ran:     smoke.cy.ts                                                                      │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Screenshots)

  -  C:\[path-to-project]\cypress\screenshots\smoke.cy.t     (1280x720)
     s\smoke tests -- should allow you to register and login (failed).png
  -  C:\[path-to-project]\cypress\screenshots\smoke.cy.t     (1280x720)
     s\smoke tests -- should allow you to make a note (failed).png


  (Video)

  -  Started compressing: Compressing to 32 CRF
[REMIX DEV] 3F852232 ready
  -  Finished compressing: 1 second

  -  Video output: C:\[path-to-project]\cypress\videos\smoke.cy.ts.mp4


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

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ×  smoke.cy.ts                              00:15        2        -        2        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ×  1 of 1 failed (100%)                     00:15        2        -        2        -        -

[REMIX DEV] 3F852232 ready
Error: Command failed with exit code 2: npx cypress run
    at makeError (C:\[path-to-project]\node_modules\execa\lib\error.js:60:11)
    at handlePromise (C:\[path-to-project]\node_modules\execa\index.js:118:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  shortMessage: 'Command failed with exit code 2: npx cypress run',
  command: 'npx cypress run',
  escapedCommand: '"npx cypress run"',
  exitCode: 2,
  signal: undefined,
  signalDescription: undefined,
  stdout: undefined,
  stderr: undefined,
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false
}
ERROR: "test:e2e:run" exited with 1.

      ▲  Oh no! Template's remix.init script failed

The text was updated successfully, but these errors were encountered:

danielbush · 2023-10-12T06:16:58Z

I'm getting something similar. The cypress smokey tests failed as part of the remix.init script.

I got these 2 errors:

(1) should allow you to register and login:. AssertionError: Timed out retrying after 4000ms: Unable to find an accessible element with the role "link" and name /notes/i
(2) should allow you to make a note:. AssertionError: Timed out retrying after 4000ms: Unable to find an accessible element with the role "button" and name /delete/i

Second one is different.

This leaves the install in an incomplete state. I think a second commit should be made but it fails and git is left like this:

└> git status
On branch master
Changes not staged for commit:
  (use "git add/rm <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        deleted:    .eslintrc.repo.cjs
        deleted:    .github/ISSUE_TEMPLATE/bug_report.yml
        deleted:    .github/ISSUE_TEMPLATE/config.yml
        deleted:    .github/PULL_REQUEST_TEMPLATE.md
        deleted:    .github/dependabot.yml
        deleted:    .github/workflows/format-repo.yml
        deleted:    .github/workflows/lint-repo.yml
        deleted:    .github/workflows/no-response.yml
        modified:   .gitignore
        deleted:    LICENSE.md
        modified:   README.md
        modified:   app.arc
        modified:   package.json

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        package-lock.json
        remix.init/package-lock.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error occurs after fresh installation #171

Error occurs after fresh installation #171

brazenest commented Sep 27, 2023 •

edited

danielbush commented Oct 12, 2023

Error occurs after fresh installation #171

Error occurs after fresh installation #171

Comments

brazenest commented Sep 27, 2023 • edited

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

Steps to Reproduce

Expected Behavior

Actual Behavior

danielbush commented Oct 12, 2023

brazenest commented Sep 27, 2023 •

edited