remix-run / examples

A community-driven repository showcasing examples using Remix 💿

Remix Examples

Welcome to @remix-run/examples, the community-driven repository.

Here you'll find various examples of using Remix to accomplish certain tasks.

Each example is a complete application including a build and even a button to preview a live instance of the app so you can play with it.

Remember to check out the README for each example before getting started.

You can also initialize a new project with any of these examples using the --template flag of the create-remix CLI.

For example:

npx [email protected] --template examples/<example-dir>

Enjoy!

Contributing

Please see our contribution guide.

examples's Issues

Redirect param in /new route

Inside the /new.tsx file, I have find this line of code : return redirect(/threads/${thread.id}?redirectTo=/threads/new);
What is ?redirectTo inside that redirection? The Joke tutorial on the remix site don't have this url param.

Add sandbox.config.json to all examples

Seems to be missing in vanilla-extract, google-analytics, ..
Make sure to take #30 in account.

Mantine example is not working

Emotion example is poorly performant, re-rendering over 50 times a second

What version of Remix are you using?

1.2.3

Steps to Reproduce

1. Download the example app:

$ svn export https://github.com/remix-run/remix/tree/main/examples/emotion

2. Install dependencies
3. Log style re-render trigger:

$ vim app/entry.client.tsx # Add `console.log("🚨 RERENDER 🚨")` in `reset()` function body

4. Run app:

$ npm run dev

5. Look at the console:
   

This is not only re-applying the style tags, but also re-rendering the entire app tree over 50 times a second, which isn't good at all. See my comment below for a suggestion on how to combat this problem.

Expected Behavior

A fast app

Actual Behavior

An app that is flooded with console warnings and re-renders

Chakra Error/Catch Boundaries lose ChakraContext - but only sometimes

I have the example chakra repo as a base template, I have not modified the provided Error/Catch Boundaries in the root.tsx, and I have none elsewhere.

I have noticed that sometimes when one of these boundaries are hit, there is no theme at all, sometimes there is.

For example: If I navigate directly to a page that doesn't exist I get (with theme):

If I click a link inside my app that takes me to a page that doesn't exist (same url):

The Chakra Theme is missing.

There are also other instances eg when throwing / erroring from a loader - sometimes the theme is there, sometimes it isn't there, though I haven't been able to narrow down when so can't provide replication for that.

In all instances though, pressing "Back" on my browser will take me back BUT there is NO theme / styling whatsoever on the previous page, it's just plain text/images, it's like all the css has completely disappeared.

I also tried following the example provided by Chakra (which uses renderToString instead of renderToPipeableStream, but then error boundaries are even worse and looking at their issues, you have to create a bunch of dunder routes and it's a real trickery to get anything working (and then of course you lose the streaming ability).

way to install all examples at once?

Is there a way to install all examples at once?

Upgrade S3 example to use the newest SDK.

Recently, the AWS SDK v3 has been released and its now the recommended way to interact with AWS.

I tried to upgrade the S3 example myself, like this:

// ... in s3.server.ts
const {
  AWS_ACCESS_KEY_ID,
  AWS_SECRET_ACCESS_KEY,
  S3_STORAGE_BUCKET,
  S3_STORAGE_REGION,
} = process.env;

invariant(AWS_ACCESS_KEY_ID, 'AWS_ACCESS_KEY_ID is required');
invariant(AWS_SECRET_ACCESS_KEY, 'AWS_SECRET_ACCESS_KEY is required');
invariant(S3_STORAGE_BUCKET, 'S3_STORAGE_BUCKET is required');
invariant(S3_STORAGE_REGION, 'S3_STORAGE_REGION is required');

// ... rest stays same

export const uploadStream = ({
  Key,
}: Pick<PutObjectCommandInput, 'Key'>) => {
  const s3Client = new S3Client({ region: S3_STORAGE_REGION });
  const pass = new PassThrough();
  return {
    writeStream: pass,
    promise: s3Client.send(
      new PutObjectCommand({
        Body: pass,
        Bucket: S3_STORAGE_BUCKET,
        Key,
      }),
    ),
  };
};

// ... rest stays same

But it doesn't work because an error is thrown:

error NotImplemented: A header you provided implies functionality that is not implemented
    at throwDefaultError (/Users/dev/remix-app/node_modules/@aws-sdk/smithy-client/dist-cjs/default-error-handler.js:8:22)
    at deserializeAws_restXmlPutObjectCommandError (/Users/dev/remix-app/node_modules/@aws-sdk/client-s3/dist-cjs/protocols/Aws_restXml.js:5782:43)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at /Users/dev/remix-app/node_modules/@aws-sdk/middleware-serde/dist-cjs/deserializerMiddleware.js:7:24
    at /Users/dev/remix-app/node_modules/@aws-sdk/middleware-signing/dist-cjs/middleware.js:14:20
    at /Users/dev/remix-app/node_modules/@aws-sdk/middleware-retry/dist-cjs/retryMiddleware.js:27:46
    at /Users/dev/remix-app/node_modules/@aws-sdk/middleware-flexible-checksums/dist-cjs/flexibleChecksumsMiddleware.js:58:20
    at /Users/dev/remix-app/node_modules/@aws-sdk/middleware-logger/dist-cjs/loggerMiddleware.js:5:22
    at uploadStreamToS3 (/Users/dev/remix-app/app/features/recording/s3-upload-handler.server.ts:106:11) {
  '$fault': 'client',
  '$metadata': {
    httpStatusCode: 501,
    requestId: 'NSK9FW5CE2TW3NAN',
    extendedRequestId: '0zWgQIB0xmMtUuIYThFgN1MdD8hXAj/VcjHUaabT3RiB7jmh6hlTNfsDbxq9M6EMwp5rgAlVfcY=',
    cfId: undefined,
    attempts: 1,
    totalRetryDelay: 0
  },
  Code: 'NotImplemented',
  Header: 'Transfer-Encoding',
  RequestId: 'NSK9FW5CE2TW3NAN',
  HostId: '0zWgQIB0xmMtUuIYThFgN1MdD8hXAj/VcjHUaabT3RiB7jmh6hlTNfsDbxq9M6EMwp5rgAlVfcY='
}

by this line:

const file = await stream.promise;

in uploadStreamToS3().

I'm not skilled in S3, so I have no idea how to fix this.

Reach UI is not being actively maintained

The sad truth is that the library used in the examples is slowing down development reach/reach-ui#972 which means dependency issues that are already cropping up.

Will the examples be updated if ol' reliable goes down? I'd love to learn how to implement components with Radix or React Aria but I haven't had much luck after a full day of mud wrestling in Remix trying to make the switch.

For now it's an .npmrc file with legacy-peer-deps=true as I learned today the hard way.

Thank you so much! <3

Run `tsc` on changed examples

As reported by @mcansh in #83 (comment), we had some TypeScript errors when fixing the useActionData/useLoaderData usage.

It would be great if we could run tsc in CI, so we don't have to manually check for these kind of errors.

As I pointed out in #83 (comment), this would require running npm install & sometimes even more (like npx prisma migrate dev), otherwise TypeScript would complain. 😢
This could be solved by having a setup script, but that still would require us to run npm install && npm run -s setup on all example folders (see #83 (comment)).

@mcansh Pointed out this could be prevented by only running the changed example and not the others (see #83 (comment)), which would probably require some git magic, but isn't unnecessary complicated I think.

with twind example has some error

Error: Cannot find module '/sandbox/build/index.js'
Require stack:

• /sandbox/node_modules/@remix-run/serve/dist/index.js
• /sandbox/node_modules/@remix-run/dev/dist/cli/commands.js
• /sandbox/node_modules/@remix-run/dev/dist/cli/run.js
• /sandbox/node_modules/@remix-run/dev/dist/cli/index.js
• /sandbox/node_modules/@remix-run/dev/dist/index.js
• /sandbox/node_modules/@remix-run/dev/dist/cli.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
  at Function.Module._load (internal/modules/cjs/loader.js:746:27)
  at Module.require (internal/modules/cjs/loader.js:974:19)
  at require (internal/modules/cjs/helpers.js:101:18)
  at /sandbox/node_modules/@remix-run/serve/dist/index.js:43:17
  at Layer.handle [as handle_request] (/sandbox/node_modules/express/lib/router/layer.js:95:5)
  at next (/sandbox/node_modules/express/lib/router/route.js:144:13)
  at next (/sandbox/node_modules/express/lib/router/route.js:140:7)
  at next (/sandbox/node_modules/express/lib/router/route.js:140:7)
  at next (/sandbox/node_modules/express/lib/router/route.js:140:7)

No "working" styled-components example

What version of Remix are you using?

1.12.0

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

• Yes

Steps to Reproduce

official styled-components example

Expected Behavior

That it will render both on first load as well as consecutive loads without err.

Actual Behavior

Exhibits the hydration issues mentioned here.
However, in our experience, the styles match fine on FIRST load. Only on page refresh do them become broken. Even with JS disabled this issue persists, which leads me to believe the issue is strictly an SSR one for the moment.

It does not appear that it will work with any SSR without the aid of babel-plugin-styled-components which itself is not supported in Remix since it doesn't seem we have access to plugins or modifying esbuild config.

As a comparison, Next.js allows you to control webpack option values from a configuration file (next.config.js) so they can implement the needed plugins. A member of the development team says in a PR comment that this is because exposing the configuration values would lock in the compiler's choices and also risk breaking the application.

This limitation seems to be leading some remix users to implement workarounds using a custom module to override esbuild.

Then there are a number of other mentions out there of similar issues that link around and I'm not even quite sure if its relates to the same hydration issue or not, but certainly sounds like it would affect the existing example.

There are even posts about how to do this with NextJS that say there are no issues.... but that seems odd when the example doesnt seem to need babel-plugin-styled-components.

@kentcdodds mentions a possible fix here using patch-package, however then @jmurzy mentions that the needed code is stripped out, rendering that possible fix incomplete.

For added injury, we also need to get Material-UI v4 working, which seems to have exactly the same issue. First load, all the style names match up, on reload, none match. This is also with JS disabled, so it appears again to be an SSR only issue.

Conclusion

None of the methods above seem to work for us, and we're currently not clear if its because we use pnpm or that it's a monorepo, or that we also implement our own custom react ui lib that also uses babel-plugin-styled-components but in any case, none seem to work.

We're VERY much wanting to migrate all our sites to Remix but need to slowly migrate away from styled-components, and not cold-turkey cut it off. So we need a migration path for styled-components with Remix.

More severe hydration problems with styled-components

Hey there 👋 I recently encountered a pretty severe issue with remix + styled components.

ref styled-components/styled-components#3924

1. Hydration errors in Production

In some cases the hydration errors described commonly when working with sc and remix in dev also happen in production. I'm not able to 100% validate that the errors stem from styled-components but i'm pretty confident. Also it's totally unpredictable when those occur. I have 2 out of ~15 colleges that can reproduce these stably on Chrome. I was not able to reproduce them at all. (Might be related to something like Network Speed, Performance of the Machine or Browser Extensions).

2. Causing unstyled content

When such a hydration error occurs, since Remix operates on the complete document, react throws away EVERYTHING and rebuilds the complete DOM from scratch.
Now styled components might be in a state where it already injected it's <style/> element into the <head /> of the document and won't re-check the presence of that when react re-builds the document. This creates a broken page where all styles from SC are missing.

auth0 example is broken

Trying to run the remix-auth-auth0 locally or in Codesandbox results in the following error when you click the login button:

TypeError: Cannot read property 'startsWith' of undefined
    at Auth0Strategy.getCallbackURL (/sandbox/node_modules/remix-auth-oauth2/build/index.js:182:30)
    at Auth0Strategy.authenticate (/sandbox/node_modules/remix-auth-oauth2/build/index.js:78:32)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at Object.callRouteActionRR (/sandbox/node_modules/@remix-run/server-runtime/dist/data.js:24:16)
    at callLoaderOrAction (/sandbox/node_modules/@remix-run/router/router.ts:3125:14)
    at submit (/sandbox/node_modules/@remix-run/router/router.ts:2609:16)
    at queryImpl (/sandbox/node_modules/@remix-run/router/router.ts:2544:22)
    at Object.queryRoute (/sandbox/node_modules/@remix-run/router/router.ts:2494:18)
    at handleDataRequestRR (/sandbox/node_modules/@remix-run/server-runtime/dist/server.js:81:20)
    at requestHandler (/sandbox/node_modules/@remix-run/server-runtime/dist/server.js:55:18)

Client Only Components Example has a Dependency Issue

When running npm i for the client-only components example, I get the following output:

(base) [email protected]:~/Documents/GitHub/examples/client-only-components$ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   [email protected]"^18.2.0" from the root project
npm ERR!   peer [email protected]">=16.8" from @remix-run/[email protected]
npm ERR!   node_modules/@remix-run/react
npm ERR!     @remix-run/[email protected]"*" from the root project
npm ERR!     peer @remix-run/[email protected]"^1.1.1" from [email protected]
npm ERR!     node_modules/remix-utils
npm ERR!       [email protected]"^2.7.0" from the root project
npm ERR!   1 more (react-dom)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer [email protected]"^17.0.2" from [email protected]
npm ERR! node_modules/remix-utils
npm ERR!   [email protected]"^2.7.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/nick/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/nick/.npm/_logs/2023-02-07T17_04_21_010Z-debug-0.log

Can someone help me update this?

styled-components example not updated

I start a new project with npx [email protected] command and my entry.server.tsx file has 111 lines of code.
Styled-components entry.server.tsx file has only 29 line of code.

Can you update that example?

The exemple code use return new Response("<!DOCTYPE html>" + markup, {
But last remix version use new PassThrough() has new body value:

          const body = new PassThrough();

          responseHeaders.set("Content-Type", "text/html");

          resolve(
            new Response(body, {
              headers: responseHeaders,
              status: didError ? 500 : responseStatusCode,
            })
          );

Typecheck fails on blog-tutorial example

When I run typechecking or have my editor open, the following errors are shown by typescript, even on a fresh clone of the example:

> typecheck
> tsc -b && tsc -b cypress

app/routes/notes/$noteId.tsx:36:16 - error TS2352: Conversion of type 'SerializeObject<Simplify<{ note: Note; } & {}>>' to 
type 'LoaderData' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, conv
ert the expression to 'unknown' first.
  The types of 'note.createdAt' are incompatible between these types.
    Type 'string' is not comparable to type 'Date'.

36   const data = useLoaderData() as LoaderData;
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

app/routes/posts/$slug.tsx:23:26 - error TS2352: Conversion of type 'SerializeObject<Simplify<{ post: Post; html: string; }
 & {}>>' to type 'LoaderData' may be a mistake because neither type sufficiently overlaps with the other. If this was inten
tional, convert the expression to 'unknown' first.
  The types of 'post.createdAt' are incompatible between these types.
    Type 'string' is not comparable to type 'Date'.

23   const { post, html } = useLoaderData() as LoaderData;
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

app/routes/posts/admin.tsx:16:21 - error TS2352: Conversion of type 'SerializeObject<Simplify<{ posts: Post[]; } & {}>>' to
 type 'LoaderData' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, con
vert the expression to 'unknown' first.
  Types of property 'posts' are incompatible.
    Type 'SerializeObject<Simplify<{ createdAt: Date; updatedAt: Date; title: string; slug: string; markdown: string; } & {
}>>[]' is not comparable to type 'Post[]'.
      Type 'SerializeObject<Simplify<{ createdAt: Date; updatedAt: Date; title: string; slug: string; markdown: string; } &
 {}>>' is not comparable to type 'Post'.

16   const { posts } = useLoaderData() as LoaderData;
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

app/routes/posts/index.tsx:18:21 - error TS2352: Conversion of type 'SerializeObject<Simplify<{ posts: Post[]; } & {}>>' to
 type 'LoaderData' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, con
vert the expression to 'unknown' first.
  Types of property 'posts' are incompatible.
    Type 'SerializeObject<Simplify<{ createdAt: Date; updatedAt: Date; title: string; slug: string; markdown: string; } & {
}>>[]' is not comparable to type 'Post[]'.

18   const { posts } = useLoaderData() as LoaderData;
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 4 errors.

What seems to be happening is that createdAt is a string rather than a date somewhere in between (in Prisma, maybe). A temporary workaround is to convert the result of useLoaderData to unknown and then LoaderData, but this isn't the best solution. This problem happens regardless of the TS version (both 4.7 and 4.8 result in an error). Is there a known solution to this?

Followed Remix / Stitches Example and getting FOUC

What version of Remix are you using?

1.1.3

Steps to Reproduce

Visit https://california-custom-tile.netlify.app/ and notice shift of logo due to FOUC. I applied example project found here and am unable to resolve the flash of unstyled content. I originally followed this tutorial as it was the only writing I could find at the time tying Stitches and Remix together.

Here's all the relevant changes I made following the example.

Expected Behavior

Logo should NOT shift from left side to center from a flash of unstyled content (FOUC). Logo should be centered on load

Actual Behavior

Logo shifts from left side to right because of FOUC.

CodeSandbox for DataLoader Example doesn't work

https://codesandbox.io/s/github/remix-run/examples/tree/main/dataloader loads up but the CodeSandbox browser returns a 502: Bad Gateway :\

Framer route animation example with useLoaderData

It seems AnimatePresence will keep outlet around causing useLoaderData to return undefined

Can be reproduced here https://codesandbox.io/s/delicate-star-m8sx7s

If you go to about page you get TypeError: Cannot destructure property 'data' of 'useLoaderData(...)' as it is undefined.

This issue is likely related to remix-run/react-router#8936

Hydration issue with the Google Analytics example

If you put the <script> tags in a client-only wrapper, gtag never gets loaded/defined and gtag.pageview never fires:

If you follow the <script> embedding example from this repo's root.tsx file, hydration errors ensue:

Has anyone had any luck figuring out a way around this?

create-remix: Valid template raise and error

Cannot create new project with the template:

✦ npx [email protected] --template examples/chakra-ui
🚨 The template could not be verified. Please double check that the template is a valid project directory in https://github.com/remix-run/remix/tree/main/examples and try again.

While chakra-ui is exists in this directory https://github.com/remix-run/examples/tree/main/chakra-ui

Upload Multiple files from input type files with attribute multiple

I am trying to upload multiple files from one input tag with the attribute multiple. How do i return the multiple files selected from the fileUploadHandler. I do not see any examples of this anywhere online. Only for one file! Thank you for the help!

import {
  json,
  LoaderArgs,
  unstable_parseMultipartFormData,
} from "@remix-run/node";
import { Form } from "@remix-run/react";
import { fileUploadHandler } from "~/fileUpload/index.server";

// import { fileUploadHandler } from "~/fileUpload/index.server";

// File for file Upload is in .server for bundle
// import {
//   unstable_composeUploadHandlers, unstable_createFileUploadHandler, unstable_createMemoryUploadHandler
// } from "@remix-run/node";

// export const fileUploadHandler = unstable_composeUploadHandlers(
//   unstable_createFileUploadHandler({
//     avoidFileConflicts: true,
//     file: ({ filename }) => filename,
//     maxPartSize: 5_000_000,
//   }),
//   unstable_createMemoryUploadHandler()
// );

export const meta = () => ({
  charset: "utf-8",
  title: "MultiFormTemplate",
  viewport: "width=device-width,initial-scale=1",
});

export let loader = async ({ request }: LoaderArgs) => null;

export async function action({ request }: ActionArgs) {
  const errors = {};
  const response = new Response();

  try {
    const form = await unstable_parseMultipartFormData(
      request,
      fileUploadHandler
    );
    const multipleFiles = form.get("multiple-files");
    const FirstName = form.get("FirstName");
    const values = {
      FirstName: FirstName,
    };
    // // validate the fields
    if (!FirstName) {
      errors.FirstName = "First name is required";
    }
    // return data if we have errors
    if (Object.keys(errors).length) {
      return json({ errors, values });
    }

    //How do i get multiple files here!! Only returns one!!
    console.log(multipleFiles);

    // else return the error
    return json(values, {
      status: 200,
      headers: { "Cache-Control": "no-store" },
    });
  } catch (errors) {
    console.log("errors", errors);
    return json({ errors }, { status: 500 });
  }
}

export default function MultiFormTemplate() {
  return (
    <div>
      <h4>MultiFormTemplate</h4>
      <Form method="post" encType="multipart/form-data">
        <input id="FirstName" name="FirstName" />
        <label htmlFor="multiple-files">Multiple Photos</label>
        <input type="file" id="multiple-files" name="multiple-files" multiple />
        <button type="submit">Submit</button>
      </Form>
    </div>
  );
}

MSW example not working

I am actually using the "indie stack" of remix, and I'm struggling to find a working setting for msw to work on both server and client side, I thought I would look into the example to find my solution but could not make this example works

here is the step I took :

npx [email protected] --template examples/msw

? TypeScript or JavaScript? (Use arrow keys)
❯ TypeScript 
  JavaScript

? Do you want me to run `npm install`? (Y/n) y

Then running the dev server

$ npm run dev

> dev
> remix dev

Watching Remix app in development mode...
💿 Built in 327ms
Remix App Server started at http://localhost:3000 (http://xxx.xxx.xx.x:3000)

When accessing the browser, here is what popup in my terminal :

There was an error running the data loader for route root
FetchError: request to https://my-mock-api.com/ failed, reason: getaddrinfo ENOTFOUND my-mock-api.com
    at ClientRequest.<anonymous> (/xxxxxx/remix-example/node_modules/@remix-run/web-fetch/src/fetch.js:111:11)
    at ClientRequest.emit (node:events:513:28)
    at TLSSocket.socketErrorListener (node:_http_client:494:9)
    at TLSSocket.emit (node:events:513:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at processTicksAndRejections (node:internal/process/task_queues:82:21)
GET / 500 - - 112.438 ms
GET /mockServiceWorker.js 404 - - 3.404 ms

GET /mockServiceWorker.js 404 - - 3.404 ms disappear if I run the msw init command line: npx msw init public/ --save

in the "indie stack", it looks like the initialization of msw is done differently with something like that in package.json :

{
...
"dev:remix": "cross-env NODE_ENV=development binode --require ./mocks -- @remix-run/dev:remix dev",
...
}

AWS S3 Sample returns object if no file selected

Why "AWS S3 Sample" returns an object if no file selected?. Can we just return empty string?

Currenlty it returns something like:
{ _name: '', _lastModified: 1671726592818 }

Basic template with a lot of stuff

Moved to remix-run/remix#4558

The socket.io example does not show how to send messages from the server

It would be great to show how to send messages from the server in the socket.io example.

The reason it doesn't seem obvious to me is because the io server is defined in the server/index.js file which is a Javascript CommonJS file, but if for instance I want to broadcast a websocket message after doing a database update with Prisma, I would need to access this same io object from a Typescript ESModules file, and I have no idea how to do that.

Or if someone could nudge me in the right direction, I might be able to send a pull request.

How to implement CSS-in-JS with updated server code?

The current docs/example does not match up to the current default entry.server.{js|tsx} file so we're not sure how to implement in the latest code. Seems like a lot of juice-goodness in the new code we don't want to loose by just replacing that file with the example code.

Going to try my hand at figuring it out, but would love if someone who knows how to get it to work with the full default code could provide an update here. I'm happy to put a PR in, but just need to know how to get it to work.

Current example entry.server

https://github.com/remix-run/examples/blob/main/styled-components/app/entry.server.tsx#L1-L29

Current default entry.server

https://github.com/remix-run/remix/blob/main/templates/remix/app/entry.server.tsx#L1-L111

_official-realtime-app can't be run

Hi, when I run the example I get the error

node: bad option: --watch
ERROR: "dev:server" exited with 9.

my node version is 18.9.1

way to reproduce the error

npm install
npm run dev

Official Getting Started blog-tutorial not able to seed new Post – is this a bug?

I am following this tutorial, and everything was going well until I tried to seed the new Post model using npx prisma db seed:
https://remix.run/docs/en/v1/tutorials/blog

I have added

model Post {
  slug     String @id
  title    String
  markdown String

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

to prisma/schema.prisma, but it will not allow me to seed the new model to the schema. I have tried restarting VSCode, and deleting node_modules and rerunning npm install, but typescript is always unable to compile.

% npx prisma db push      
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": SQLite database "data.db" at "file:./data.db?connection_limit=1"

The database is already in sync with the Prisma schema.

✔ Generated Prisma Client (4.3.1 | library) to ./node_modules/@prisma/client in 58ms`

`% npx prisma db seed
Environment variables loaded from .env
Running seed command `ts-node --require tsconfig-paths/register prisma/seed.ts` ...
../blog-tutorial/node_modules/ts-node/src/index.ts:859
    return new TSError(diagnosticText, diagnosticCodes, diagnostics);
           ^
TSError: ⨯ Unable to compile TypeScript:
prisma/seed.ts:81:18 - error TS2339: Property 'post' does not exist on type 'PrismaClient<PrismaClientOptions, never, RejectOnNotFound | RejectPerOperation | undefined>'.

81     await prisma.post.upsert({
                    ~~~~

    at createTSError (/blog-tutorial/node_modules/ts-node/src/index.ts:859:12)
    at reportTSError (/blog-tutorial/node_modules/ts-node/src/index.ts:863:19)
    at getOutput (/blog-tutorial/node_modules/ts-node/src/index.ts:1077:36)
    at Object.compile (/blog-tutorial/node_modules/ts-node/src/index.ts:1433:41)
    at Module.m._compile (/blog-tutorial/node_modules/ts-node/src/index.ts:1617:30)
    at Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Object.require.extensions.<computed> [as .ts] (/blog-tutorial/node_modules/ts-node/src/index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
  diagnosticCodes: [ 2339 ]
}

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

I am using Node v16.17.0and NPM v8.15.0.

I am stuck here, any ideas? Thanks

Only allow squash merge in this repository

So that we keep a tidy commit history.

Official blog tutorial is not working

_official-blog-tutorial example is not working.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   [email protected]"^18.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer [email protected]"^16.8.0 || 17.x" from @reach/[email protected]
npm ERR! node_modules/@reach/alert
npm ERR!   @reach/[email protected]"^0.17.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 

Reach UI does not support React 18 yet (reach/reach-ui#916).

We can remove Reach UI dependency here and use any other thing that supports React 18. I can work on a fix if you agree to do so.