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":"[email protected]"}

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

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

Loading

danielbush commented Oct 12, 2023

Error occurs after fresh installation #171

Error occurs after fresh installation #171

Comments

brazenest commented Sep 27, 2023 • edited Loading

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

Loading