We're excited to announce that support for Vite is now stable in Remix 2.7.0! Ever since the initial unstable release of Remix Vite, we’ve been hard at work refining and extending it over the past few months with help from all of our early adopters and community contributors. This also means that Vite-only features such as SPA Mode, Server Bundles, and basename support are now officially stable as well 😊.

For more information, check out the blog post and the Vite docs.

New `Layout` Export

We've found that it's super common to create your own component in your root route to hold the shared layout/app shell between your Component/ErrorBoundary/HydrateFallback. This is so common (and can also cause some minor edge-case issues such as a FOUC on hydration) that we've incorporated this as a first-class API in 2.7.0.

You can now export an optional Layout component from your root route which will be provided your route component, ErrorBoundary, or HydrateFallback as it's children. For more information, please see the Layout docs and the RFC.

Basename support

React Router has long supported a basename config that allows you to serve your app within a subpath such as http://localhost/myapp/* without having to include the /myapp segment in all of your route paths. This was originally omitted from Remix because v1 nested folders file-convention made it pretty easy to put your route files in a routes/myapp/ folder, giving you the same functionality. There has also been an open proposal from the community to add this functionality.

Two things have since changed that made us reconsider the lack of basename support:

We switched to a flat-file based convention in v2, and it gets far less ergonomic to have to prefix all of your route files with myapp. compared to the nested folder convention
We moved to Vite which has it's own base config which is often (and easily) confused with the concept of a React Router basename (when in reality it's more aligned with the old Remix publicPath config)

In 2.7.0 we've added support for a basename in the Vite plugin config. For more information, please check out the basename docs.

Note: This is a Vite-only feature and is not available via the esbuild compiler.

Cloudflare Proxy as a Vite Plugin

⚠️ This is a breaking change for projects relying on Cloudflare support from the unstable Vite plugin

The Cloudflare preset (unstable_cloudflarePreset) as been removed and replaced with a new Vite plugin:

 import {
    unstable_vitePlugin as remix,
-   unstable_cloudflarePreset as cloudflare,
+   cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
  } from "@remix-run/dev";
  import { defineConfig } from "vite";

  export default defineConfig({
    plugins: [
+     remixCloudflareDevProxy(),
+     remix(),
-     remix({
-       presets: [cloudflare()],
-     }),
    ],
-   ssr: {
-     resolve: {
-       externalConditions: ["workerd", "worker"],
-     },
-   },
  });

A few notes on the new plugin:

remixCloudflareDevProxy must come before the remix plugin so that it can override Vite's dev server middleware to be compatible with Cloudflare's proxied environment
Because it is a Vite plugin, remixCloudflareDevProxy can set ssr.resolve.externalConditions to be workerd-compatible for you
remixCloudflareDevProxy accepts a getLoadContext function that replaces the old getRemixDevLoadContext
If you were using a nightly version that required getBindingsProxy or getPlatformProxy, that is no longer required
Any options you were passing to getBindingsProxy or getPlatformProxy should now be passed to remixCloudflareDevProxy instead
This API also better aligns with future plans to support Cloudflare with a framework-agnostic Vite plugin that makes use of Vite's (experimental) Runtime API.

Minor Changes

@remix-run/react - Allow an optional Layout export from the root route (#8709)
@remix-run/cloudflare-pages - Make getLoadContext optional for Cloudflare Pages (#8701)
- Defaults to (context) => ({ env: context }), which is what we used to have in all the templates
- This gives parity with the Cloudflare preset for the Remix Vite plugin and keeps our templates leaner
@remix-run/dev - Vite: Cloudflare Proxy as a Vite plugin (#8749)
- ⚠️ This is a breaking change for projects relying on Cloudflare support from the unstable Vite plugin
@remix-run/dev - Vite: Add a new basename option to the Vite plugin, allowing users to set the internal React Router basename in order to to serve their applications underneath a subpath (#8145)
@remix-run/dev - Vite: Stabilize the Remix Vite plugin, Cloudflare preset, and all related types by removing all unstable_ / Unstable_ prefixes (#8713)
- While this is a breaking change for existing Remix Vite plugin consumers, now that the plugin has stabilized, there will no longer be any breaking changes outside of a major release. Thank you to all of our early adopters and community contributors for helping us get here! 🙏
@remix-run/dev - Vite: Stabilize "SPA Mode" by renaming the Remix vite plugin config from unstable_ssr -> ssr (#8692)

Patch Changes

@remix-run/express - Use req.originalUrl instead of req.url so that Remix sees the full URL (#8145)
- Remix relies on the knowing the full URL to ensure that server and client code can function together, and does not support URL rewriting prior to the Remix handler
@remix-run/react - Fix a bug with SPA mode when the root route had no children (#8747)
@remix-run/server-runtime - Add a more specific error if a user returns a defer response from a resource route (#8726)
@remix-run/dev - Always prepend DOCTYPE in SPA mode entry.server.tsx, can opt out via remix reveal (#8725)
@remix-run/dev - Fix build issue in SPA mode when using a basename (#8720)
@remix-run/dev - Fix type error in Remix config for synchronous routes function (#8745)
@remix-run/dev - Vite: Fix issue where client route file requests fail if search params have been parsed and serialized before reaching the Remix Vite plugin (#8740)
@remix-run/dev - Vite: Validate that the MDX Rollup plugin, if present, is placed before Remix in Vite config (#8690)
@remix-run/dev - Vite: Fix issue resolving critical CSS during development when the current working directory differs from the project root (#8752)
@remix-run/dev - Vite: Require version 5.1.0 to support .css?url imports (#8723)
@remix-run/dev - Vite: Support Vite 5.1.0's .css?url imports (#8684)
@remix-run/dev - Vite: Enable use of vite preview to preview Remix SPA applications (#8624)
- In the SPA template, npm run start has been renamed to npm run preview which uses vite preview instead of a standalone HTTP server such as http-server or serv-cli
@remix-run/dev - Vite: Remove the ability to pass publicPath as an option to the Remix vite plugin (#8145)
- ⚠️ This is a breaking change for projects using the unstable Vite plugin with a publicPath
- This is already handled in Vite via the base config so we now set the Remix publicPath from the Vite base config
@remix-run/dev - Vite: Enable HMR for .md and .mdx files (#8711)
@remix-run/dev - Vite: reliably detect non-root routes in Windows (#8806)
@remix-run/dev - Vite: Pass remixUserConfig to preset remixConfig hook (#8797)
@remix-run/dev - Vite: Ensure CSS file URLs that are only referenced in the server build are available on the client (#8796)
@remix-run/dev - Vite: fix server exports dead-code elimination for routes outside of app directory (#8795)

Updated Dependencies

Changes by Package

Full Changelog: v2.6.0...v2.7.0

FAQs

What is @vercel/remix?

Is @vercel/remix popular?

Is @vercel/remix well maintained?

Package last updated on 20 Feb 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install