Remix Framework

2.17.4 · active · verified Sat Apr 18

Remix is a full-stack web framework for building better websites with a focus on web standards and modern user experience. The current stable version is 2.17.4. Recent releases indicate a move towards version 3 with significant architectural changes, particularly in data handling and request context management, which are being rolled out through alpha versions and updates to core sub-packages like `session-middleware` and `fetch-router`.

Common errors

```
TypeError: Cannot read properties of undefined (reading 'session')
```
cause Attempting to access `context.session` after `session-middleware` was updated.

fix Update your code to access session state using `context.get(Session)` instead of `context.session`.
```
TypeError: Cannot read properties of undefined (reading 'formData')
```
cause Attempting to access `context.formData` or `context.files` after `form-data-middleware` was updated.

fix Update your code to access parsed form data using `context.get(FormData)` instead of `context.formData` or `context.files`.
```
Module not found: Error: Can't resolve 'remix/data-table/sql'
```
cause Importing `SqlStatement`, `sql`, or `rawSql` from the deprecated `remix/data-table/sql` path in Remix v3.

fix Change your import statement to `import { SqlStatement, sql } from 'remix/data-table';`.
```
Property 'action' does not exist on type 'BuildAction'. Did you mean 'handler'?
```
cause Using `action` property instead of `handler` in an action object definition after `fetch-router` update.

fix Rename the `action` property to `handler` in your action object definitions (e.g., `router.get({ handler: ... })`).
```
MaxPartsExceededError: Maximum number of parts exceeded
```
cause A multipart request exceeded the default `maxParts` limit set by `multipart-parser` or `form-data-parser`.

fix Increase the `maxParts` option in the `parseMultipart()` or `parseFormData()` call if you expect larger requests, e.g., `parseMultipart(request, { maxParts: 1000 })`.

Warnings

breaking Session state access has changed from `context.session` to `context.get(Session)`.
Fix: Replace direct access to `context.session` with `context.get(Session)` for session data.
breaking Parsed form data is no longer available via `context.formData` or `context.files`. It must be accessed via `context.get(FormData)`.
Fix: Update your code to use `context.get(FormData)` to retrieve parsed form data and uploaded files.
breaking Action object definitions (e.g., in `router.get`, `router.post`) now require the property `handler` instead of `action` for specifying the handler function.
Fix: Rename the `action` property to `handler` in your action object definitions.
breaking The `remix/data-table/sql` export has been removed. `SqlStatement`, `sql`, and `rawSql` must now be imported directly from `remix/data-table`.
Fix: Change import statements from `remix/data-table/sql` to `remix/data-table`.
gotcha `parseMultipart()`, `parseMultipartStream()`, and `parseMultipartRequest()` now enforce finite default `maxParts` and `maxTotalSize` limits, potentially causing `MaxPartsExceededError` or `MaxTotalSizeExceededError` for large requests.
Fix: For large multipart requests, explicitly raise the `maxParts` or `maxTotalSize` limits when calling the parsing functions.

Install

npm install remix npm
yarn add remix yarn
pnpm add remix pnpm

Imports

SqlStatement
```
import { SqlStatement } from 'remix/data-table';
```
This import path is for the upcoming Remix v3 (e.g., remix@3.0.0-alpha.4). Stable Remix 2.x typically imports from '@remix-run/node' or '@remix-run/react'.

Quickstart

This example demonstrates defining a SQL statement using the `SqlStatement` and `sql` template literal tag from `remix/data-table`. This API is part of the new data layer introduced in Remix v3, allowing for type-safe SQL query construction.

import { SqlStatement, sql } from 'remix/data-table';

interface User {
  id: string;
  name: string;
}

async function getUsersQuery(nameFilter?: string): Promise<SqlStatement<User[]>> {
  let query = sql`SELECT id, name FROM users`;
  if (nameFilter) {
    query = sql`${query} WHERE name = ${nameFilter}`;
  }
  return query as SqlStatement<User[]>;
}

async function runExample() {
  // In a real app, this would be executed by a Database adapter.
  const statement = await getUsersQuery('Alice');
  console.log('Generated SQL:', statement.sql);
  console.log('Parameters:', statement.params);
}

runExample();

view raw JSON →