v2.0.0
Remix v2
We're so excited to release Remix v2 to you and we really hope this upgrade is one of the smoothest framework upgrades you've ever experienced! That was our primary goal with v2 - something we aimed to achieve through a heavy use of deprecation warnings and Future Flags in Remix v1.
If you are on the latest 1.x version and you've enabled all future flags and addressed all console warnings, then our hope is that you are 90% of the way to being upgraded for v2. There are always going to be a few things that we can't put behind a flag (like breaking type changes) or come up at the very last moment and don't have time to add as a warning or flag in 1.x.
If you're not yet on the latest 1.x version we'd recommend first upgrading to that and resolving any flag/console warnings:
> npx upgrade-remix 1.19.3Breaking Changes
Below is a very concise list of the breaking changes in v2.
- For the most thorough discussion of breaking changes, please read the Upgrading to v2 guide. This document provides a comprehensive walkthrough of the breaking changes that come along with v2 - and instructions on how to adapt your application to handle them
- For additional details, you can refer to the Changes by Package section below
Upgraded Dependency Requirements
Remix v2 has upgraded it's minimum version support for React and Node and now officially requires:
- React 18 (#7121)
- For information on upgrading to React 18, please see the React upgrade guide
- Node 18 or later (#6939, #7292)
- For information on upgrading to Node 18, please see the Node v18 announcement
- Please refer to the Remix documentation for an overview of when we drop support for Node versions
Removed Future Flags
The following future flags were removed and their behavior is now the default - you can remove all of these from your remix.config.js file.
v2_dev- New dev server with HMR+HDR (#7002)- If you had configurations in
future.v2_devinstead of just the boolean value (i.e.,future.v2_dev.port), you can lift them into a rootdevobject in yourremix.config.js
- If you had configurations in
v2_errorBoundary- RemovedCatchBoundaryin favor of a singularErrorBoundary(#6906)v2_headers- Altered the logic forheadersin nested route scenarios (#6979)v2_meta- Altered the return format ofmeta()(#6958)v2_normalizeFormMethod- NormalizeformMethodAPIs to uppercase (#6875)v2_routeConvention- Routes use a flat route convention by default now (#6969)
Breaking Changes/API Removals
With deprecation warnings
The following lists other breaking changes/API removals which had deprecation warnings in Remix v1. If you're on the latest 1.19.3 release without any console warnings, then you're probably good to go on all of these!
remix.config.js- Renamed
browserBuildDirectorytoassetsBuildDirectory(#6900) - Removed
devServerBroadcastDelay(#7063) - Renamed
devServerPorttodev.port(000457e0)- Note that if you are opting into this in a
1.xrelease, your config flag will befuture.v2_dev.port, but on a stable2.xrelease it will bedev.port
- Note that if you are opting into this in a
- Changed the default
serverModuleFormatfromcjstoesm(#6949) - Removed
serverBuildTarget(#6896) - Changed
serverBuildDirectorytoserverBuildPath(#6897) - Node built-ins are no longer polyfilled on the server by default, you must opt-into polyfills via
serverNodeBuiltinsPolyfill(#6911
- Renamed
@remix-run/react- Removed
useTransition(#6870) - Removed
fetcher.typeand flattenedfetcher.submission(#6874)<fetcher.Form method="get">is now more accurately categorized asstate:"loading"instead ofstate:"submitting"to better align with the underlying GET request
- Require camelCased versions of
imagesrcset/imagesizes(#6936)
- Removed
Without deprecation warnings
Unfortunately, we didn't manage to get a deprecation warning on every breaking change or API removal 🙃. Here's a list of remaining changes that you may need to look into to upgrade to v2:
remix.config.js- Node built-ins are no longer polyfilled in the browser by default, you must opt-into polyfills via
browserNodeBuiltinsPolyfill(#7269) - PostCSS/Tailwind will be enabled by default if config files exist in your app, you may disable this via the
postcssandtailwindflags (#6909)
- Node built-ins are no longer polyfilled in the browser by default, you must opt-into polyfills via
@remix-run/cloudflare@remix-run/dev- Removed
REMIX_DEV_HTTP_ORIGINin favor ofREMIX_DEV_ORIGIN(#6963) - Removed
REMIX_DEV_SERVER_WS_PORTin favor ofdev.portor--port(#6965) - Removed
--no-restart/restartflag in favor of--manual/manual(#6962) - Removed
--scheme/schemeand--host/hostin favor ofREMIX_DEV_ORIGINinstead (#6962) - Removed the
codemodcommand (#6918)
- Removed
@remix-run/eslint-config@remix-run/netlify- The
@remix-run/netlifyadapter has been removed in favor of the Netlify official adapters (#7058)
- The
@remix-run/nodefetchis no longer polyfilled by default - apps must callinstallGlobals()to install the polyfills (#7009)fetchand related APIs are no longer exported from@remix-run/node- apps should use the versions in the global namespace (#7293)- Apps must call
sourceMapSupport.install()to setup source map support
@remix-run/react- Remove
unstable_shouldReloadin favor ofshouldRevalidate(#6865)
- Remove
@remix-run/serve@remix-run/vercel- The
@remix-run/verceladapter has been removed in favor of out of the box functionality provided by Vercel (#7035)
- The
create-remix- Stop passing
isTypeScripttoremix.initscript (#7099)
- Stop passing
remix- Removed magic exports (#6895)
Breaking Type Changes
- Removed
V2_prefixes fromfuture.v2_metatypes as they are now the default behavior (#6958)V2_MetaArgs->MetaArgsV2_MetaDescriptor->MetaDescriptorV2_MetaFunction->MetaFunctionV2_MetaMatch->MetaMatchV2_MetaMatches->MetaMatchesV2_ServerRuntimeMetaArgs->ServerRuntimeMetaArgsV2_ServerRuntimeMetaDescriptor->ServerRuntimeMetaDescriptorV2_ServerRuntimeMetaFunction->ServerRuntimeMetaFunctionV2_ServerRuntimeMetaMatch->ServerRuntimeMetaMatchV2_ServerRuntimeMetaMatches->ServerRuntimeMetaMatches
- The following types were adjusted to prefer
unknownoveranyand to align with underlying React Router types (#7319):- Renamed the
useMatches()return type fromRouteMatchtoUIMatch - Renamed
LoaderArgs/ActionArgstoLoaderFunctionArgs/ActionFunctionArgs AppDatachanged fromanytounknownLocation["state"](useLocation.state) changed fromanytounknownUIMatch["data"](useMatches()[i].data) changed fromanytounknownUIMatch["handle"](useMatches()[i].handle) changed from{ [k: string]: any }tounknownFetcher["data"](useFetcher().data) changed fromanytounknownMetaMatch.handle(used inmeta()) changed fromanytounknownAppData/RouteHandleare no longer exported as they are just aliases forunknown
- Renamed the
New Features
- New
create-remixCLI (#6887)- Most notably, this removes the dropdown to choose your template/stack in favor of the
--templateflag and our ever-growing list of available templates - Adds a new
--overwriteflag (#7062) - Supports the
bunpackage manager (#7074)
- Most notably, this removes the dropdown to choose your template/stack in favor of the
- Detect built mode via
build.mode(#6964) - Support polyfilling node globals via
serverNodeBuiltinsPolyfill.globals/browserNodeBuiltinsPolyfill.globals(#7269) - New
redirectDocumentutility to redirect via a fresh document load (#7040, #6842) - Add
errortometaparams so you can render error titles, etc. (#7105) unstable_createRemixStubnow supports addingmeta/linksfunctions on stubbed Remix routes (#7186)unstable_createRemixStubno longer supports theelement/errorElementproperties on routes. You must useComponent/ErrorBoundaryto match what you would export from a Remix route module.
Other Notable Changes
- Remix now uses React Router's
route.lazymethod internally to load route modules on navigations (#7133) - Removed the
@remix-run/nodeatob/btoapolyfills in favor of the built-in versions (#7206) - Decouple the
@remix-run/devpackage from the contents of the@remix-run/css-bundlepackage (#6982)- The contents of the
@remix-run/css-bundlepackage are now entirely managed by the Remix compiler. Even though it's still recommended that your Remix dependencies all share the same version, this change ensures that there are no runtime errors when upgrading@remix-run/devwithout upgrading@remix-run/css-bundle.
- The contents of the
remix-servenow picks an open port if 3000 is taken (#7278)- If
PORTenv var is set,remix-servewill use that port - Otherwise,
remix-servepicks an open port (3000 unless that is already taken)
- If
- Updated dependencies:
Changes by Package
create-remix@remix-run/architect@remix-run/cloudflare@remix-run/cloudflare-pages@remix-run/cloudflare-workers@remix-run/css-bundle@remix-run/deno@remix-run/dev@remix-run/eslint-config@remix-run/express@remix-run/node@remix-run/react@remix-run/serve@remix-run/server-runtime@remix-run/testing
Full Changelog: 1.19.3...2.0.0