Upgrade Remix template to v2.2.0

.changeset/brave-seas-speak.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Safely access `process.env` environment variables other than `NODE_ENV`.

.changeset/rotten-ghosts-exist.md

@@ -0,0 +1,5 @@
+---
+'@sumup/remix-template-circuit-ui': major
+---
+
+Upgraded the template to [Remix 2](https://remix.run/blog/remix-v2).

packages/circuit-ui/components/Headline/Headline.tsx

@@ -41,7 +41,7 @@ export const Headline = forwardRef<HTMLHeadingElement, HeadlineProps>(
     if (
       process.env.NODE_ENV !== 'production' &&
       process.env.NODE_ENV !== 'test' &&
-      !process.env.UNSAFE_DISABLE_ELEMENT_ERRORS &&
+      !process?.env?.UNSAFE_DISABLE_ELEMENT_ERRORS &&
       !as
     ) {
       throw new CircuitError('Headline', 'The `as` prop is required.');

packages/circuit-ui/components/SubHeadline/SubHeadline.tsx

@@ -38,7 +38,7 @@ export const SubHeadline = forwardRef<HTMLHeadingElement, SubHeadlineProps>(
     if (
       process.env.NODE_ENV !== 'production' &&
       process.env.NODE_ENV !== 'test' &&
-      !process.env.UNSAFE_DISABLE_ELEMENT_ERRORS &&
+      !process?.env?.UNSAFE_DISABLE_ELEMENT_ERRORS &&
       !as
     ) {
       throw new CircuitError('SubHeadline', 'The `as` prop is required.');

packages/circuit-ui/components/Title/Title.tsx

@@ -41,7 +41,7 @@ export const Title = forwardRef<HTMLHeadingElement, TitleProps>(
     if (
       process.env.NODE_ENV !== 'production' &&
       process.env.NODE_ENV !== 'test' &&
-      !process.env.UNSAFE_DISABLE_ELEMENT_ERRORS &&
+      !process?.env?.UNSAFE_DISABLE_ELEMENT_ERRORS &&
       !as
     ) {
       throw new CircuitError('Title', 'The `as` prop is required.');

packages/remix-template/app/entry.server.tsx

@@ -7,7 +7,7 @@
 import { PassThrough } from 'node:stream';
 
 import type { EntryContext } from '@remix-run/node';
-import { Response } from '@remix-run/node';
+import { createReadableStreamFromReadable } from '@remix-run/node';
 import { RemixServer } from '@remix-run/react';
 import isbot from 'isbot';
 import { renderToPipeableStream } from 'react-dom/server';
@@ -53,11 +53,12 @@ function handleBotRequest(
         onAllReady() {
           shellRendered = true;
           const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
 
           responseHeaders.set('Content-Type', 'text/html');
 
           resolve(
-            new Response(body, {
+            new Response(stream, {
               headers: responseHeaders,
               status: responseStatusCode,
             }),
@@ -103,11 +104,12 @@ function handleBrowserRequest(
         onShellReady() {
           shellRendered = true;
           const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
 
           responseHeaders.set('Content-Type', 'text/html');
 
           resolve(
-            new Response(body, {
+            new Response(stream, {
               headers: responseHeaders,
               status: responseStatusCode,
             }),

packages/remix-template/app/routes/_index/route.tsx

@@ -1,4 +1,4 @@
-import type { V2_MetaFunction } from '@remix-run/node';
+import type { MetaFunction } from '@remix-run/node';
 import { Title, BodyLarge } from '@sumup/circuit-ui';
 
 import { DocCard } from '../../components/DocCard';
@@ -7,7 +7,7 @@ import styles from './route.module.css';
 
 const title = 'Welcome to Circuit UI + Remix';
 
-export const meta: V2_MetaFunction = () => [
+export const meta: MetaFunction = () => [
   { title },
   {
     name: 'description',

packages/remix-template/package.json

@@ -12,27 +12,27 @@
     "lint:fix": "npm run lint -- --fix"
   },
   "dependencies": {
-    "@remix-run/css-bundle": "^1.18.1",
-    "@remix-run/node": "^1.19.3",
-    "@remix-run/react": "^1.18.1",
-    "@remix-run/serve": "^1.18.1",
+    "@remix-run/css-bundle": "^2.2.0",
+    "@remix-run/node": "^2.2.0",
+    "@remix-run/react": "^2.2.0",
+    "@remix-run/serve": "^2.2.0",
     "@sumup/circuit-ui": "^7.2.0",
     "@sumup/design-tokens": "^6.0.0",
     "@sumup/icons": "^3.3.0",
-    "@sumup/intl": "^1.5.0",
-    "isbot": "^3.6.13",
+    "@sumup/intl": "^1.6.0",
+    "isbot": "^3.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^1.18.1",
-    "@remix-run/eslint-config": "^1.18.1",
+    "@remix-run/dev": "^2.2.0",
+    "@remix-run/eslint-config": "^2.2.0",
     "@sumup/foundry": "^6.1.0",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.0.11",
-    "eslint": "^8.52.0",
-    "typescript": "^5.0.4",
-    "typescript-plugin-css-modules": "^5.0.1"
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "eslint": "^8.53.0",
+    "typescript": "^5.2.2",
+    "typescript-plugin-css-modules": "^5.0.2"
   },
   "engines": {
     "node": ">=18"

packages/remix-template/remix.config.js

@@ -7,12 +7,4 @@ module.exports = {
   // publicPath: "/build/",
   serverModuleFormat: 'cjs',
   serverDependenciesToBundle: ['@sumup/circuit-ui', '@sumup/icons'],
-  future: {
-    v2_dev: true,
-    v2_errorBoundary: true,
-    v2_headers: true,
-    v2_meta: true,
-    v2_normalizeFormMethod: true,
-    v2_routeConvention: true,
-  },
 };