diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/entry.client.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/entry.client.tsx index 5a7f045ff5f9..d77a64882a30 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/entry.client.tsx +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/entry.client.tsx @@ -3,6 +3,16 @@ import * as Sentry from '@sentry/remix'; import { StrictMode, startTransition, useEffect } from 'react'; import { hydrateRoot } from 'react-dom/client'; +// Extend the Window interface to include ENV +declare global { + interface Window { + ENV: { + SENTRY_DSN: string; + [key: string]: unknown; + }; + } +} + Sentry.init({ environment: 'qa', // dynamic sampling bias to keep transactions dsn: window.ENV.SENTRY_DSN, diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/entry.server.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/entry.server.tsx index eff2857fb4b1..d3a41fa6012b 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/entry.server.tsx +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/entry.server.tsx @@ -40,11 +40,6 @@ function isBotRequest(userAgent: string | null) { return isbotModule.isbot(userAgent); } - // isbot < 3.8.0 - if ('default' in isbotModule && typeof isbotModule.default === 'function') { - return isbotModule.default(userAgent); - } - return false; } diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/root.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/root.tsx index 517a37a9d76b..eef9aca8c4f1 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/root.tsx +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/root.tsx @@ -52,7 +52,7 @@ export function ErrorBoundary() { } function App() { - const { ENV } = useLoaderData(); + const { ENV } = useLoaderData() as { ENV: { SENTRY_DSN: string } }; return ( diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/routes/navigate.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/routes/navigate.tsx index a84df11e7bb7..3e4930a481ee 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/routes/navigate.tsx +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/routes/navigate.tsx @@ -10,7 +10,7 @@ export const loader: LoaderFunction = async ({ params: { id } }) => { }; export default function LoaderError() { - const data = useLoaderData(); + const data = useLoaderData() as { test?: string }; return (
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/package.json b/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/package.json index 20433c4cd15f..76a003b6c1de 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/package.json +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/package.json @@ -2,7 +2,7 @@ "private": true, "sideEffects": false, "scripts": { - "build": "remix vite:build", + "build": "remix vite:build && pnpm typecheck", "dev": "node ./server.mjs", "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .", "start": "cross-env NODE_ENV=production node ./server.mjs", diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/entry.client.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/entry.client.tsx index 46a0d015cdc0..5207852d10de 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/entry.client.tsx +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/entry.client.tsx @@ -3,6 +3,16 @@ import * as Sentry from '@sentry/remix'; import { StrictMode, startTransition, useEffect } from 'react'; import { hydrateRoot } from 'react-dom/client'; +// Extend the Window interface to include ENV +declare global { + interface Window { + ENV: { + SENTRY_DSN: string; + [key: string]: unknown; + }; + } +} + Sentry.init({ environment: 'qa', // dynamic sampling bias to keep transactions dsn: window.ENV.SENTRY_DSN, diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/entry.server.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/entry.server.tsx index a387f32ee7a6..8f9efd9b6254 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/entry.server.tsx +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/entry.server.tsx @@ -40,11 +40,6 @@ function isBotRequest(userAgent: string | null) { return isbotModule.isbot(userAgent); } - // isbot < 3.8.0 - if ('default' in isbotModule && typeof isbotModule.default === 'function') { - return isbotModule.default(userAgent); - } - return false; } diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/root.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/root.tsx index 517a37a9d76b..eef9aca8c4f1 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/root.tsx +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/root.tsx @@ -52,7 +52,7 @@ export function ErrorBoundary() { } function App() { - const { ENV } = useLoaderData(); + const { ENV } = useLoaderData() as { ENV: { SENTRY_DSN: string } }; return ( diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/routes/navigate.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/routes/navigate.tsx index a84df11e7bb7..3e4930a481ee 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/routes/navigate.tsx +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/routes/navigate.tsx @@ -10,7 +10,7 @@ export const loader: LoaderFunction = async ({ params: { id } }) => { }; export default function LoaderError() { - const data = useLoaderData(); + const data = useLoaderData() as { test?: string }; return (
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/package.json b/dev-packages/e2e-tests/test-applications/create-remix-app-express/package.json index c44b7a8fe5bc..60cdf5b1f635 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-express/package.json +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express/package.json @@ -3,7 +3,7 @@ "sideEffects": false, "type": "module", "scripts": { - "build": "remix vite:build", + "build": "remix vite:build && pnpm typecheck", "dev": "node ./server.mjs", "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .", "start": "cross-env NODE_ENV=production node ./server.mjs", diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/server-errors.test.ts b/dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/server-errors.test.ts index 5426bac100b8..e83da1c43fd5 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/server-errors.test.ts +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/server-errors.test.ts @@ -3,7 +3,7 @@ import { waitForError } from '@sentry-internal/test-utils'; test('Sends a loader error to Sentry', async ({ page }) => { const loaderErrorPromise = waitForError('create-remix-app-express', errorEvent => { - return errorEvent.exception.values[0].value === 'Loader Error'; + return errorEvent?.exception?.values?.[0]?.value === 'Loader Error'; }); await page.goto('/loader-error'); diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/server-transactions.test.ts b/dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/server-transactions.test.ts index 644760d220a6..3503c0cb3c24 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/server-transactions.test.ts +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/server-transactions.test.ts @@ -20,7 +20,7 @@ test('Sends parameterized transaction name to Sentry', async ({ page }) => { test('Sends form data with action span', async ({ page }) => { const formdataActionTransaction = waitForTransaction('create-remix-app-express', transactionEvent => { - return transactionEvent?.spans?.some(span => span.data && span.data['code.function'] === 'action'); + return transactionEvent?.spans?.some(span => span.data && span.data['code.function'] === 'action') || false; }); await page.goto('/action-formdata'); @@ -34,13 +34,13 @@ test('Sends form data with action span', async ({ page }) => { await page.locator('button[type=submit]').click(); - const actionSpan = (await formdataActionTransaction).spans.find( + const actionSpan = (await formdataActionTransaction)?.spans?.find( span => span.data && span.data['code.function'] === 'action', ); expect(actionSpan).toBeDefined(); - expect(actionSpan.op).toBe('action.remix'); - expect(actionSpan.data).toMatchObject({ + expect(actionSpan?.op).toBe('action.remix'); + expect(actionSpan?.data).toMatchObject({ 'formData.text': 'test', 'formData.file': 'file.txt', }); @@ -48,17 +48,17 @@ test('Sends form data with action span', async ({ page }) => { test('Sends a loader span to Sentry', async ({ page }) => { const loaderTransactionPromise = waitForTransaction('create-remix-app-express', transactionEvent => { - return transactionEvent?.spans?.some(span => span.data && span.data['code.function'] === 'loader'); + return transactionEvent?.spans?.some(span => span.data && span.data['code.function'] === 'loader') || false; }); await page.goto('/'); - const loaderSpan = (await loaderTransactionPromise).spans.find( + const loaderSpan = (await loaderTransactionPromise)?.spans?.find( span => span.data && span.data['code.function'] === 'loader', ); expect(loaderSpan).toBeDefined(); - expect(loaderSpan.op).toBe('loader.remix'); + expect(loaderSpan?.op).toBe('loader.remix'); }); test('Propagates trace when ErrorBoundary is triggered', async ({ page }) => { @@ -83,9 +83,8 @@ test('Propagates trace when ErrorBoundary is triggered', async ({ page }) => { const httpServerTraceId = httpServerTransaction.contexts?.trace?.trace_id; const httpServerSpanId = httpServerTransaction.contexts?.trace?.span_id; - const loaderSpanId = httpServerTransaction.spans.find( - span => span.data && span.data['code.function'] === 'loader', - )?.span_id; + const loaderSpanId = httpServerTransaction?.spans?.find(span => span.data && span.data['code.function'] === 'loader') + ?.span_id; const pageLoadTraceId = pageloadTransaction.contexts?.trace?.trace_id; const pageLoadSpanId = pageloadTransaction.contexts?.trace?.span_id; diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/tsconfig.json b/dev-packages/e2e-tests/test-applications/create-remix-app-express/tsconfig.json index b58e7d722f35..909c40f4d950 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-express/tsconfig.json +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express/tsconfig.json @@ -1,5 +1,5 @@ { - "include": ["env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["env.d.ts", "./app/**/*.ts", "./app/**/*.tsx"], "compilerOptions": { "lib": ["DOM", "DOM.Iterable", "ES2022"], "isolatedModules": true, diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/entry.client.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/entry.client.tsx index 2109aad0a421..c6c86ac7f1f4 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/entry.client.tsx +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/entry.client.tsx @@ -4,6 +4,16 @@ * For more information, see https://remix.run/file-conventions/entry.client */ +// Extend the Window interface to include ENV +declare global { + interface Window { + ENV: { + SENTRY_DSN: string; + [key: string]: unknown; + }; + } +} + import { RemixBrowser, useLocation, useMatches } from '@remix-run/react'; import * as Sentry from '@sentry/remix'; import { StrictMode, startTransition, useEffect } from 'react'; diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/root.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/root.tsx index 517a37a9d76b..eef9aca8c4f1 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/root.tsx +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/root.tsx @@ -52,7 +52,7 @@ export function ErrorBoundary() { } function App() { - const { ENV } = useLoaderData(); + const { ENV } = useLoaderData() as { ENV: { SENTRY_DSN: string } }; return ( diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/routes/navigate.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/routes/navigate.tsx index a84df11e7bb7..3e4930a481ee 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/routes/navigate.tsx +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/routes/navigate.tsx @@ -10,7 +10,7 @@ export const loader: LoaderFunction = async ({ params: { id } }) => { }; export default function LoaderError() { - const data = useLoaderData(); + const data = useLoaderData() as { test?: string }; return (
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-v2/package.json b/dev-packages/e2e-tests/test-applications/create-remix-app-v2/package.json index 63f8b0faf722..1f3ca2437454 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-v2/package.json +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-v2/package.json @@ -2,7 +2,7 @@ "private": true, "sideEffects": false, "scripts": { - "build": "remix build", + "build": "remix build && pnpm typecheck", "dev": "remix dev", "start": "NODE_OPTIONS='--require=./instrument.server.cjs' remix-serve build/index.js", "typecheck": "tsc", @@ -12,10 +12,10 @@ }, "dependencies": { "@sentry/remix": "latest || *", - "@remix-run/css-bundle": "2.16.5", - "@remix-run/node": "2.16.5", - "@remix-run/react": "2.16.5", - "@remix-run/serve": "2.16.5", + "@remix-run/css-bundle": "2.16.7", + "@remix-run/node": "2.16.7", + "@remix-run/react": "2.16.7", + "@remix-run/serve": "2.16.7", "isbot": "^3.6.8", "react": "^18.2.0", "react-dom": "^18.2.0" @@ -23,13 +23,17 @@ "devDependencies": { "@playwright/test": "~1.50.0", "@sentry-internal/test-utils": "link:../../../test-utils", - "@remix-run/dev": "2.16.5", - "@remix-run/eslint-config": "2.16.5", + "@remix-run/dev": "2.16.7", + "@remix-run/eslint-config": "2.16.7", "@sentry/core": "latest || *", - "@types/react": "^18.0.35", - "@types/react-dom": "^18.0.11", + "@types/react": "^18.2.64", + "@types/react-dom": "^18.2.34", + "@types/prop-types": "15.7.7", "eslint": "^8.38.0", - "typescript": "^5.0.4" + "typescript": "^5.1.6" + }, + "resolutions": { + "@types/react": "18.2.22" }, "volta": { "extends": "../../package.json" diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-v2/tsconfig.json b/dev-packages/e2e-tests/test-applications/create-remix-app-v2/tsconfig.json index 20f8a386a6c4..20501c5b2f7a 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-v2/tsconfig.json +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-v2/tsconfig.json @@ -1,5 +1,6 @@ { - "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["remix.env.d.ts", "./app/**/*.ts", "./app/**/*.tsx"], + "exclude": ["node_modules", "build"], "compilerOptions": { "lib": ["DOM", "DOM.Iterable", "ES2019"], "isolatedModules": true, @@ -10,6 +11,7 @@ "target": "ES2019", "strict": true, "allowJs": true, + "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "baseUrl": ".", "paths": { diff --git a/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/functions/_middleware.ts b/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/functions/_middleware.ts index de18f7ef68bb..691dba9811a5 100644 --- a/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/functions/_middleware.ts +++ b/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/functions/_middleware.ts @@ -1,5 +1,5 @@ -import { createPagesFunctionHandler } from '@remix-run/cloudflare-pages'; -import { sentryPagesPlugin } from '@sentry/cloudflare'; +import {createPagesFunctionHandler} from '@remix-run/cloudflare-pages'; +import {sentryPagesPlugin} from '@sentry/cloudflare'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - the server build file is generated by `remix vite:build` @@ -7,6 +7,10 @@ import { sentryPagesPlugin } from '@sentry/cloudflare'; import * as build from '../build/server'; export const onRequest = [ - context => sentryPagesPlugin({ dsn: context.env.E2E_TEST_DSN, tracesSampleRate: 1.0 })(context), - createPagesFunctionHandler({ build }), + (context: EventPluginContext) => + sentryPagesPlugin({ + dsn: context.env.E2E_TEST_DSN, + tracesSampleRate: 1.0, + })(context), + createPagesFunctionHandler({build}), ]; diff --git a/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/lib/search.ts b/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/lib/search.ts deleted file mode 100644 index d3295f1fc66a..000000000000 --- a/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/lib/search.ts +++ /dev/null @@ -1,25 +0,0 @@ -import type { - PredictiveArticleFragment, - PredictiveCollectionFragment, - PredictivePageFragment, - PredictiveProductFragment, - PredictiveQueryFragment, - SearchProductFragment, -} from 'storefrontapi.generated'; - -export function applyTrackingParams( - resource: - | PredictiveQueryFragment - | SearchProductFragment - | PredictiveProductFragment - | PredictiveCollectionFragment - | PredictiveArticleFragment - | PredictivePageFragment, - params?: string, -) { - if (params) { - return resource?.trackingParameters ? `?${params}&${resource.trackingParameters}` : `?${params}`; - } else { - return resource?.trackingParameters ? `?${resource.trackingParameters}` : ''; - } -} diff --git a/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/root.tsx b/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/root.tsx index ef098d204e10..51059b7acebd 100644 --- a/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/root.tsx +++ b/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/root.tsx @@ -2,7 +2,6 @@ import { Links, LiveReload, Meta, - type MetaFunction, Outlet, Scripts, ScrollRestoration, @@ -12,17 +11,20 @@ import { useMatches, useRouteError, } from '@remix-run/react'; - +import {LoaderFunctionArgs} from '@remix-run/server-runtime'; import * as Sentry from '@sentry/remix/cloudflare'; -import { useNonce } from '@shopify/hydrogen'; -import type { CustomerAccessToken } from '@shopify/hydrogen/storefront-api-types'; -import { type LoaderArgs, defer } from '@shopify/remix-oxygen'; -import { useEffect } from 'react'; -import favicon from '../public/favicon.svg'; -import type { HydrogenSession } from '../server'; +import {useNonce} from '@shopify/hydrogen'; +import type {CustomerAccessToken} from '@shopify/hydrogen/storefront-api-types'; +import type {HydrogenSession} from '@shopify/hydrogen'; +import {defer} from '@shopify/remix-oxygen'; +import {useEffect} from 'react'; // This is important to avoid re-fetching root queries on sub-navigations -export const shouldRevalidate: ShouldRevalidateFunction = ({ formMethod, currentUrl, nextUrl }) => { +export const shouldRevalidate: ShouldRevalidateFunction = ({ + formMethod, + currentUrl, + nextUrl, +}) => { // revalidate when a mutation is performed e.g add to cart, login... if (formMethod && formMethod !== 'GET') { return true; @@ -46,20 +48,39 @@ export function links() { rel: 'preconnect', href: 'https://shop.app', }, - { rel: 'icon', type: 'image/svg+xml', href: favicon }, ]; } -export async function loader({ context }: LoaderArgs) { - const { storefront, session, cart } = context; - const customerAccessToken = await session.get('customerAccessToken'); - const publicStoreDomain = context.env.PUBLIC_STORE_DOMAIN; +export async function loader({ + context, +}: { + context: LoaderFunctionArgs['context']; +}) { + const {storefront, session, cart} = context as { + storefront: { + query: (query: string, options: any) => Promise; + CacheLong: () => any; + }; + session: HydrogenSession; + cart: unknown; + env: unknown; + }; + // Type assertion for cart to fix TS error + const typedCart = cart as {get: () => Promise}; + const customerAccessToken = await (session as HydrogenSession).get( + 'customerAccessToken', + ); + const publicStoreDomain = (context.env as {PUBLIC_STORE_DOMAIN: string}) + .PUBLIC_STORE_DOMAIN; // validate the customer access token is valid - const { isLoggedIn, headers } = await validateCustomerAccessToken(session, customerAccessToken); + const {isLoggedIn, headers} = await validateCustomerAccessToken( + session, + customerAccessToken, + ); // defer the cart query by not awaiting it - const cartPromise = cart.get(); + const cartPromise = typedCart.get(); // defer the footer query (below the fold) const footerPromise = storefront.query(FOOTER_QUERY, { @@ -85,12 +106,23 @@ export async function loader({ context }: LoaderArgs) { isLoggedIn, publicStoreDomain, }, - { headers }, + {headers}, ); } -export const meta = ({ data }: Sentry.SentryMetaArgs>) => { +export const meta = ({ + data, +}: { + data: { + ENV: {SENTRY_DSN: string}; + sentryTrace: string; + sentryBaggage: string; + }; +}) => { return [ + { + env: data.ENV, + }, { name: 'sentry-trace', content: data.sentryTrace, @@ -187,11 +219,14 @@ export function ErrorBoundary() { * ); * ``` * */ -async function validateCustomerAccessToken(session: HydrogenSession, customerAccessToken?: CustomerAccessToken) { +async function validateCustomerAccessToken( + session: HydrogenSession, + customerAccessToken?: CustomerAccessToken, +) { let isLoggedIn = false; const headers = new Headers(); if (!customerAccessToken?.accessToken || !customerAccessToken?.expiresAt) { - return { isLoggedIn, headers }; + return {isLoggedIn, headers}; } const expiresAt = new Date(customerAccessToken.expiresAt).getTime(); @@ -205,7 +240,7 @@ async function validateCustomerAccessToken(session: HydrogenSession, customerAcc isLoggedIn = true; } - return { isLoggedIn, headers }; + return {isLoggedIn, headers}; } const MENU_FRAGMENT = `#graphql diff --git a/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/routes/_index.tsx b/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/routes/_index.tsx index 48e9494f1c2c..19fa119ec2a4 100644 --- a/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/routes/_index.tsx +++ b/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/routes/_index.tsx @@ -1,6 +1,12 @@ import { Link, useSearchParams } from '@remix-run/react'; import * as Sentry from '@sentry/remix/cloudflare'; +declare global { + interface Window { + capturedExceptionId?: string; + } +} + export default function Index() { const [searchParams] = useSearchParams(); diff --git a/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/routes/navigate.tsx b/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/routes/navigate.tsx index 7fe190a6eb77..7f5f79028c00 100644 --- a/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/routes/navigate.tsx +++ b/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/routes/navigate.tsx @@ -10,7 +10,7 @@ export const loader: LoaderFunction = async ({ params: { id } }) => { }; export default function LoaderError() { - const data = useLoaderData(); + const data = useLoaderData() as { test?: string }; return (
diff --git a/dev-packages/e2e-tests/test-applications/remix-hydrogen/package.json b/dev-packages/e2e-tests/test-applications/remix-hydrogen/package.json index 6890e46da127..b2956b59aa52 100644 --- a/dev-packages/e2e-tests/test-applications/remix-hydrogen/package.json +++ b/dev-packages/e2e-tests/test-applications/remix-hydrogen/package.json @@ -3,11 +3,11 @@ "sideEffects": false, "type": "module", "scripts": { - "build": "shopify hydrogen build --codegen", + "build": "pnpm typecheck && shopify hydrogen build --codegen", "dev": "shopify hydrogen dev --codegen", "preview": "shopify hydrogen preview", "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .", - "typecheck": "tsc --noEmit", + "typecheck": "tsc", "codegen": "shopify hydrogen codegen", "clean": "npx rimraf node_modules dist pnpm-lock.yaml", "test:build": "pnpm install && npx playwright install && pnpm build", @@ -17,6 +17,7 @@ "dependencies": { "@remix-run/react": "^2.15.2", "@remix-run/server-runtime": "^2.15.2", + "@remix-run/cloudflare-pages": "^2.15.2", "@sentry/cloudflare": "latest || *", "@sentry/remix": "latest || *", "@sentry/vite-plugin": "^3.1.2", diff --git a/dev-packages/e2e-tests/test-applications/remix-hydrogen/server.ts b/dev-packages/e2e-tests/test-applications/remix-hydrogen/server.ts index 6a3a889cf968..372e584e0a9e 100644 --- a/dev-packages/e2e-tests/test-applications/remix-hydrogen/server.ts +++ b/dev-packages/e2e-tests/test-applications/remix-hydrogen/server.ts @@ -12,11 +12,25 @@ import { type AppLoadContext, createRequestHandler, getStorefrontHeaders } from import { CART_QUERY_FRAGMENT } from '~/lib/fragments'; import { AppSession } from '~/lib/session'; // Virtual entry point for the app +// Typescript errors about the type of `remixBuild` will be there when it's used +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-expect-error import * as remixBuild from 'virtual:remix/server-build'; /** * Export a fetch handler in module format. */ +type Env = { + SESSION_SECRET: string; + PUBLIC_STOREFRONT_API_TOKEN: string; + PRIVATE_STOREFRONT_API_TOKEN: string; + PUBLIC_STORE_DOMAIN: string; + PUBLIC_STOREFRONT_ID: string; + PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string; + PUBLIC_CUSTOMER_ACCOUNT_API_URL: string; + // Add any other environment variables your app expects here +}; + export default { async fetch(request: Request, env: Env, executionContext: ExecutionContext): Promise { return wrapRequestHandler( @@ -68,7 +82,7 @@ export default { request, session, customerAccountId: env.PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID, - customerAccountUrl: env.PUBLIC_CUSTOMER_ACCOUNT_API_URL, + shopId: env.PUBLIC_STORE_DOMAIN, }); /* diff --git a/dev-packages/e2e-tests/test-applications/remix-hydrogen/tsconfig.json b/dev-packages/e2e-tests/test-applications/remix-hydrogen/tsconfig.json index dcd7c7237a90..37083f3cea29 100644 --- a/dev-packages/e2e-tests/test-applications/remix-hydrogen/tsconfig.json +++ b/dev-packages/e2e-tests/test-applications/remix-hydrogen/tsconfig.json @@ -1,5 +1,10 @@ { - "include": ["./**/*.d.ts", "./**/*.ts", "./**/*.tsx"], + "include": [ + "server.ts", + "./app/**/*.d.ts", + "./app/**/*.ts", + "./app/**/*.tsx" + ], "compilerOptions": { "lib": ["DOM", "DOM.Iterable", "ES2022"], "isolatedModules": true,