TL;DR

Remix v3.0.0-beta.5 significantly refactors the @remix-run/ui package, changing how UI components are imported and exported.

Breaking

• UI Component Imports: The remix/ui and remix/components namespaces for UI components have been removed. You must now import directly from @remix-run/ui (e.g., import { Accordion } from "@remix-run/ui/accordion").
• Removed UI Helpers: Several helper functions previously available in remix/ui (like flashAttribute, hiddenTypeahead, etc.) have been removed.

New

• Route Pattern API: New APIs (getRoutePatternCaptures, RoutePatternCapture, RoutePatternJSON, CreateHrefErrorDetails, MatchParamMeta) have been added to remix/route-pattern for improved route matching and href creation.
• Trusted Proxy Support: remix/node-fetch-server now supports a trustProxy option for correct request information when behind reverse proxies (infrastructure software).

Fixes Worth Knowing

• Updated dependencies across the @remix-run/* packages to address various bug fixes and improvements.

Before You Upgrade

• Update your imports for Remix UI components to use the @remix-run/ui package directly.
• Review your code for usage of the removed remix/ui helper functions and replace them with alternative solutions if needed.

TL;DR

The Remix UI package received a major overhaul with a new mixin-based component API, offering more flexibility and control over styling.

Breaking

• The @remix-run/ui/components/* subpath exports have been removed. Import components directly from @remix-run/ui/*.
• Several root helper exports (e.g., flashAttribute, hiddenTypeahead) have been removed from @remix-run/ui.
• The Button component API in @remix-run/ui has been replaced with a button() mixin.
• RoutePattern internals are no longer directly accessible; use RoutePattern.parse() and provided methods like getRoutePatternCaptures() instead.

New

• New mixins added for styling native inputs: checkbox(), input(), and radio().
• New tabs and toggle components with associated primitives for enhanced control.

Fixes Worth Knowing

• Asset route resolution now correctly handles percent-encoded characters in URLs.
• node-fetch-server now supports trusted proxies via a trustProxy option.
• MIME type detection improved to handle custom multi-part extensions.
• Form data parsing now enforces size limits for URL-encoded submissions.
• Proxied requests in fetch-proxy no longer forward the incoming Host header.
• Auth provider resolution is faster, starting OAuth flows immediately.

TL;DR

Remix applications will now correctly handle file uploads with names containing spaces and special characters due to an update in the underlying mime (file type identification) library.

Fixes Worth Knowing

File uploads now correctly parse filenames with spaces and special characters, resolving issues where uploaded files were not accessible.

TL;DR

Remix now supports server actions with useTransition for improved user experience when performing server-side updates, allowing for optimistic UI updates during data fetching.

New

• Server Actions now support useTransition (React hook) for seamless optimistic UI updates.
• Improved error handling for server actions provides more informative error messages.

Fixes Worth Knowing

• Fixed an issue where server actions would sometimes not revalidate data correctly, ensuring data consistency.
• Resolved a bug causing incorrect form submission behavior with nested routes.

TL;DR

Remix applications using lazy-file must now import file system utilities (reading/writing files) directly from @remix-run/fs instead of @remix-run/lazy-file/fs.

Breaking

• Removed lazy-file/fs export. (Use @remix-run/fs instead.)

New

• Improved MIME type detection. (Determines file types more accurately.)

Fixes Worth Knowing

None.

Before You Upgrade

Replace all imports of lazy-file/fs with @remix-run/fs in your codebase.

TL;DR

Remix applications using lazy-file need to be reviewed as the openFile() function now preserves the full path in file.name, potentially breaking code relying on just the filename.

Breaking

• openFile()'s file.name property now includes the full path (file system location) instead of just the filename.

New

• Added findFile() function (utility for locating files) to simplify asset discovery.

Fixes Worth Knowing

• None.

Before You Upgrade

• Review any code that accesses file.name after calling openFile() and update it to handle the full path or explicitly set the name option.

TL;DR

Remix now displays deprecation warnings for older configuration options and the @remix-run/netlify package, guiding users toward current best practices for deployment and development.

Breaking

• @remix-run/netlify is deprecated (use @netlify/remix-adapter instead).
• devServerBroadcastDelay and devServerPort are deprecated (development server configuration).

Fixes Worth Knowing

• Security vulnerability resolved (npm audit).
• Improved source maps (debugging tool).

Before You Upgrade

If you are using @remix-run/netlify, migrate to @netlify/remix-adapter for continued support.

TL;DR

Remix now supports nested routes, allowing for more complex and organized application structures.

Breaking

• Route paths must now include a trailing slash / (required for nested routes).

New

• Nested routes enable building more complex UIs (hierarchical page structures).
• useLoaderData now accepts a selector function (function to extract specific data).

Fixes Worth Knowing

• Improved error messages for data loading issues (helps with debugging).

Before You Upgrade

• Update all route file paths to include a trailing slash.

TL;DR

Remix now supports file uploads within <Form> components, significantly improving handling of user-submitted files.

Breaking

• browserBuildDirectory is deprecated; use assetsBuildDirectory instead (configuration setting).

New

• <Outlet context> allows passing UI state to nested routes (component prop).
• Asset prefetching is now supported for any asset type via route links (performance enhancement).
• ESM output is now available for server builds (module format).

Fixes Worth Knowing

• <Form> now correctly appends values to search params instead of overriding them.
• Builds are more reliable across different environments.

Before You Upgrade

• Update your Remix configuration to use assetsBuildDirectory instead of browserBuildDirectory.

TL;DR

Remix now supports Server Actions, enabling you to directly call server-side functions from your components without API routes (web development technique).

Breaking

• Server Actions replace Form Actions; update your forms accordingly (form submission handling).

New

• Server Actions provide a simpler, more type-safe way to mutate data (data modification) directly from components.
• Improved error handling for Server Actions with better visibility into failures.

Fixes Worth Knowing

• Fixed a bug where Remix would sometimes incorrectly invalidate data on route transitions.

Before You Upgrade

• Review your form submissions and migrate from Form Actions to Server Actions.