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.3
Breaking 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_dev
instead of just the boolean value (i.e.,future.v2_dev.port
), you can lift them into a rootdev
object in yourremix.config.js
- If you had configurations in
v2_errorBoundary
- RemovedCatchBoundary
in favor of a singularErrorBoundary
(#6906)v2_headers
- Altered the logic forheaders
in nested route scenarios (#6979)v2_meta
- Altered the return format ofmeta()
(#6958)v2_normalizeFormMethod
- NormalizeformMethod
APIs 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
browserBuildDirectory
toassetsBuildDirectory
(#6900) - Removed
devServerBroadcastDelay
(#7063) - Renamed
devServerPort
todev.port
(000457e0
)- Note that if you are opting into this in a
1.x
release, your config flag will befuture.v2_dev.port
, but on a stable2.x
release it will bedev.port
- Note that if you are opting into this in a
- Changed the default
serverModuleFormat
fromcjs
toesm
(#6949) - Removed
serverBuildTarget
(#6896) - Changed
serverBuildDirectory
toserverBuildPath
(#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.type
and 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
postcss
andtailwind
flags (#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_ORIGIN
in favor ofREMIX_DEV_ORIGIN
(#6963) - Removed
REMIX_DEV_SERVER_WS_PORT
in favor ofdev.port
or--port
(#6965) - Removed
--no-restart
/restart
flag in favor of--manual
/manual
(#6962) - Removed
--scheme
/scheme
and--host
/host
in favor ofREMIX_DEV_ORIGIN
instead (#6962) - Removed the
codemod
command (#6918)
- Removed
@remix-run/eslint-config
@remix-run/netlify
- The
@remix-run/netlify
adapter has been removed in favor of the Netlify official adapters (#7058)
- The
@remix-run/node
fetch
is no longer polyfilled by default - apps must callinstallGlobals()
to install the polyfills (#7009)fetch
and 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_shouldReload
in favor ofshouldRevalidate
(#6865)
- Remove
@remix-run/serve
@remix-run/vercel
- The
@remix-run/vercel
adapter has been removed in favor of out of the box functionality provided by Vercel (#7035)
- The
create-remix
- Stop passing
isTypeScript
toremix.init
script (#7099)
- Stop passing
remix
- Removed magic exports (#6895)
Breaking Type Changes
- Removed
V2_
prefixes fromfuture.v2_meta
types as they are now the default behavior (#6958)V2_MetaArgs
->MetaArgs
V2_MetaDescriptor
->MetaDescriptor
V2_MetaFunction
->MetaFunction
V2_MetaMatch
->MetaMatch
V2_MetaMatches
->MetaMatches
V2_ServerRuntimeMetaArgs
->ServerRuntimeMetaArgs
V2_ServerRuntimeMetaDescriptor
->ServerRuntimeMetaDescriptor
V2_ServerRuntimeMetaFunction
->ServerRuntimeMetaFunction
V2_ServerRuntimeMetaMatch
->ServerRuntimeMetaMatch
V2_ServerRuntimeMetaMatches
->ServerRuntimeMetaMatches
- The following types were adjusted to prefer
unknown
overany
and to align with underlying React Router types (#7319):- Renamed the
useMatches()
return type fromRouteMatch
toUIMatch
- Renamed
LoaderArgs
/ActionArgs
toLoaderFunctionArgs
/ActionFunctionArgs
AppData
changed fromany
tounknown
Location["state"]
(useLocation.state
) changed fromany
tounknown
UIMatch["data"]
(useMatches()[i].data
) changed fromany
tounknown
UIMatch["handle"]
(useMatches()[i].handle
) changed from{ [k: string]: any }
tounknown
Fetcher["data"]
(useFetcher().data
) changed fromany
tounknown
MetaMatch.handle
(used inmeta()
) changed fromany
tounknown
AppData
/RouteHandle
are no longer exported as they are just aliases forunknown
- Renamed the
New Features
- New
create-remix
CLI (#6887)- Most notably, this removes the dropdown to choose your template/stack in favor of the
--template
flag and our ever-growing list of available templates - Adds a new
--overwrite
flag (#7062) - Supports the
bun
package 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
redirectDocument
utility to redirect via a fresh document load (#7040, #6842) - Add
error
tometa
params so you can render error titles, etc. (#7105) unstable_createRemixStub
now supports addingmeta
/links
functions on stubbed Remix routes (#7186)unstable_createRemixStub
no longer supports theelement
/errorElement
properties on routes. You must useComponent
/ErrorBoundary
to match what you would export from a Remix route module.
Other Notable Changes
- Remix now uses React Router's
route.lazy
method internally to load route modules on navigations (#7133) - Removed the
@remix-run/node
atob
/btoa
polyfills in favor of the built-in versions (#7206) - Decouple the
@remix-run/dev
package from the contents of the@remix-run/css-bundle
package (#6982)- The contents of the
@remix-run/css-bundle
package 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/dev
without upgrading@remix-run/css-bundle
.
- The contents of the
remix-serve
now picks an open port if 3000 is taken (#7278)- If
PORT
env var is set,remix-serve
will use that port - Otherwise,
remix-serve
picks 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