remix-run / blues-stack Goto Github PK

View Code? Open in Web Editor NEW

946.0 24.0 233.0 1.07 MB

The Remix Stack for deploying to Fly with PostgreSQL, authentication, testing, linting, formatting, etc.

Home Page: https://remix.run/stacks

License: MIT License

Dockerfile 1.59% TypeScript 81.10% JavaScript 17.22% CSS 0.09%

remix-stack

blues-stack's Introduction

Remix Blues Stack

Learn more about Remix Stacks.

npx create-remix@latest --template remix-run/blues-stack

What's in the stack

Multi-region Fly app deployment with Docker
Multi-region Fly PostgreSQL Cluster
Healthcheck endpoint for Fly backups region fallbacks
GitHub Actions for deploy on merge to production and staging environments
Email/Password Authentication with cookie-based sessions
Database ORM with Prisma
Styling with Tailwind
End-to-end testing with Cypress
Local third party request mocking with MSW
Unit testing with Vitest and Testing Library
Code formatting with Prettier
Linting with ESLint
Static Types with TypeScript

Not a fan of bits of the stack? Fork it, change it, and use npx create-remix --template your/repo! Make it your own.

Quickstart

Click this button to create a Gitpod workspace with the project set up, Postgres started, and Fly pre-installed

Development

First run this stack's remix.init script and commit the changes it makes to your project.

npx remix init
git init # if you haven't already
git add .
git commit -m "Initialize project"

Start the Postgres Database in Docker:
```
npm run docker
```
Note: The npm script will complete while Docker sets up the container in the background. Ensure that Docker has finished and your container is running before proceeding.
Initial setup:
```
npm run setup
```
Run the first build:
```
npm run build
```
Start dev server:
```
npm run dev
```

This starts your app in development mode, rebuilding assets on file changes.

The database seed script creates a new user with some data you can use to get started:

Email: [email protected]
Password: racheliscool

If you'd prefer not to use Docker, you can also use Fly's Wireguard VPN to connect to a development database (or even your production database). You can find the instructions to set up Wireguard here, and the instructions for creating a development database here.

Relevant code:

This is a pretty simple note-taking app, but it's a good example of how you can build a full stack app with Prisma and Remix. The main functionality is creating users, logging in and out, and creating and deleting notes.

creating users, and logging in and out ./app/models/user.server.ts
user sessions, and verifying them ./app/session.server.ts
creating, and deleting notes ./app/models/note.server.ts

Deployment

This Remix Stack comes with two GitHub Actions that handle automatically deploying your app to production and staging environments.

Prior to your first deployment, you'll need to do a few things:

Install Fly
Sign up and log in to Fly
```
fly auth signup
```
Note: If you have more than one Fly account, ensure that you are signed into the same account in the Fly CLI as you are in the browser. In your terminal, run fly auth whoami and ensure the email matches the Fly account signed into the browser.
Create two apps on Fly, one for staging and one for production:
```
fly apps create blues-stack-template
fly apps create blues-stack-template-staging
```
Note: Once you've successfully created an app, double-check the fly.toml file to ensure that the app key is the name of the production app you created. This Stack automatically appends a unique suffix at init which may not match the apps you created on Fly. You will likely see 404 errors in your Github Actions CI logs if you have this mismatch.
Initialize Git.
```
git init
```
Create a new GitHub Repository, and then add it as the remote for your project. Do not push your app yet!
```
git remote add origin <ORIGIN_URL>
```
Add a FLY_API_TOKEN to your GitHub repo. To do this, go to your user settings on Fly and create a new token, then add it to your repo secrets with the name FLY_API_TOKEN.
Add a SESSION_SECRET to your fly app secrets, to do this you can run the following commands:
```
fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app blues-stack-template
fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app blues-stack-template-staging
```
Note: When creating the staging secret, you may get a warning from the Fly CLI that looks like this:
```
WARN app flag 'blues-stack-template-staging' does not match app name in config file 'blues-stack-template'
```
This simply means that the current directory contains a config that references the production app we created in the first step. Ignore this warning and proceed to create the secret.
If you don't have openssl installed, you can also use 1password to generate a random secret, just replace $(openssl rand -hex 32) with the generated secret.

Create a database for both your staging and production environments. Run the following:

fly postgres create --name blues-stack-template-db
fly postgres attach --app blues-stack-template blues-stack-template-db

fly postgres create --name blues-stack-template-staging-db
fly postgres attach --app blues-stack-template-staging blues-stack-template-staging-db

Note: You'll get the same warning for the same reason when attaching the staging database that you did in the fly set secret step above. No worries. Proceed!

Fly will take care of setting the DATABASE_URL secret for you.

Now that everything is set up you can commit and push your changes to your repo. Every commit to your main branch will trigger a deployment to your production environment, and every commit to your dev branch will trigger a deployment to your staging environment.

If you run into any issues deploying to Fly, make sure you've followed all of the steps above and if you have, then post as many details about your deployment (including your app name) to the Fly support community. They're normally pretty responsive over there and hopefully can help resolve any of your deployment issues and questions.

Multi-region deploys

Once you have your site and database running in a single region, you can add more regions by following Fly's Scaling and Multi-region PostgreSQL docs.

Make certain to set a PRIMARY_REGION environment variable for your app. You can use [env] config in the fly.toml to set that to the region you want to use as the primary region for both your app and database.

Testing your app in other regions

Install the ModHeader browser extension (or something similar) and use it to load your app with the header fly-prefer-region set to the region name you would like to test.

You can check the x-fly-region header on the response to know which region your request was handled by.

GitHub Actions

We use GitHub Actions for continuous integration and deployment. Anything that gets into the main branch will be deployed to production after running tests/build/etc. Anything in the dev branch will be deployed to staging.

Testing

Cypress

We use Cypress for our End-to-End tests in this project. You'll find those in the cypress directory. As you make changes, add to an existing file or create a new file in the cypress/e2e directory to test your changes.

We use @testing-library/cypress for selecting elements on the page semantically.

To run these tests in development, run npm run test:e2e:dev which will start the dev server for the app as well as the Cypress client. Make sure the database is running in docker as described above.

We have a utility for testing authenticated features without having to go through the login flow:

cy.login();
// you are now logged in as a new user

We also have a utility to auto-delete the user at the end of your test. Just make sure to add this in each test file:

afterEach(() => {
  cy.cleanupUser();
});

That way, we can keep your local db clean and keep your tests isolated from one another.

Vitest

For lower level tests of utilities and individual components, we use vitest. We have DOM-specific assertion helpers via @testing-library/jest-dom.

Type Checking

This project uses TypeScript. It's recommended to get TypeScript set up for your editor to get a really great in-editor experience with type checking and auto-complete. To run type checking across the whole project, run npm run typecheck.

Linting

This project uses ESLint for linting. That is configured in .eslintrc.js.

Formatting

We use Prettier for auto-formatting in this project. It's recommended to install an editor plugin (like the VSCode Prettier plugin) to get auto-formatting on save. There's also a npm run format script you can run to format all files in the project.

blues-stack's People

Contributors

Stargazers

Watchers

Forkers

michaeldeboey sync alaadahmed liviuzachin m0nsta sys13 blaccsmith kokoapps isabella232 dkolba jun-ian lionhat-collective ousmane-haidara shaunstanislauslau benmch cmgus christophertrudel inscist uiforks na2hiro nyoung697 luisorbaiceta bmorelax connor11528 ricardoalmeida darioielardi efflam smerchek fusilier-farms msutkowski manoj016 devdevdany kazungusafari justinkuntz girish21 tannerlinsley 3lang3 nzambello omarkhatibco richardhpa jacobswain hondrytravis john-paul-the-great-academy oliwerhelsen cmoney667 clarkgunn tournamatic sher jacobparis cartogram carldor jnfrati nickgraffis amirhhashemi flightcontrolhq miccoh1994 vsavkin louisroehrs mikqi sergiocarneiro giuseppe-g-gelardi rhefner jonsherrard mevans ian-90 davidrossjones pyyding mmhand123 freekrai zejianl dopo-rehab nosahama jibarish zhe shubhenducw marksmall nielswijers stianthaulow kiliman k1sul1 logesh-kumar royalsix joaom00 bridgecrew-perf6 doytch jonathanpalma felipemmendes pkovzz machour ctrlshiftbryan kaarelkivistik juanmcampos moishinetzer qard noahpryor 1to5 bogdaaamn lennerd ehartstrom justinwaite

blues-stack's Issues

Vercel throws 404 error after successful build

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

yes

Steps to Reproduce

Create remix app with blues-stack, deploy your app on vercel with default deploy settings for remix

Expected Behavior

I should see landing page.

Actual Behavior

Fly changed teh attachment between app and postgres-app

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

yes

Steps to Reproduce

Fly changed the attach via cli (database)

Follow the readme until this part:

fly postgres create --name your-app-name-db
fly postgres attach --postgres-app your-app-name-db --app your-app-name

Not working anymore
🔴 fly postgres attach --postgres-app your-app-name-db --app your-app-name

The API changed to
🟢 flyctl postgres attach --app your-app-name your-app-name-db

Expected Behavior

The readme should reflect the current fly cli commands.

Actual Behavior

The command will not work and throws errors.

`npm run dev` has to be restarted after Prisma change.

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

Yes

Steps to Reproduce

Init Blues template
Add author String to schema.prisma
Update note.server.ts with author key.
Add <p className="py-6">{data.note.author}</p> to $noteId.tsx
In new.tsx copy functionality from title and name it author.
Run migration npx prisma migrate dev --name adding-author
Navigate to http://localhost:3000/notes/new and try to create a new note

Expected Behavior

New note will be displayed after submit.

Actual Behavior

Error is shown. You have to rerun npm run dev to get it working again.

Build Fails on 404

Hi guys,

Love the project and super excited to get started. I setup everything on a fresh machine and a fresh and got this error in the Docker build step on github actions. I've removed the first part of the log for brevity since it looked fine at a glance, but happy to add more information if necessary. It might be a transient error/network issue, but I've rerun the build a couple of times (~3) and am still getting the issue.
Hoping, y'all can help! Thanks so much!

#19 3.306 Building Remix app in production mode...
#19 3.771 Built in 464ms
#19 4.060 
#19 4.060 > build:server
#19 4.060 > esbuild --platform=node --format=cjs ./server.ts --outdir=build
#19 4.060 
#19 4.070 
#19 4.070   build/server.js  3.2kb
#19 4.070 
#19 4.070 ⚡ Done in 2ms
#19 DONE 4.1s

#20 [stage-4 3/6] COPY --from=build /myapp/node_modules/.prisma /myapp/node_modules/.prisma
#20 DONE 0.2s

#21 [stage-4 4/6] COPY --from=build /myapp/build /myapp/build
#21 DONE 0.0s

#22 [stage-4 5/6] COPY --from=build /myapp/public /myapp/public
#22 DONE 0.0s

#23 [stage-4 6/6] ADD . .
#23 DONE 0.0s

#24 exporting to image
#24 exporting layers
#24 exporting layers 7.5s done
#24 ...

#25 [auth] sharing credentials for registry.fly.io
#25 DONE 0.0s

#24 exporting to image
#24 exporting manifest sha256:555d69678b1111c7d39670e6497734a0b7233b421ef5a9730d41395eb00572b2 done
#24 exporting config sha256:271e7ab0d8eb33f55a70d4e4584f41b69032788c90ae6[323](https://github.com/victorias/worth/runs/5683958837?check_suite_focus=true#step:8:323)0dae105f5a3c419a done
#24 pushing layers
#24 pushing layers 0.1s done
#24 ERROR: unexpected status: 404 Not Found
------
 > exporting to image:
------
error: failed to solve: unexpected status: 404 Not Found
Error: buildx failed with: error: failed to solve: unexpected status: 404 Not Found````

hot reload doesn't work

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

Yes

Steps to Reproduce

npx create-remix@latest with blues stack (I chose typescript)

no customizations, just hot reload doesn't work. I can see things rebuild but no updates in the browser.

Expected Behavior

The app rebuilds and the appropriate updates are displayed in the browser.

Actual Behavior

The app rebuilds but no changes in the browser

Base Repo OOMs on Fly.io

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

yes

Steps to Reproduce

Clone the repo and follow the README all the way through the Fly.io deployment steps.

For the Postgres create step, choose the Development - Single node, 1x shared CPU, 256MB RAM, 1GB disk configuration.

Link the DB to the app, etc.

When finally committing and pushing, the Deploy action fails with exit code 137.

Expected Behavior

I would expect the base Blues Stack to be able to deploy on the Fly.io free tier, especially as it is heavily documented and encouraged in the docs.

Actual Behavior

Deploy fails with out of memory error.

Hydration error: Initial UI does not match server

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

Yes

Steps to Reproduce

From the readme
Click the gitpod button
run the server
go to localhost:3000
open console

Expected Behavior

I have made no modifications so should work smoothly with no errors.

Actual Behavior

Blues Stack javascript version has errors upon build

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

Yes

Steps to Reproduce

npx create-remix@latest **app-name**
A pre-configured stack ready for production
Blues
JavaScript
cd ./app-name
npm run docker
npm run setup <-- First error
npm run build <-- Second & Third errors

Expected Behavior

You can follow the instructions and are able to start up the template without errors.

Actual Behavior

First error

npm run setup <-- First error

An error occured while running the seed command:
Error: Command failed with exit code 1: node --require tsconfig-paths/register prisma/seed.js

Solution

Change

`./prisma/seed.js`

const bcrypt = require("bcryptjs").default;

const bcrypt = require("bcryptjs");

Should clear the error and give you The seed command has been executed.

Second error

npm run build <-- Second error

> build:server
> esbuild --platform=node --format=cjs ./server.ts --outdir=build --bundle

✘ [ERROR] Could not resolve "./server.ts"

1 error
ERROR: "build:server" exited with 1.

Solution

Change

`package.json`

    "build:server": "esbuild --platform=node --format=cjs ./server.ts --outdir=build --bundle",

    "build:server": "esbuild --platform=node --format=cjs ./server.js --outdir=build --bundle",

Now, run npm run build again.
Should clear the error and build the server.
Then, run npm run dev

Third Error

> generate:css
> tailwindcss -o ./app/styles/tailwind.css "--watch"


/Users/nlewis/Development/apollos-axl/build/server.js:41653
var app = express();
          ^
TypeError: express is not a function
    at Object.<anonymous> (/Users/nlewis/Development/apollos-axl/build/server.js:41653:11)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47
ERROR: "dev:server" exited with 1.

Solution

Change

`server.js`

const path = require("path").default;
const express = require("express").default;
const compression = require("compression").default;
const morgan = require("morgan").default;

const { createRequestHandler } = require("@remix-run/express");

import path from "path";
import express from "express";
import compression from "compression";
import morgan from "morgan";
import { createRequestHandler } from "@remix-run/express";

npm run build
npm run dev

✨ No errors ✨
I'm happy to open a PR if this seems appropriate.

Remix and Apollo Client Devtools throw errors

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

Yes

Steps to Reproduce

Have Apollo Client Devtools installed on any of those browsers: Chrome, Edge, Firefox (all latest version as of today). With the Remix stack of course ...

Expected Behavior

No errors and SSR.

Actual Behavior

Seems to load entry.server.ts then fall back to entry.client.ts and you get all those errors in the browser console:

Error: Promised response from onMessage listener went out of scope
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Deactivating the extension remove all the errors and SSR work

p.s. It happens on the 2 other stacks too. And sorry if the bug is actually from the Apollo devtool

updates to `remix.init`

remix.init is imported to create-remix and should module.exports a function whose signature is a CJS module of the following

interface InitConfig {
	// the project root directory (parent of remix.init)
	rootDirectory: string;
}

// using an object here just in case we add other stuff to this later
export function init(config: InitConfig): void;

we could of course just call this file with execSync and also support ESM 🤷‍♂️

Following session.flash guide causes all routes to log you out

Hello

I was following along with the guide on setting up flash messages, however it seems when setting the header it wipes the user key in the session on every page load, which then causes you to be logged out.

export const loader: LoaderFunction = async ({ request }) => {
  const session = await getSession(request);
  const message = session.get("globalMessage") || null;

  return json<LoaderData>(
    {
      user: await getUser(request),
      message: message,
    },
    {
      headers: {
        // this here
        "Set-Cookie": await commitSession(session),
      },
    }
  );
};

A demo repo here if you want to get started https://github.com/tbrasington/remix-flash-test/blob/6dd74dfbba3420d00d3ca3b98e92955b4fcdfb9c/app/root.tsx#L42

Email is case sensitive

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

Yes

Steps to Reproduce

Pull down template.
Run npm run setup, npm run build, npm run dev.
Sign up with [email protected] and then sign out.
Sign up with [email protected].

Expected Behavior

The email should be treat as case insensitive so it can only be used to sign up once, regardless of capitalisation.

Actual Behavior

You can sign up many time with the same address - all of the following are treat as separate addresses:

[email protected]
[email protected]
[email protected]
[email protected]
...

Support `pnpm` natively

There's an active issue in the main Remix package about pnpm compatibility: remix-run/remix#154. Over there, people have previously complained that the Remix app wouldn't work due to undeclared dependencies. I've tried creating a fresh Remix app, seems to be working just fine.

However, when I use the Indie stack (and opt out of running npm install due to wanting to use pnpm) and install the dependencies through pnpm, I get the following batch of unmet peer dependencies:

 WARN  Issues with peer dependencies found
.
├─┬ @testing-library/user-event
│ └── ✕ missing peer @testing-library/dom@>=7.21.4
├─┬ tailwindcss
│ └── ✕ missing peer autoprefixer@^10.0.2
├─┬ ts-node
│ └── ✕ missing peer @types/node@"*"
└─┬ vite-tsconfig-paths
  └── ✕ missing peer vite@>2.0.0-0
Peer dependencies that should be installed:
  @testing-library/dom@>=7.21.4  autoprefixer@^10.0.2           
  @types/node@"*"                vite@>2.0.0-0

Seems like those dependencies are missing from this exact package, so it should be an easy fix. I for one have fixed it with (note the postcss at the end as well):

pnpm add -D @testing-library/dom autoprefixer @types/node vite postcss

⭐ Bonus points for detecting when pnpm is the preferred package manager and substituting it into the commands so that pnpm users could make full use of the initialization script :)

Latest commit breaks setup because no db is running

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

Yes

Steps to Reproduce

Use the blues stack to create a project and it eventually runs execSync("npm run setup", { stdio: "inherit", cwd: rootDirectory }); which tries to connect to a running database - if you're using this stack it's unlikely there will already be a postgres instance running so it fails and breaks the setup.

Expected Behavior

I would either expect it to try and run npm run docker or pass this process onto the user.

Actual Behavior

It runs npm run setup without first making sure a db is running.

`npm run typecheck` fails on fresh project

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

yes

Steps to Reproduce

Create a bluestack via npx create-remix@latest and choose bluestack. Follow instructions, run npm run typecheck.

Expected Behavior

Tests should pass out of the box.

Actual Behavior

Tests fail:

npm run typecheck 

> typecheck
> tsc && tsc -p cypress

error TS2688: Cannot find type definition file for '@testing-library/cypress'.
  The file is in the program because:
    Entry point of type library '@testing-library/cypress' specified in compilerOptions

  cypress/tsconfig.json:15:34
    15     "types": ["node", "cypress", "@testing-library/cypress"],
                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~
    File is entry point of type library specified here.

error TS2688: Cannot find type definition file for 'cypress'.
  The file is in the program because:
    Entry point of type library 'cypress' specified in compilerOptions

  cypress/tsconfig.json:15:23
    15     "types": ["node", "cypress", "@testing-library/cypress"],
                             ~~~~~~~~~
    File is entry point of type library specified here.


Found 2 errors.

Build is failing on Github Actions.

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

Yes

Steps to Reproduce

Push the code to dev branch.
All the steps passes except the Build step.


#8 [deps 2/3] ADD package.json package-lock.json .npmrc ./
#8 ERROR: failed to calculate checksum of ref kne0msd6uexyjrhi1dqwby7iz::uk0c4v8ukx8dm5nuk4vhr6cr7: "/package-lock.json": not found

#9 [build 2/6] COPY --from=deps /myapp/node_modules /myapp/node_modules
#9 CACHED

#10 [deps 3/3] RUN npm install --production=false
#10 CACHED

#11 [production-deps 3/4] ADD package.json package-lock.json .npmrc ./
#11 ERROR: failed to calculate checksum of ref kne0msd6uexyjrhi1dqwby7iz::uk0c4v8ukx8dm5nuk4vhr6cr7: "/package-lock.json": not found

#12 [base 2/2] RUN apt-get update && apt-get install -y openssl
#12 CANCELED
------
 > [deps 2/3] ADD package.json package-lock.json .npmrc ./:
------
------
 > [production-deps 3/4] ADD package.json package-lock.json .npmrc ./:
------
WARNING: local cache import at /tmp/.buildx-cache not found due to err: could not read /tmp/.buildx-cache/index.json: open /tmp/.buildx-cache/index.json: no such file or directory
Dockerfile:15
--------------------
  13 |     WORKDIR /myapp
  14 |     
  15 | >>> ADD package.json package-lock.json .npmrc ./
  16 |     RUN npm install --production=false
  17 |     
--------------------
ERROR: failed to solve: failed to compute cache key: failed to calculate checksum of ref kne0msd6uexyjrhi1dqwby7iz::uk0c4v8ukx8dm5nuk4vhr6cr7: "/package-lock.json": not found
Error: buildx failed with: ERROR: failed to solve: failed to compute cache key: failed to calculate checksum of ref kne0msd6uexyjrhi1dqwby7iz::uk0c4v8ukx8dm5nuk4vhr6cr7: "/package-lock.json": not found

Expected Behavior

Expect the build to pass.

Actual Behavior

Build is failing.

The way of creating fly apps has changed

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

Yes

Steps to Reproduce

Create a new Remix app with npx create-remix --template remix-run/blues-stack
Follow the README until we reach the point where we want to create 2 Fly apps
Fly will throw an error, because command create is deprecated

Expected Behavior

If I copy-paste the commands from the README, it should create the Fly apps.

Actual Behavior

Fly will throw an error, because command create is deprecated.

User `postgres` was denied access on the database `postgres.public`

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

Yes

Steps to Reproduce

Following the setup instructions in the readme:

npm run docker
wait for docker container to finish setting up
npm run setup

Expected Behavior

npm run setup completes successfully

Actual Behavior

npm run setup fails with the following error

Error: P1010: User `postgres` was denied access on the database `postgres.public`

Full terminal output:

~/Desktop/demoapp
❯ npm run docker

> docker
> docker-compose up -d

Creating network "demoapp_default" with the default driver
Creating demoapp_postgres_1 ... done

~/Desktop/demoapp
❯ npm run setup

> setup
> prisma migrate dev && prisma db seed

Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": PostgreSQL database "postgres", schema "public" at "localhost:5432"

Error: P1010: User `postgres` was denied access on the database `postgres.public`

Update server.ts to watch version.txt

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

Yes

Steps to Reproduce

Referencing the new version.txt update:

remix-run/remix#7299

Expected Behavior

Chokidar should watch the version.txt file instead of the build path to beat out any race conditions

Actual Behavior

It doesnt 👀

blues-stack 2.0.0-pre.5 - LiveReload is not working

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

Steps to Reproduce

npx create-remix@pre --template remix-run/blues-stack
cd my-remix-app
npx upgrade-remix pre
npm run build
npm run dev

Expected Behavior

working LiveReload

Actual Behavior

LiveReload is not working so I checked the console and I get this error:

ndex):37 WebSocket connection to 'ws://localhost:8002/socket' failed: 
remixLiveReloadConnect @ (index):37
(index):106 Remix dev asset server web socket error:

Thenn in the app/root.tsx I changed this:

<LiveReload />
// to this
<LiveReload port={8002} />

Now I am getting this error:

Ucaught TypeError: Failed to construct 'URL': Invalid URL
    at remixLiveReloadConnect ((index):34:40)
    at (index):110:17
remixLiveReloadConnect @ (index):34
(anonymous) @ (index):110

and LiveReload is still not working.

Error connect database

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

yes

Steps to Reproduce

Run npx create-remix --template remix-run/blues-stack in console
then npm run dev, I get this error
Here is my db URL in .env file: DATABASE_URL="postgresql://postgres:[email protected]:5432/postgres"

app ready: http://localhost:3000
(node:9388) UnhandledPromiseRejectionWarning: Error: Can't reach database server at `undefined.db.norqgrhigqygxsywkasp.supabase.co`:`5432`

Please make sure your database server is running at `undefined.db.norqgrhigqygxsywkasp.supabase.co`:`5432`.
    at D:\job\test\remix-blue\node_modules\@prisma\client\runtime\index.js:44801:20
(Use `node --trace-warnings ...` to show where the warning was created)
(node:9388) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:9388) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Expected Behavior

Just hope plug and run :(

Actual Behavior

Latest server.js code breaks HDR

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

Yes

Steps to Reproduce

npx create-remix@latest --template remix-run/blues-stack
npm run build
npm run dev

In root.tsx, log anything in the loader to trigger HDR

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const data = {
    foo: "bar",
    foo2: "bar2",
  };
  console.log(data);
  return json({ user: await getUser(request) });
};
// Logs nothing on HDR

Nothing is logged. Stop the dev process and restart --> now the data is logged.

Comment out a line of the object and save

const data = {
    foo: "bar",
    // foo2: "bar2",
  };
console.log(data);
// still logs { foo: 'bar', foo2: 'bar2' } from previous file state

The updated object is not logged. The console indicated that hmr + hdr ran. Even declaring the object outside the loader doesn't resolve it.

Using the server.ts from before #221 resolves the issue, but I don't know enough about what's going on to give any more helpful info.

Thanks!

Expected Behavior

Changing code inside loaders or used inside loaders should rerun loaders with new code.

Actual Behavior

Changing code inside loaders or used inside loaders does not rerun loaders with new code, and a full server restart is required to see changes.

LiveReload does not work on Gitpod

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

Yes

Steps to Reproduce

Click the "Gitpod | Ready-to-code" button to create a new pod for this repo. After the repo starts up and it asks you to allow the ports, it will open up the app in a browser tab. Notice that the URL it's trying to use is something like: wss://3000-remixrun-bluesstack-<token>.ws-us47.gitpod.io:8002/socket, but it should connect to: wss://8002-remixrun-bluesstack-<token>.ws-us47.gitpod.io/socket instead.

Expected Behavior

LiveReload should function properly while running on Gitpod.

Actual Behavior

It's trying to connect to the wrong Websocket URL which means LiveReload will not work.

Error: Invariant failed

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

yes

Steps to Reproduce

Run npx create-remix@latest --template remix-run/blues-stack test
Run npm run build
Run npm start

Expected Behavior

Roughly the same thing that happens when running npm run dev

Actual Behavior

met with this error

C:\Users\Konotorii\Documents\CoDiNg\React\test\node_modules\tiny-invariant\dist\tiny-invariant.cjs.js:10
        throw new Error(prefix);
              ^
Error: Invariant failed
    at invariant (C:\Users\Konotorii\Documents\CoDiNg\React\test\node_modules\tiny-invariant\dist\tiny-invariant.cjs.js:10:15)
    at getClient (C:\Users\Konotorii\Documents\CoDiNg\React\test\build\index.js:88:37)
    at Object.<anonymous> (C:\Users\Konotorii\Documents\CoDiNg\React\test\build\index.js:85:10)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\Users\Konotorii\Documents\CoDiNg\React\test\build\server.js:45266:78)

running latest version

great repro

Issue with tests scanning postgres-data directory

I had issues running rootless Docker in WSL2. Running postgress with user=root, postgres-data folder is created with root access, and npm run setup fails.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Error: EACCES: permission denied, scandir '/src/█████/postgres-data/'
    at Object.readdirSync (node:fs:1392:3)
    at Object.readdir (/src/█████/node_modules/recrawl-sync/lib/fs.js:6:25)
    at crawl (/src/█████/node_modules/recrawl-sync/lib/recrawl.js:46:35)
    at crawl (/src/█████/node_modules/recrawl-sync/lib/recrawl.js:67:25)
    at /src/█████/node_modules/recrawl-sync/lib/recrawl.js:85:9
    at exports.crawl (/src/█████/node_modules/recrawl-sync/lib/recrawl.js:15:51)
    at findProjects (/src/█████/node_modules/vite-tsconfig-paths/dist/index.js:210:35)
    at Object.configResolved (/src/█████/node_modules/vite-tsconfig-paths/dist/index.js:68:24)
    at /src/█████/node_modules/vite/dist/node/chunks/dep-9c153816.js:71056:127
    at Array.map (<anonymous>) {
  errno: -13,
  syscall: 'scandir',
  code: 'EACCES',
  path: '/src/█████/postgres-data/'
}

I solved it with this patch:

diff --git a/package.json b/package.json
index 3472d91..6332ca9 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,8 @@
   "eslintIgnore": [
     "/node_modules",
     "/build",
-    "/public/build"
+    "/public/build",
+    "/postgres-data"
   ],
   "dependencies": {
     "@node-rs/bcrypt": "^1.6.0",
diff --git a/vitest.config.ts b/vitest.config.ts
index de07a32..5fa4c92 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -6,10 +6,19 @@ import react from "@vitejs/plugin-react";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [react(), tsconfigPaths()],
+  plugins: [react(), tsconfigPaths({ projects: ["tsconfig.json"] })],
   test: {
     globals: true,
     environment: "happy-dom",
     setupFiles: ["./test/setup-test-env.ts"],
+    exclude: [
+      "node_modules",
+      "dist",
+      ".idea",
+      ".git",
+      ".cache",
+      "build",
+      "postgres-data",
+    ],
   },
 });

I didn't solve issues with Cypress in WSL2, but I probably will not use Cypress.

Race condition in npm run dev

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

Yes

Steps to Reproduce

npm run dev

Expected Behavior

I would expect npm run dev to always build and start the various servers without problems related to build timing/order.

Actual Behavior

Sometimes when running npm run dev, the various parallel build processes happen in an order such that the server can't start:

https://github.com/remix-run/blues-stack/blob/main/package.json#L10-L14

The only way to fix this is to manually run npm run build then re-try npm run dev. I guess because these commands aren't finishing (due to --watch), it isn't easy to know when to run the next step? Regardless, it would be good to find a better way to do this that doesn't randomly fail.

The service is no longer running immediately logged when `npm run dev`

What version of Remix are you using?

1.3.1

Steps to Reproduce

Create a new project using the blues stack.
cd into the directory
npm run docker
npm run setup
npm run dev

Expected Behavior

pm2 should launch the application and supporting watches with no errors displayed.

Actual Behavior

Eventually all applications succeed to launch, but Server fails the first time it is run with Error: The service is no longer running.

After pm2 restarts Server it successfully runs on the second launch.

❯ npm run dev

> dev
> pm2-dev ./other/pm2.config.js

===============================================================================
--- PM2 development mode ------------------------------------------------------
Apps started         : Server,Server Build,Remix,Tailwind
Processes started    : 4
Watch and Restart    : Enabled
Ignored folder       : node_modules
===============================================================================
Server-0  | Debugger listening on ws://127.0.0.1:9229/9752a099-019e-4ec1-9379-ee5c5959b3f7
Server-0  | For help, see: https://nodejs.org/en/docs/inspector
Server Build-1  | > build:server
Server Build-1  | > esbuild --platform=node --format=cjs ./server.ts --outdir=build "--watch"
Server-0        | 🔶 Mock server running
Server Build-1  | [watch] build finished, watching for changes...
Tailwind-3      | > generate:css
Tailwind-3      | > tailwindcss -o ./app/styles/tailwind.css "--watch"
Server-0        | /Users/furd/Code/blues-test/node_modules/esbuild/lib/main.js:658
Server-0        |       return callback("The service is no longer running", null);
Server-0        |              ^
Server-0        | Error: The service is no longer running
Server-0        |     at /Users/furd/Code/blues-test/node_modules/esbuild/lib/main.js:1375:29
Server-0        |     at sendRequest (/Users/furd/Code/blues-test/node_modules/esbuild/lib/main.js:658:14)
Server-0        |     at start (/Users/furd/Code/blues-test/node_modules/esbuild/lib/main.js:1373:9)
Server-0        |     at Object.transform2 [as transform] (/Users/furd/Code/blues-test/node_modules/esbuild/lib/main.js:1430:5)
Server-0        |     at /Users/furd/Code/blues-test/node_modules/esbuild/lib/main.js:2099:55
Server-0        |     at new Promise (<anonymous>)
Server-0        |     at Object.transform (/Users/furd/Code/blues-test/node_modules/esbuild/lib/main.js:2099:14)
Server-0        |     at /Users/furd/Code/blues-test/node_modules/esbuild/lib/main.js:2253:65
Server-0        |     at MessagePort.<anonymous> (/Users/furd/Code/blues-test/node_modules/esbuild/lib/main.js:2269:7)
Server-0        |     at MessagePort.[nodejs.internal.kHybridDispatch] (node:internal/event_target:647:20)
Server-0        | Debugger listening on ws://127.0.0.1:9229/5e82594d-c4cf-41d7-887d-83f1c2128eb1
Server-0        | For help, see: https://nodejs.org/en/docs/inspector
Remix-2         | Watching Remix app in development mode...
Server-0        | 🔶 Mock server running
Tailwind-3      | Rebuilding...
Remix-2         | 💿 Built in 436ms
Tailwind-3      | Done in 273ms.
Server-0        | 🔌 setting up prisma client to localhost:5432
Server-0        | ✅ app ready: http://localhost:3000

Can't import non-libraries from server.ts

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

yes

Steps to Reproduce

run npx create-remix --template remix-run/blues-stack
create app/foo.ts in base directory with contents export const bar = 'baz'
add import { bar } from './foo' to server.ts
run npm run setup && npm run build && npm run start

Expected Behavior

✅ app ready: http://localhost:3000

Actual Behavior

Error: Cannot find module '~/foo'

Fly.io -> Error: Can't reach database server

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

yes

Steps to Reproduce

Create app using: npx create-remix@latest --template remix-run/blues-stack
Create application in fly.io using following commands:
2.1 Create app: fly apps create app-name-here
2.2 Set app secret variable: fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app app-name-here
2.3 Create database: fly postgres create --name db-name-here
2.4 Link database fly postgres attach --app app-name-here db-name-here
Start Github workflow (push to main)

Expected Behavior

Application should be deployed

Actual Behavior

Error while deploying the application:

Error: Can't reach database server at ams.db-name-here.flycast:5432

Unknown binaryTarget debian-openssl-3.0.x

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

Yes

Steps to Reproduce

create new project

npm i
npm run setup

results in:

> setup
> prisma migrate dev && prisma db seed

Error: Unknown binaryTarget debian-openssl-3.0.x and no custom binaries were provided

on systems with openssl-3.0.x

Expected Behavior

expect the setup to work on systems with openssl-3.0.x

Actual Behavior

prisma crashes

"fly apps create" not working correctly anymore

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

yes

Steps to Reproduce

Follow the steps in the readme.
"fly apps create [...]" not working correctly.

It creates an an app on fly.io but without an ip address. The created app has a orange wrench symbol. The app missing configurations.

Expected Behavior

Following the readme should lead you to have a running app.

Actual Behavior

Follow the readme will not working anymore, because fly.io app (remix) will not have an IP Address.

TypeError: interceptors.createInterceptor is not a function

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

Yes

Steps to Reproduce

Run npx create-remix --template remix-run/blues-stack
(say Yes to everything)

Then run npm run validate, and you will see:

TypeError: interceptors.createInterceptor is not a function
    at setupServer (/Users/usr/src/my-remix-app/node_modules/msw/node/lib/index.js:8143:42)
    at mocks/index.js (/Users/usr/src/my-remix-app/mocks/index.js:3:16)
    at __require (/Users/usr/src/my-remix-app/server/index.js:12:50)
    at Object.<anonymous> (/Users/usr/src/my-remix-app/server.ts:5:3)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)

Or, run npm run dev and go to http://localhost:3000 and you will see the same error

Expected Behavior

The template should work out of the box

Actual Behavior

The template is broken and unusable

Missing License

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

yes

Steps to Reproduce

Check the repo and all surrounding information. This code has no license.

Expected Behavior

Actual Behavior

This code is unlicensed and inappropriate for anyone to use.

When Using Express Adapter Throwing Responses will break the app

What version of Remix are you using?

1.11.1

Steps to Reproduce

create a new blue stack app
go to one of the routes and add a loader
inside the loader throw new Response("Not Found", { status: 404 }) or 401
open the browser and enter the url address

Expected Behavior

to render CatchBoundary component and don't break

Actual Behavior

app will break and send this as response

Unexpected Server Error

[object Object]

inside the terminal which I ran the app (for each request prints the error 3 times):

ErrorResponse {
  status: 404,
  statusText: '',
  internal: false,
  data: 'Notfound'
}
ErrorResponse {
  status: 404,
  statusText: '',
  internal: false,
  data: 'Notfound'
}
ErrorResponse {
  status: 404,
  statusText: '',
  internal: false,
  data: 'Notfound'
}
GET /test/2 500 - - 23.898 ms

Scripts variant in README to support the Yarn inclined

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

Yes

Steps to Reproduce

So this less a Bug more of a little annoyance, which could be helpful to include in the README for anyone who'd prefer yarn?

Specifically this is around setting up the package scripts to support yarn

Yarn install instead of NPM
Update npm run to yarn run in the scripts (To follow protocol, even though we'll ignore this down below)

Expected Behavior

yarn run dev starts the dev server as normal

Actual Behavior

You hit a few roadbloacks:

run-p dev:* fails with the error: No matches found: "dev:*"

Solution: Wrap dev:* in quotes -> run-p 'dev:*'

dev:server fails with the error: Invalid build flag: "--"

Solution: revert back to npm run build:server (Keen to know why this is 👀)

Technically it's only 1 roadblock with a simple solution if you keep npm run in your yarn project, but at the end of the day if you are using yarn there are reasons to keep yarn run around... I just dont have a simple solution for #2

Just thinking this could be an easy sentence in the README if you think it's worth having ^

ESLint config should use

We have a second set of rules in the Remix ESLint package for Jest. So we can remove the custom Jest rules and use this instead:

{
  "extends": ["@remix-run/eslint-config", "@remix-run/eslint-config/jest"]
}

Would PR this myself but it looks like I don't have permissions to fork or push a new branch! Happy to take care of it if you wanna update that :)

Gitpod link broken

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

yes

Steps to Reproduce

open README and click the gitpod button, goes to https://gitpod.io/from-referrer, and after auth it says this:

Expected Behavior

I'm unfamiliar with gitpod TBH, tho I don't know what should happen :)

Actual Behavior

See steps to repdoruce

Deployment failing due to seed not working

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

Yes

Steps to Reproduce

Running the CI/CD pipeline through github actions or the fly deploy and then I get error that results in failure of deployment.

Expected Behavior

Deployment works and seeding succeeds

Actual Behavior

2022-12-29T09:58:59Z app[63b7991f] sea [info]Running seed command `ts-node --require tsconfig-paths/register prisma/seed.ts` ...
2022-12-29T09:58:59Z app[63b7991f] sea [info]An error occurred while running the seed command:
2022-12-29T09:58:59Z app[63b7991f] sea [info]Error: Command failed with ENOENT: ts-node --require tsconfig-paths/register prisma/seed.ts
2022-12-29T09:58:59Z app[63b7991f] sea [info]spawn ts-node ENOENT

Looks like as the "prisma.seed" in the package.json and using ts-node while the Dockerfile in production image doesn't have ts-node so it just fails. I couldn't find where the prisma seed is being invoked from either in docker file or elsewhere so not sure what needs to be moved where.

npm run dev constantly throws pm2 error on Windows Home machine

When I follow the instructions to setup the Blues Stack, npm run dev fails to ever start, and throws the error message which I have pasted below. It worked on my Macbook Pro, so I believe it is something related to Windows, potentially even specifically Windows Home.

OS: Windows 10 Home
OS build: 19043.1586
Version 21H1

Reproduction steps:

npx create-remix@latest
Enter name-of-project
Select pre-existing stack option
Select Blues stack
Select Y to npm install
Wait for it to finish
cd name-of-project
npm run docker
Open Docker Desktop and confirm it has finished starting up.
npm run setup
npm run build
npm run dev

$ npm run dev

> dev
> pm2-dev ./other/pm2.config.js

[
  Error: Script not found: C:\Users\myname\Code\blues-stack-test\node --inspect --require .\node_modules\dotenv\config --require .\mocks .\build\server.js
      at Object.Common.resolveAppAttributes (C:\Users\myname\Code\blues-stack-test\node_modules\pm2\lib\Common.js:647:11)
      at C:\Users\myname\Code\blues-stack-test\node_modules\pm2\lib\API.js:1129:35
      at C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\withoutIndex.js:8:40
      at replenish (C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\eachOfLimit.js:81:17)
      at C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\eachOfLimit.js:86:9
      at eachLimit (C:\Users\myname\Code\blues-stack-test\node_modules\async\eachLimit.js:47:43)
      at awaitable (C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\awaitify.js:13:28)
      at startApps (C:\Users\myname\Code\blues-stack-test\node_modules\pm2\lib\API.js:1113:7)
      at C:\Users\myname\Code\blues-stack-test\node_modules\pm2\lib\API.js:1094:16
      at wrapper (C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\once.js:12:16),
  Error: Script not found: C:\Users\myname\Code\blues-stack-test\npm run build:server -- --watch
      at Object.Common.resolveAppAttributes (C:\Users\myname\Code\blues-stack-test\node_modules\pm2\lib\Common.js:647:11)
      at C:\Users\myname\Code\blues-stack-test\node_modules\pm2\lib\API.js:1129:35
      at C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\withoutIndex.js:8:40
      at replenish (C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\eachOfLimit.js:81:17)
      at C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\eachOfLimit.js:86:9
      at eachLimit (C:\Users\myname\Code\blues-stack-test\node_modules\async\eachLimit.js:47:43)
      at awaitable (C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\awaitify.js:13:28)
      at startApps (C:\Users\myname\Code\blues-stack-test\node_modules\pm2\lib\API.js:1113:7)
      at C:\Users\myname\Code\blues-stack-test\node_modules\pm2\lib\API.js:1094:16
      at wrapper (C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\once.js:12:16),
  Error: Script not found: C:\Users\myname\Code\blues-stack-test\cross-env NODE_ENV=development remix watch
      at Object.Common.resolveAppAttributes (C:\Users\myname\Code\blues-stack-test\node_modules\pm2\lib\Common.js:647:11)
      at C:\Users\myname\Code\blues-stack-test\node_modules\pm2\lib\API.js:1129:35
      at C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\withoutIndex.js:8:40
      at replenish (C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\eachOfLimit.js:81:17)
      at C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\eachOfLimit.js:86:9
      at eachLimit (C:\Users\myname\Code\blues-stack-test\node_modules\async\eachLimit.js:47:43)
      at awaitable (C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\awaitify.js:13:28)
      at startApps (C:\Users\myname\Code\blues-stack-test\node_modules\pm2\lib\API.js:1113:7)
      at C:\Users\myname\Code\blues-stack-test\node_modules\pm2\lib\API.js:1094:16
      at wrapper (C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\once.js:12:16),
  Error: Script not found: C:\Users\myname\Code\blues-stack-test\npm run generate:css -- --watch
      at Object.Common.resolveAppAttributes (C:\Users\myname\Code\blues-stack-test\node_modules\pm2\lib\Common.js:647:11)
      at C:\Users\myname\Code\blues-stack-test\node_modules\pm2\lib\API.js:1129:35
      at C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\withoutIndex.js:8:40
      at replenish (C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\eachOfLimit.js:81:17)
      at C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\eachOfLimit.js:86:9
      at eachLimit (C:\Users\myname\Code\blues-stack-test\node_modules\async\eachLimit.js:47:43)
      at awaitable (C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\awaitify.js:13:28)
      at startApps (C:\Users\myname\Code\blues-stack-test\node_modules\pm2\lib\API.js:1113:7)
      at C:\Users\myname\Code\blues-stack-test\node_modules\pm2\lib\API.js:1094:16
      at wrapper (C:\Users\myname\Code\blues-stack-test\node_modules\async\internal\once.js:12:16)
]

Remix blues stack problem when npm run docker

What version of Remix are you using?

1.7.3

Steps to Reproduce

follow startup instructions and install blues stack
npm run docker

Expected Behavior

should start docker

Actual Behavior

sh: docker-compose: command not found

TypeError: {(intermediate value)(intermediate value)(intermediate value)}[packageManager] is not a function

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

Yes

Steps to Reproduce

Run npx create-remix --template remix-run/blues-stack

Expected Behavior

Installation to successfully complete.

Actual Behavior

remix.init script fails with TypeError: {(intermediate value)(intermediate value)(intermediate value)}[packageManager] is not a function.

npx create-remix --template remix-run/blues-stack
? Where would you like to create your app? blues-stack
? Do you want me to run npm install? Yes
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated

added 1333 packages, and audited 1334 packages in 28s

234 packages are looking for funding
run npm fund for details

found 0 vulnerabilities
💿 Running remix.init script
🚨 Oops, remix.init failed

TypeError: {(intermediate value)(intermediate value)(intermediate value)}[packageManager] is not a function
    at getPackageManagerCommand (/Users/home/Dev/blues-stack/remix.init/index.js:76:20)
    at main (/Users/home/Dev/blues-stack/remix.init/index.js:127:14)
    at init (/Users/home/.npm/_npx/82f938b29eb562d9/node_modules/@remix-run/dev/cli/commands.js:112:13)
    at async Object.create (/Users/home/.npm/_npx/82f938b29eb562d9/node_modules/@remix-run/dev/cli/commands.js:82:7)
    at async Object.run (/Users/home/.npm/_npx/82f938b29eb562d9/node_modules/@remix-run/dev/cli/run.js:330:9)

Some Tailwind classes were missing / were purged despite being in the JSX / HTML

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

No, but the only changes to it are irrelevant (project created last week)

Steps to Reproduce

Present from the get-go.

Expected Behavior

I expected Tailwind UI to work out of the box.

I pasted this page heading on the notes route, and expected it to look like this.

Actual Behavior

A button was missing entirely, the image wasn't rounded, and other stuff. The classes that were present in the HTML didn't get included into the CSS bundle.

I'm not sure, but I think that the problem might be related to a missing input file. I changed the command from tailwindcss -o ./app/styles/tailwind.css to tailwindcss -i ./app/input.css -o ./app/styles/tailwind.css, and created the input.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

and what do you know, it now looks like it should:

Wrong http status code (500) returned instead of 404 or any response thrown from a loader.

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

yes

Steps to Reproduce

npx create-remix@latest;
select the blues template, follow the suggested steps;
go to any page that doesn't exist, http://0.0.0.0:3000/no-such-page for example
see that the returned status is 500 instead of 404

The same issue happens if you throw a json response in a loader: throw json("Unauthorized", { status: 403 });, a 500 status code will be returned to the browser.

It seems like this started happening when updating remix from 1.9.0 to 1.10.0.
The issue does not happen when using remix serve instead of express.
I don't know if the issue comes from the template server.ts file or from the combination of @remix-run/react and @remix-run/express

Expected Behavior

A 404 http status code should be returned.

Actual Behavior

A 500 http status code is returned.

GitHub Action fails at build step due to buildx 404

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

Yes

Steps to Reproduce

I followed the guide in the README and ended up here. On each commit, the build is failing at the build step docker build. I did however update the docker-compose file to work on windows via:

version: "3.7"
services:
  postgres:
    image: postgres:latest
    restart: always
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
      - PGDATA=/var/lib/postgresql/data/pgdata
      - POSTGRES_DB=postgres
    ports:
      - "5432:5432"
    volumes:
      - ./postgres-data:/var/lib/postgresql

Expected Behavior

The build would pass.

Actual Behavior

The build fails with the following error log:
Error: buildx failed with: error: failed to solve: unexpected status: 404 Not Found

Run docker/build-push-action@v2
Docker info
/usr/bin/docker buildx build --build-arg COMMIT_SHA=95a78cf0b7fb7f9283ab6982c9a1fda79ed36395 --cache-from type=local,src=/tmp/.buildx-cache --cache-to type=local,mode=max,dest=/tmp/.buildx-cache-new --iidfile /tmp/docker-build-push-scceXX/iidfile --tag registry.fly.io/project-cardinal-0ffe:main-95a78cf0b7fb7f9283ab6982c9a1fda79ed36395 --metadata-file /tmp/docker-build-push-scceXX/metadata-file --push .
#1 [internal] load build definition from Dockerfile
#1 transferring dockerfile: 1.14kB 0.0s done
#1 DONE 0.0s

#2 [internal] load .dockerignore
#2 transferring context: 104B done
#2 DONE 0.0s

#3 [auth] library/node:pull token for registry-1.docker.io
#3 DONE 0.0s

#4 [internal] load metadata for docker.io/library/node:16-bullseye-slim
#4 DONE 0.3s

#5 [base 1/2] FROM docker.io/library/node:16-bullseye-slim@sha256:84166838030b78441db7c90e0407cee1da736157a70f398b6589ea1f4ffa753a
#5 resolve docker.io/library/node:16-bullseye-slim@sha256:84166838030b78441db7c90e0407cee1da736157a70f398b6589ea1f4ffa753a 0.0s done
#5 DONE 0.0s

#6 [internal] load build context
#6 transferring context: 778.63kB 0.1s done
#6 DONE 0.1s

#5 [base 1/2] FROM docker.io/library/node:16-bullseye-slim@sha256:84166838030b78441db7c90e0407cee1da736157a70f398b6589ea1f4ffa753a
#5 sha256:6805f633ace3b9b8e1dbe2b9b79f3b28580d815e184ac0ac4e850244ae9ca0c9 452B / 452B 0.0s done
#5 sha256:ae04e9659b22f2c9de90f6d95ae0fddc628a06f6b1dbf200758af1c6e3238edd 2.77MB / 2.77MB 0.1s done
#5 sha256:c03975a823056ff37958fded5ab44b6e6e62d38e28fc1f820c5b4791515047fb 4.18kB / 4.18kB 0.1s done
#5 sha256:c85216783a8b982426fd31f8de179c3c3ae506023dc12b68e3ef05580ad39415 11.53MB / 34.37MB 0.2s
#5 sha256:c229119241af7b23b121052a1cae4c03e0a477a72ea6a7f463ad7623ff8f274b 13.63MB / 31.38MB 0.2s
#5 sha256:c85216783a8b982426fd31f8de179c3c3ae506023dc12b68e3ef05580ad39415 25.17MB / 34.37MB 0.3s
#5 sha256:c85216783a8b982426fd31f8de179c3c3ae506023dc12b68e3ef05580ad39415 34.37MB / 34.37MB 0.4s done
#5 sha256:c229119241af7b23b121052a1cae4c03e0a477a72ea6a7f463ad7623ff8f274b 31.38MB / 31.38MB 0.3s done
#5 extracting sha256:c229119241af7b23b121052a1cae4c03e0a477a72ea6a7f463ad7623ff8f274b
#5 extracting sha256:c229119241af7b23b121052a1cae4c03e0a477a72ea6a7f463ad7623ff8f274b 1.1s done
#5 DONE 1.6s

#5 [base 1/2] FROM docker.io/library/node:16-bullseye-slim@sha256:84166838030b78441db7c90e0407cee1da736157a70f398b6589ea1f4ffa753a
#5 extracting sha256:c03975a823056ff37958fded5ab44b6e6e62d38e28fc1f820c5b4791515047fb 0.0s done
#5 extracting sha256:c85216783a8b982426fd31f8de179c3c3ae506023dc12b68e3ef05580ad39415
#5 extracting sha256:c85216783a8b982426fd31f8de179c3c3ae506023dc12b68e3ef05580ad39415 1.3s done
#5 extracting sha256:ae04e9659b22f2c9de90f6d95ae0fddc628a06f6b1dbf200758af1c6e3238edd
#5 extracting sha256:ae04e9659b22f2c9de90f6d95ae0fddc628a06f6b1dbf200758af1c6e3238edd 0.1s done
#5 extracting sha256:6805f633ace3b9b8e1dbe2b9b79f3b28580d815e184ac0ac4e850244ae9ca0c9 done
#5 DONE 3.0s

#7 [base 2/2] RUN apt-get update && apt-get install -y openssl
#7 0.101 Get:1 http://deb.debian.org/debian bullseye InRelease [116 kB]
#7 0.112 Get:2 http://deb.debian.org/debian bullseye-updates InRelease [39.4 kB]
#7 0.112 Get:3 http://security.debian.org/debian-security bullseye-security InRelease [44.1 kB]
#7 0.231 Get:4 http://deb.debian.org/debian bullseye/main amd64 Packages [8182 kB]
#7 0.418 Get:5 http://security.debian.org/debian-security bullseye-security/main amd64 Packages [124 kB]
#7 0.430 Get:6 http://deb.debian.org/debian bullseye-updates/main amd64 Packages [2596 B]
#7 1.726 Fetched 8508 kB in 2s (5179 kB/s)
#7 1.726 Reading package lists...
#7 2.319 Reading package lists...
#7 2.929 Building dependency tree...
#7 3.060 Reading state information...
#7 3.203 Suggested packages:
#7 3.203   ca-certificates
#7 3.238 The following NEW packages will be installed:
#7 3.239   openssl
#7 3.260 0 upgraded, 1 newly installed, 0 to remove and 1 not upgraded.
#7 3.260 Need to get 853 kB of archives.
#7 3.260 After this operation, 1501 kB of additional disk space will be used.
#7 3.260 Get:1 http://deb.debian.org/debian bullseye/main amd64 openssl amd64 1.1.1n-0+deb11u1 [853 kB]
#7 3.379 debconf: delaying package configuration, since apt-utils is not installed
#7 3.406 Fetched 853 kB in 0s (33.9 MB/s)
#7 3.420 Selecting previously unselected package openssl.
#7 3.420 (Reading database ... 
(Reading database ... 5%
(Reading database ... 10%
(Reading database ... 15%
(Reading database ... 20%
(Reading database ... 25%
(Reading database ... 30%
(Reading database ... 35%
(Reading database ... 40%
(Reading database ... 45%
(Reading database ... 50%
(Reading database ... 55%
(Reading database ... 60%
(Reading database ... 65%
(Reading database ... 70%
(Reading database ... 75%
(Reading database ... 80%
(Reading database ... 85%
(Reading database ... 90%
(Reading database ... 95%
(Reading database ... 100%
(Reading database ... 6653 files and directories currently installed.)
#7 3.428 Preparing to unpack .../openssl_1.1.1n-0+deb11u1_amd64.deb ...
#7 3.430 Unpacking openssl (1.1.1n-0+deb11u1) ...
#7 3.516 Setting up openssl (1.1.1n-0+deb11u1) ...
#7 DONE 4.4s

#8 [production-deps 1/4] WORKDIR /myapp
#8 DONE 0.0s

#9 [deps 2/3] ADD package.json package-lock.json ./
#9 DONE 0.0s

#10 [deps 3/3] RUN npm install --production=false
#10 1.377 npm WARN old lockfile 
#10 1.378 npm WARN old lockfile The package-lock.json file was created with an old version of npm,
#10 1.378 npm WARN old lockfile so supplemental metadata must be fetched from the registry.
#10 1.378 npm WARN old lockfile 
#10 1.378 npm WARN old lockfile This is a one-time fix-up, please be patient...
#10 1.378 npm WARN old lockfile 
#10 40.20 npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
#10 40.38 npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
#10 41.31 npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
#10 41.34 npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
#10 41.79 npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
#10 50.46 npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
#10 94.21 
#10 94.21 added 1269 packages, and audited 1270 packages in 2m
#10 94.21 
#10 94.21 227 packages are looking for funding
#10 94.21   run `npm fund` for details
#10 94.22 
#10 94.22 4 high severity vulnerabilities
#10 94.22 
#10 94.22 To address all issues (including breaking changes), run:
#10 94.22   npm audit fix --force
#10 94.22 
#10 94.22 Run `npm audit` for details.
#10 94.22 npm notice 
#10 94.22 npm notice New minor version of npm available! 8.5.0 -> 8.6.0
#10 94.22 npm notice Changelog: <https://github.com/npm/cli/releases/tag/v8.6.0>
#10 94.22 npm notice Run `npm install -g [email protected]` to update!
#10 94.22 npm notice 
#10 DONE 95.9s

#11 [production-deps 2/4] COPY --from=deps /myapp/node_modules /myapp/node_modules
#11 DONE 5.6s

#12 [build 3/6] ADD prisma .
#12 DONE 0.3s

#13 [production-deps 3/4] ADD package.json package-lock.json ./
#13 DONE 0.3s

#14 [production-deps 4/4] RUN npm prune --production
#14 1.662 npm WARN old lockfile 
#14 1.663 npm WARN old lockfile The package-lock.json file was created with an old version of npm,
#14 1.666 npm WARN old lockfile so supplemental metadata must be fetched from the registry.
#14 1.669 npm WARN old lockfile 
#14 1.671 npm WARN old lockfile This is a one-time fix-up, please be patient...
#14 1.673 npm WARN old lockfile 
#14 ...

#15 [build 4/6] RUN npx prisma generate
#0 1.200 Prisma schema loaded from schema.prisma
#0 3.571 
#0 3.571 ✔ Generated Prisma Client (3.11.1 | library) to ./node_modules/@prisma/client in 143ms
#0 3.571 You can now start using Prisma Client in your code. Reference: https://pris.ly/d/client
#0 3.571 ```
#0 3.571 import { PrismaClient } from '@prisma/client'
#0 3.571 const prisma = new PrismaClient()
#0 3.571 ```
#0 3.648 npm notice 
#0 3.648 npm notice New minor version of npm available! 8.5.0 -> 8.6.0
#0 3.653 npm notice Changelog: <https://github.com/npm/cli/releases/tag/v8.6.0>
#0 3.653 npm notice Run `npm install -g [email protected]` to update!
#0 3.654 npm notice 
#15 DONE 3.7s

#16 [build 5/6] ADD . .
#16 DONE 0.0s

#17 [build 6/6] RUN npm run build
#17 0.416 
#17 0.416 > build
#17 0.416 > run-s build:*
#17 0.416 
#17 0.994 
#17 0.994 > build:css
#17 0.994 > npm run generate:css -- --minify
#17 0.994 
#17 1.374 
#17 1.374 > generate:css
#17 1.374 > tailwindcss -o ./app/styles/tailwind.css "--minify"
#17 1.374 
#17 2.604 
#17 2.605 Done in 465ms.
#17 2.984 
#17 2.984 > build:remix
#17 2.984 > remix build
#17 2.984 
#17 3.906 Building Remix app in production mode...
#17 4.697 Built in 789ms
#17 5.067 
#17 5.067 > build:server
#17 5.067 > esbuild --platform=node --format=cjs ./server.ts --outdir=build
#17 5.067 
#17 5.078 
#17 5.078   build/server.js  3.2kb
#17 5.078 
#17 5.078 ⚡ Done in 3ms
#17 DONE 5.2s

#14 [production-deps 4/4] RUN npm prune --production
#14 27.73 
#14 27.73 up to date, audited 171 packages in 27s
#14 27.74 
#14 27.74 33 packages are looking for funding
#14 27.74   run `npm fund` for details
#14 27.74 
#14 27.74 found 0 vulnerabilities
#14 27.74 npm notice 
#14 27.74 npm notice New minor version of npm available! 8.5.0 -> 8.6.0
#14 27.74 npm notice Changelog: <https://github.com/npm/cli/releases/tag/v8.6.0>
#14 27.74 npm notice Run `npm install -g [email protected]` to update!
#14 27.74 npm notice 
#14 DONE 28.1s

#18 [stage-4 2/6] COPY --from=production-deps /myapp/node_modules /myapp/node_modules
#18 DONE 1.1s

#19 [stage-4 3/6] COPY --from=build /myapp/node_modules/.prisma /myapp/node_modules/.prisma
#19 DONE 0.1s

#20 [stage-4 4/6] COPY --from=build /myapp/build /myapp/build
#20 DONE 0.1s

#21 [stage-4 5/6] COPY --from=build /myapp/public /myapp/public
#21 DONE 0.0s

#22 [stage-4 6/6] ADD . .
#22 DONE 0.0s

#23 exporting to image
#23 exporting layers
#23 exporting layers 9.1s done
#23 exporting manifest sha256:0986444268719d3629de60ab2dcfb22382b9ce81a6817e2935d339c9d9abf0c1 done
#23 exporting config sha256:9ffc8c0700e18f2e92feb1bbaf5e3a24d4c7d12d223d0a9b8c88d064ca780ce2 done
#23 pushing layers
#23 ...

#24 [auth] sharing credentials for registry.fly.io
#24 DONE 0.0s

#23 exporting to image
#23 pushing layers 2.0s done
#23 ERROR: unexpected status: 404 Not Found
------
 > exporting to image:
------
WARNING: local cache import at /tmp/.buildx-cache not found due to err: could not read /tmp/.buildx-cache/index.json: open /tmp/.buildx-cache/index.json: no such file or directory
error: failed to solve: unexpected status: 404 Not Found
Error: buildx failed with: error: failed to solve: unexpected status: 404 Not Found

Multiple high severity vulnerabilities warnings while installing Remix Blues stack

What version of Remix are you using?

latest via npx create-remix

Steps to Reproduce

Run npx create-remix --template remix-run/blues-stack in console

Expected Behavior

No severe warnings

Actual Behavior

➜  ~/Projects  npx create-remix --template remix-run/blues-stack
Need to install the following packages:
  create-remix
Ok to proceed? (y) y
💿 Welcome to Remix! Let's get you set up with a new project.

npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
? Where would you like to create your app? ./my-project
? Do you want me to run `npm install`? Yes
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

> postinstall
> remix setup node

Successfully setup Remix for node.

added 1212 packages, and audited 1213 packages in 53s

230 packages are looking for funding
  run `npm fund` for details

4 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
💿 Running remix.init script
Setup is almost complete. Follow these steps to finish initialization:

- Start the database:
  npm run docker

- Run setup:
  npm run setup

- You're now ready to rock and roll 🤘
  npm run dev
💿 That's it! `cd` into "/Users/benjamin/Projects/my-project" and check the README for development and deploy instructions!
➜  ~/Projects  cd my-project
➜  ~/Projects/my-project  npm audit    
# npm audit report

trim-newlines  <3.0.1
Severity: high
Regular Expression Denial of Service in trim-newlines - https://github.com/advisories/GHSA-7p7h-4mm5-852v
fix available via `npm audit fix --force`
Will install @remix-run/[email protected], which is a breaking change
node_modules/chalk-animation/node_modules/trim-newlines
  meow  3.4.0 - 5.0.0
  Depends on vulnerable versions of trim-newlines
  node_modules/chalk-animation/node_modules/meow
    chalk-animation  >=1.4.0
    Depends on vulnerable versions of meow
    node_modules/chalk-animation
      @remix-run/dev  <=0.0.0-experimental-fde68a7 || >=1.3.0-pre.1
      Depends on vulnerable versions of chalk-animation
      node_modules/@remix-run/dev

4 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Error when trying to run the docker image

What version of Remix are you using?

1.19.3

Are all your remix dependencies & dev-dependencies using the same version?

Steps to Reproduce

I first ran:

docker build -t sidah/demo:1.0
docker run sidah/demo:1.0
Here is the full error trace:

/myapp/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:10
        throw new Error(prefix);
              ^
Error: Invariant failed
    at invariant (/myapp/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:10:15)
    at getClient (/myapp/build/index.js:153:37)
    at Object.<anonymous> (/myapp/build/index.js:150:10)
    at Module._compile (node:internal/modules/cjs/loader:1198:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
    at Module.load (node:internal/modules/cjs/loader:1076:32)
    at Function.Module._load (node:internal/modules/cjs/loader:911:12)
    at Module.require (node:internal/modules/cjs/loader:1100:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at Object.<anonymous> (/myapp/build/server.js:45110:77)

Expected Behavior

Expected the app to run successfully.

Actual Behavior

The app fails to run:

/myapp/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:10
        throw new Error(prefix);
              ^
Error: Invariant failed
    at invariant (/myapp/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:10:15)
    at getClient (/myapp/build/index.js:153:37)
    at Object.<anonymous> (/myapp/build/index.js:150:10)
    at Module._compile (node:internal/modules/cjs/loader:1198:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
    at Module.load (node:internal/modules/cjs/loader:1076:32)
    at Function.Module._load (node:internal/modules/cjs/loader:911:12)
    at Module.require (node:internal/modules/cjs/loader:1100:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at Object.<anonymous> (/myapp/build/server.js:45110:77)

v2_dev leaves one node process behind after shutdown

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

Yes

Steps to Reproduce

Confirm no node process running:

npm run dev and confirm 4 node processes running

ctrl-c to shut down the dev server, and there's one dangling node process

Expected Behavior

All node processes are cleared after shutdown.

Actual Behavior

One node process left.

Deployment issue. Node version >18 needed

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

Yes

Steps to Reproduce

Commit and push to main.

Expected Behavior

Github actions will run the deploy workflow correctly with no issues.

Actual Behavior

Github actions fails on the deploy workflow due to requiring a minimum node version of 18 or above.

Currently, we have an image of node:16-bullseye-slim.

New Defer API does not work with blues-stack

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

Yes

Steps to Reproduce

Setup the project
Create account and sign in
Update loader in notes.tsx to return defer instead of json

Expected Behavior

I would expect that just changing to defer while still resolving the promise in the loader would still work without any other changes, since the data is being awaited in the loader.

Actual Behavior

The page errors with TypeError: Cannot read properties of undefined (reading 'length')

When looking at the value of data from const data = useLoaderData<typeof loader>();, it looks like this:

DeferredData {
  pendingKeysSet: Set(0) {},
  subscribers: Set(0) {},
  deferredKeys: [],
  abortPromise: Promise { <pending> },
  controller: AbortController { signal: AbortSignal { aborted: false } },
  unlistenAbortSignal: [Function (anonymous)],
  data: { noteListItems: [] },
  init: { headers: { 'content-type': 'application/json; charset=utf-8' } }
}

This shape seems wrong to me. You should have to access the real data via data.data, right?