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.

@chaance You last updated the chakra-ui example, so you have some experience with emotion. Could you maybe look into the emotion example as well?

@helderberto Since you're the original creator of the emotion & stitches examples, we would like to have your help as well.

~@kumard3 If you have time to update the styled-components example, we would like to welcome a PR for that.~

~@sergiocarneiro If you could help us updating the styletron example, that would be awesome as well.~

@chaance @machour @mcansh If this PR is too big to review, I'm happy to chop this into a separate PR for each example.

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

Reopening https://github.com/remix-run/remix/pull/4057 against remix-run/examples

Firebase example - Integration with Google Sign-in Provider

Closes: "sign-in with Google" suggestion at https://github.com/remix-run/remix/pull/1811#issuecomment-1050238130

Adds a "Login with Google" link:

...that takes a user to the Google's auth screen:

 ...and then creates an account (if it doesn't yet exist) and signs them in:

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?

Reopening https://github.com/remix-run/remix/pull/3398 against remix-run/examples

Deploy to firebase functions and hosting

Closes: Discussion at https://github.com/remix-run/remix/pull/1811#issuecomment-1050238130

• [x] Docs
• [ ] Tests (I'd happily add Playwright tests if you want these on examples)

Testing Strategy:

• Testing locally against emulator with JS enabled and disabled
• Testing locally against production with JS enabled and disabled
• Following deploy instructions and testing remote with JS enabled and disabled

The default 7 days is a bit short imho. Also reworded the PR related text.

(it was a bit sad to see all the PRs closed for some linting issue, I'd like to reopen them after we merge this)

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 create-remix@latest --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",
...
}

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)

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.

Bumps typescript from 4.9.3 to 4.9.4.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

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).

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 https://github.com/remix-run/react-router/issues/8936

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 }

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