shopify-app-js 0.0.1-security → 1.0.1

package/packages/shopify-app-remix/docs/staticPages/graphql-types.doc.ts

@@ -0,0 +1,148 @@
+import {LandingTemplateSchema} from '@shopify/generate-docs';
+
+const data: LandingTemplateSchema = {
+  id: 'guide-graphql-types',
+  title: 'Typing GraphQL operations',
+  description:
+    'The GraphQL clients provided in this package can use [Codegen](https://the-guild.dev/graphql/codegen) to automatically parse and create types for your queries and mutations.' +
+    '\n\nBy installing a few packages in your app, you can use the `graphql-codegen` script, which will look for strings with the `#graphql` tag and extract types from them.' +
+    '\n\nIf your IDE supports it, you will also get syntax highlighting and auto-complete features when writing your queries.',
+  sections: [
+    {
+      type: 'Markdown',
+      anchorLink: 'example',
+      title: 'See it in action',
+      sectionContent: `
+In this example, we use the \`graphql-codegen\` script to parse a query in the \`/app/routes/new.tsx\` file.
+
+Note how VSCode shows the types for both the return type of \`response.json()\`, and the \`variables\` option in the \`graphql\` function.
+
+<video style="width: 100%; height: auto;" muted controls aria-label="A demonstration of a Remix app using GraphQL types">
+  <source src="/assets/client-libraries/graphql-types-demo.webm" type="video/webm">
+  Your browser doesn't support this video.
+</video>
+      `,
+    },
+    {
+      type: 'Generic',
+      anchorLink: 'install',
+      title: 'Installing packages',
+      sectionContent:
+        'To use the `graphql-codegen` script, you will need to install a few packages in your app.' +
+        '\n\nThey will include the scripts to run, and the types that will be overridden by the results of parsing your operations.',
+      codeblock: {
+        title: 'Installing packages',
+        tabs: [
+          {
+            title: 'npm',
+            language: 'sh',
+            code: './examples/guides/graphql-types/install.npm.example.sh',
+          },
+          {
+            title: 'yarn',
+            language: 'sh',
+            code: './examples/guides/graphql-types/install.yarn.example.sh',
+          },
+          {
+            title: 'pnpm',
+            language: 'sh',
+            code: './examples/guides/graphql-types/install.pnpm.example.sh',
+          },
+        ],
+      },
+    },
+    {
+      type: 'Generic',
+      anchorLink: 'configure',
+      title: 'Setting up .graphqlrc.ts',
+      sectionContent:
+        "Before you can parse operations, you'll need to create a `.graphqlrc.ts` file in your project, and configure it to use the `@shopify/api-codegen-preset`." +
+        '\n\n> Caution: Parsing will not work on `.graphql` documents, because the preset can only apply types from JavaScript and TypeScript const strings.',
+      codeblock: {
+        title: 'Codegen configuration example',
+        tabs: [
+          {
+            title: '/.graphqlrc.ts',
+            language: 'ts',
+            code: './examples/guides/graphql-types/.graphqlrc.ts',
+          },
+        ],
+      },
+      sectionCard: [
+        {
+          url: 'https://github.com/Shopify/shopify-api-js/tree/main/packages/api-codegen-preset#configuration',
+          name: 'Configuration options',
+          subtitle: 'Learn more about the available configurations.',
+          type: 'github',
+        },
+      ],
+    },
+    {
+      type: 'Generic',
+      anchorLink: 'set-up-script',
+      title: 'Setting up the script',
+      sectionContent:
+        'To generate types, you\'ll need to add an entry for `graphql-codegen` in the `"scripts"` section of your `package.json` file.',
+      codeblock: {
+        title: 'Setting up the script',
+        tabs: [
+          {
+            title: '/package.json',
+            language: 'json',
+            code: './examples/guides/graphql-types/package.json',
+          },
+        ],
+      },
+    },
+    {
+      type: 'Generic',
+      anchorLink: 'run',
+      title: 'Generating types',
+      sectionContent:
+        'When you run `graphql-codegen`, it will look in all your configured documents for strings marked with a `#graphql` tag.' +
+        '\n\nIDEs that support the `.graphqlrc.ts` file will provide syntax highlighting for your operations, as well as typing.' +
+        '\n\n> Tip: You can pass in a `--watch` flag to the script, which will update your types every time you save a file.',
+      codeblock: {
+        title: 'Running graphql-codegen',
+        tabs: [
+          {
+            title: 'npm',
+            language: 'sh',
+            code: './examples/guides/graphql-types/run.npm.example.sh',
+          },
+          {
+            title: 'yarn',
+            language: 'sh',
+            code: './examples/guides/graphql-types/run.yarn.example.sh',
+          },
+          {
+            title: 'pnpm',
+            language: 'sh',
+            code: './examples/guides/graphql-types/run.pnpm.example.sh',
+          },
+        ],
+      },
+    },
+    {
+      type: 'Resource',
+      title: 'Resources',
+      anchorLink: 'resources',
+      resources: [
+        {
+          name: 'Admin API',
+          url: '/docs/api/shopify-app-remix/apis/admin-api',
+          type: 'shopify',
+          subtitle: 'Make requests to the Admin API',
+        },
+        {
+          name: 'Storefront API',
+          url: '/docs/api/shopify-app-remix/apis/storefront-api',
+          type: 'shopify',
+          subtitle: 'Make requests to the Storefront API',
+        },
+      ],
+    },
+  ],
+};
+
+export default data;

package/packages/shopify-app-remix/docs/staticPages/index.doc.ts

@@ -0,0 +1,227 @@
+import {LandingTemplateSchema} from '@shopify/generate-docs';
+
+const data: LandingTemplateSchema = {
+  id: 'shopify-app-remix',
+  title: 'Shopify App package for Remix',
+  description:
+    'The [@shopify/shopify-app-remix](https://www.npmjs.com/package/@shopify/shopify-app-remix) package enables Remix apps to authenticate with Shopify and make API calls. It uses [App Bridge](/docs/api/app-bridge-library) to enable apps to embed themselves in the Shopify Admin.' +
+    "\n\nIn this page we'll go over the main components you need to integrate an app with Shopify.",
+  sections: [
+    {
+      type: 'Generic',
+      anchorLink: 'quick-start',
+      title: 'Quick start',
+      sectionContent:
+        "The quickest way to create a new app is using the Shopify CLI. You can use your preferred package manager for that." +
+        "\n\nCheck out the [getting started guide](/docs/apps/getting-started), or the [app template](https://github.com/Shopify/shopify-app-template-remix) for a complete example.",
+      codeblock: {
+        title: 'Create an app',
+        tabs: [
+          {
+            title: 'npm',
+            language: 'sh',
+            code: './examples/index/create.npm.example.sh',
+          },
+          {
+            title: 'yarn',
+            language: 'sh',
+            code: './examples/index/create.yarn.example.sh',
+          },
+          {
+            title: 'pnpm',
+            language: 'sh',
+            code: './examples/index/create.pnpm.example.sh',
+          },
+        ],
+      },
+      sectionCard: [
+        {
+          name: 'Build an app',
+          subtitle: 'Navigate to',
+          url: '/docs/apps/getting-started/build-qr-code-app',
+          type: 'tutorial',
+        },
+      ],
+    },
+    {
+      type: 'Generic',
+      anchorLink: 'installation',
+      title: 'Installation',
+      sectionContent:
+        "If you're not using the CLI, then you can use the examples in this page to set up an existing app to use this package. Start by installing it using your preferred package manager.",
+      codeblock: {
+        title: 'Install package',
+        tabs: [
+          {
+            title: 'npm',
+            language: 'sh',
+            code: './examples/index/install.npm.example.sh',
+          },
+          {
+            title: 'yarn',
+            language: 'sh',
+            code: './examples/index/install.yarn.example.sh',
+          },
+          {
+            title: 'pnpm',
+            language: 'sh',
+            code: './examples/index/install.pnpm.example.sh',
+          },
+        ],
+      },
+    },
+    {
+      type: 'Generic',
+      anchorLink: 'shopify-app',
+      title: 'Backend setup',
+      sectionContent:
+        "Using the `shopifyApp` function, you can create an object that enables your app's backend to authenticate requests coming from Shopify, and interacting with Shopify APIs." +
+        "\n\nThese functions make it easy for your app stays up to date, benefitting from the current best practices and security updates." +
+        "\n\n> Caution: When running on a node environment, you'll also need to import the node adapter, as per the example. This will ensure your app is using the appropriate implementation of the Web [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and [crypto](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) APIs.",
+      sectionCard: [
+        {
+          name: 'shopifyApp',
+          url: '/docs/api/shopify-app-remix/entrypoints/shopifyapp',
+          type: 'clicode',
+        },
+      ],
+      codeblock: {
+        title: 'Configure ShopifyApp',
+        tabs: [
+          {
+            title: '/app/shopify.server.ts',
+            language: 'ts',
+            code: './examples/index/shopify-app.example.ts',
+          },
+        ],
+      },
+    },
+    {
+      type: 'Generic',
+      anchorLink: 'headers',
+      title: 'Response headers',
+      sectionContent:
+        'When loading inside the Shopify Admin, your app will need to add the required `Content-Security-Policy` header directives, as per [our documentation](/docs/apps/store/security/iframe-protection). To do that, this package provides the `shopify.addDocumentResponseHeaders` method.' +
+        "\n\nYou should return these headers from any endpoint that renders HTML in your app. Most likely you'll want to add this to every HTML response by updating the `entry.server.tsx` file:",
+      codeblock: {
+        title: 'Add required headers',
+        tabs: [
+          {
+            title: '/app/entry.server.tsx',
+            language: 'tsx',
+            code: './examples/index/entry-server.example.ts',
+          },
+        ],
+      },
+    },
+    {
+      type: 'Generic',
+      anchorLink: 'boundaries',
+      title: 'Error boundaries',
+      sectionContent:
+        "The OAuth process can't happen inside the admin iframe, and this package is capable of detecting that scenario and properly redirecting using the [Remix `ErrorBoundary`](https://remix.run/docs/en/main/guides/errors) export to set the correct headers for App Bridge." +
+        "\n\nUse the abstractions provided by this package in your authenticated routes, to automatically set up the error and headers boundaries to redirect outside the iframe when needed." +
+        "\n\n> Tip: You can also add this to a [Remix layout](https://remix.run/docs/en/main/file-conventions/route-files-v2) if you want to authenticate more than one route, but make sure to call the Shopify boundary methods whenever you need to add your own exports.",
+      codeblock: {
+        title: 'Configure header boundaries',
+        tabs: [
+          {
+            title: '/app/routes/**/*.tsx',
+            language: 'tsx',
+            code: './examples/index/boundaries.example.ts',
+          },
+        ],
+      },
+    },
+    {
+      type: 'Generic',
+      anchorLink: 'auth-route',
+      title: 'OAuth route',
+      sectionContent:
+        "> Tip: This is only applicable to non-embedded apps or legacy embedded apps that are **not** using the [new embedded app authorization strategy](#embedded-auth-strategy) for OAuth and installation flow. If you're building an embedded app, we **strongly** recommend using the" +
+        " [new embedded app authorization strategy](#embedded-auth-strategy)" +
+        "\n\nTo install an app or refresh tokens, you'll need to set up an [OAuth](docs/apps/auth/oauth) route. To do that, set up a [splat route](https://remix.run/docs/en/main/guides/routing#splats) that calls `authenticate.admin`." +
+        '\n\nWhen that function is called, the package will start the OAuth process, and handle the callback from Shopify after it completes.' +
+        '\n\nThe default route is `/app/routes/auth/$.tsx`, but you can configure this route using the `authPathPrefix` option.',
+      codeblock: {
+        title: 'Add OAuth route',
+        tabs: [
+          {
+            title: '/app/routes/auth/$.tsx',
+            language: 'ts',
+            code: './examples/index/splat-route.example.ts',
+          },
+        ],
+      },
+    },
+    {
+      type: 'Generic',
+      anchorLink: 'embedded-auth-strategy',
+      title: 'New embedded app authorization strategy',
+      sectionContent:
+        "> Tip: This is available for embedded apps that are using [Shopify managed installation](https://shopify.dev/docs/apps/auth/installation#shopify-managed-installation)." +
+        "\n> If you're building an embedded app, we **strongly** recommend using this feature that utilizes Shopify managed install with [token exchange](https://shopify.dev/docs/apps/auth/get-access-tokens/token-exchange)." +
+        "\n\n We have introduced a new authorization and installation strategy for **embedded apps** that eliminates the redirects that were previously necessary." +
+        " It replaces the legacy [authorization Code install and grant flow](https://shopify.dev/docs/apps/auth/get-access-tokens/authorization-code-grant)." +
+        "\n\nIt takes advantage of [Shopify managed installation](https://shopify.dev/docs/apps/auth/installation#shopify-managed-installation)" +
+        " to handle automatic app installations and scope updates, while using" +
+        " [token exchange](https://shopify.dev/docs/apps/auth/get-access-tokens/token-exchange) to get an access token for the logged-in user." +
+        "\n\n > Note: Newly created Remix apps from the template after February 1st 2024 has this feature enabled by default." +
+        "\n\n1. Enable [Shopify managed installation](https://shopify.dev/docs/apps/auth/installation#shopify-managed-installation)" +
+        " by configuring your scopes [through the Shopify CLI](https://shopify.dev/docs/apps/tools/cli/configuration)." +
+        "\n2. Enable the future flag `unstable_newEmbeddedAuthStrategy` in your app's server configuration file." +
+        "\n3. Enjoy no-redirect OAuth flow, and app installation process.",
+      codeblock: {
+        title: 'Enabling the new embedded auth strategy',
+        tabs: [
+          {
+            title: '/app/shopify.server.ts',
+            language: 'ts',
+            code: './examples/index/embedded-app-auth-strategy-config.example.ts',
+
+          }
+        ],
+      }
+    },
+    {
+      type: 'Generic',
+      anchorLink: 'app-provider',
+      title: 'AppProvider',
+      sectionContent:
+        "In order to use all of the features from App Bridge, you'll need to use the `AppProvider` component in your app's routes." +
+        '\n\nThis component will set up App Bridge and Polaris so you can integrate your app into the Shopify Admin, and it helps us ensure your app stays up to date with Shopify requirements.' +
+        '\n\nTo do this pass the `process.env.SHOPIFY_API_KEY` to the frontend via the loader.',
+      sectionCard: [
+        {
+          name: 'App bridge',
+          subtitle: 'Learn more about App Bridge.',
+          url: '/docs/api/app-bridge-library',
+          type: 'shopify',
+        },
+        {
+          name: 'Polaris',
+          subtitle: 'Learn more about Polaris.',
+          url: 'https://polaris.shopify.com',
+          type: 'shopify',
+        },
+        {
+          name: 'AppProvider',
+          url: '/docs/api/shopify-app-remix/entrypoints/appprovider',
+          type: 'clicode',
+        },
+      ],
+      codeblock: {
+        title: 'Add AppProvider',
+        tabs: [
+          {
+            title: '/app/root.tsx',
+            language: 'tsx',
+            code: './examples/index/app-provider.example.ts',
+          },
+        ],
+      },
+    },
+  ],
+};
+
+export default data;

package/packages/shopify-app-remix/docs/staticPages/webhooks.doc.ts

@@ -0,0 +1,64 @@
+import {LandingTemplateSchema} from '@shopify/generate-docs';
+
+const data: LandingTemplateSchema = {
+  id: 'guide-webhooks',
+  title: 'Subscribing to webhooks',
+  description:
+    'Your app must respond to [mandatory webhook topics](/docs/apps/webhooks/configuration/mandatory-webhooks). In addition, your app can register [optional webhook topics](/docs/api/admin-rest/current/resources/webhook#event-topics).',
+  sections: [
+    {
+      type: 'Generic',
+      anchorLink: 'config',
+      title: 'Configuring webhooks subscriptions',
+      sectionContent:
+        'Configure `shopifyApp` and setup webhook subscription with the following steps:' +
+        '\n1. The webhooks you want to subscribe to. In this example we subscribe to the `APP_UNINSTALLED` topic.' +
+        '\n1. The code to register the `APP_UNINSTALLED` topic after a merchant installs you app. Here `shopifyApp` provides an `afterAuth` hook.' +
+        '\n1. Review the required scopes for the webhook topics, and update your [app scopes](/docs/apps/tools/cli/configuration#access_scopes)  as necessary.' +
+        "\n\n> Note: You can't register mandatory topics using this package, you must [configure those in the Partner Dashboard](/docs/apps/webhooks/configuration/mandatory-webhooks) instead.",
+      codeblock: {
+        title: 'Configure webhooks subscriptions',
+        tabs: [
+          {
+            title: '/app/shopify.server.ts',
+            code: './examples/guides/webhooks/config.example.ts',
+            language: 'tsx',
+          },
+        ],
+      },
+    },
+    {
+      type: 'Generic',
+      anchorLink: 'endpoints',
+      title: 'Set up your endpoints',
+      sectionContent:
+        'Create a route in your app to handle incoming webhook requests for each `callbackUrl` you set in your configuration.' +
+        'Legitimate webhook requests are always `POST` requests signed by Shopify, so you must authenticate them before taking any action. To do this you must set up an `action` that uses the `authenticate.webhook` function to authenticate the request.' +
+        '\n\nPlease keep in mind that webhook endpoints should respond as quickly as possible. If you need to run a long-running job, then consider using background tasks.' +
+        '\n\n> Caution: Webhook endpoints **must** respond with an `HTTP 200` code, or Shopify will retry.',
+      codeblock: {
+        title: 'Receive webhook requests',
+        tabs: [
+          {
+            title: '/app/routes/webhooks.tsx',
+            code: './examples/guides/webhooks/endpoint.example.ts',
+            language: 'tsx',
+          },
+        ],
+      },
+    },
+    {
+      type: 'Resource',
+      title: 'Resources',
+      anchorLink: 'resources',
+      resources: [
+        {
+          name: 'authenticate.webhook',
+          url: '/docs/api/shopify-app-remix/authenticate/webhook',
+        },
+      ],
+    },
+  ],
+};
+
+export default data;

package/packages/shopify-app-remix/docs/tsconfig.docs.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "rootDir": "/",
+    },
+    "include": [
+        "../src/**/*.doc.ts"
+    ],
+    "exclude": []
+}

package/packages/shopify-app-remix/docs/typeOverride.json

@@ -0,0 +1 @@
+{}

package/packages/shopify-app-remix/docs/upcoming_changes.md

@@ -0,0 +1,153 @@
+# Upcoming breaking changes
+
+This file contains every breaking change that's currently planned for this package.
+You can use it as a guide for migrating your app, and ensuring you're ready for the next big migration.
+
+> **Note**: Every change in this file comes with a deprecated alternative for apps that haven't been updated yet.
+> Our goal is to give developers as much time as possible to prepare for changes to reduce the burden of staying up to date.
+
+## Table of contents
+
+- [Root import path deprecation](#root-import-path-deprecation)
+- [Introducing the AppProvider component](#introducing-the-appprovider-component)
+- [Aligning the `admin` context object for webhooks](#aligning-the-admin-context-object-for-webhooks)
+
+## Root import path deprecation
+
+In the current version, apps can import server-side functions using the following statements:
+
+```ts
+import '@shopify/shopify-app-remix/adapters/node';
+import {shopifyApp} from '@shopify/shopify-app-remix';
+```
+
+With the addition of React component to this package, we'll start having full separation between server and react code, as in:
+
+```ts
+import '@shopify/shopify-app-remix/server/adapters/node';
+import {shopifyApp} from '@shopify/shopify-app-remix/server';
+import {AppProvider} from '@shopify/shopify-app-remix/react';
+```
+
+## Introducing the AppProvider component
+
+In order to make it easier to set up the frontend for apps using this package, we introduced a new `AppProvider` component.
+Previous apps will continue to work without this component, but we strongly recommend all apps use it because it makes it easier to keep up with updates from Shopify.
+
+To make use of this in the Remix app template, you can update your `app/routes/app.jsx` file's `App` component from
+
+```ts
+export default function App() {
+  const {apiKey, polarisTranslations} = useLoaderData();
+
+  return (
+    <>
+      <script
+        src="https://cdn.shopify.com/shopifycloud/app-bridge.js"
+        data-api-key={apiKey}
+      />
+      <ui-nav-menu>
+        <Link to="/app" rel="home">
+          Home
+        </Link>
+        <Link to="/app/additional">Additional page</Link>
+      </ui-nav-menu>
+      <PolarisAppProvider
+        i18n={polarisTranslations}
+        linkComponent={RemixPolarisLink}
+      >
+        <Outlet />
+      </PolarisAppProvider>
+    </>
+  );
+}
+
+/** @type {any} */
+const RemixPolarisLink = React.forwardRef((/** @type {any} */ props, ref) => (
+  <Link {...props} to={props.url ?? props.to} ref={ref}>
+    {props.children}
+  </Link>
+));
+```
+
+to
+
+```ts
+import {AppProvider} from '@shopify/shopify-app-remix/react';
+
+export default function App() {
+  const {apiKey} = useLoaderData();
+
+  return (
+    <AppProvider isEmbeddedApp apiKey={apiKey}>
+      <ui-nav-menu>
+        <Link to="/app" rel="home">
+          Home
+        </Link>
+        <Link to="/app/additional">Additional page</Link>
+      </ui-nav-menu>
+      <Outlet />
+    </AppProvider>
+  );
+}
+```
+
+## Aligning the `admin` context object for webhooks
+
+The `admin` context returned by `authenticate.webhook` didn't match the object returned by e.g. `authenticate.admin`, which could lead to confusion.
+
+We updated the shape of the object returned by `authenticate.webhook` so that every authentication method returns a consistent format.
+That reduces the mental load for developers as they shouldn't have to learn more than one way of doing the same thing.
+
+To update your code:
+
+- GraphQL:
+  - replace `admin?.graphql.query()` with `admin?.graphql()`
+  - the graphql query function now takes the query string as the first argument, and an optional settings object, as opposed to a single object
+- REST:
+  - `admin.rest.get|post|put|delete()` remain unchanged
+  - `admin.rest.Product` (or other resource classes) are now under `admin.rest.resources.Product`
+
+Before:
+
+```ts
+export async function action({request}: ActionFunctionArgs) {
+  const {admin} = await shopify.authenticate.webhook(request);
+
+  // GraphQL query
+  const response = await admin?.graphql.query<any>({
+    data: {
+      query: `query { ... }`,
+      variables: {myVariable: '...'},
+    },
+  });
+
+  // REST resource
+  const products = await admin?.rest.Product.all({
+    // ...
+  });
+
+  // ...
+}
+```
+
+After:
+
+```ts
+export async function action({request}: ActionFunctionArgs) {
+  const {admin} = await shopify.authenticate.webhook(request);
+
+  // GraphQL query
+  const response = await admin?.graphql(`query { ... }`, {
+    variables: {myVariable: '...'},
+  });
+  const data = await response.json();
+
+  // REST resource
+  const products = await admin?.rest.resources.Product.all({
+    // ...
+  });
+
+  // ...
+}
+```

package/packages/shopify-app-remix/loom.config.ts

@@ -0,0 +1,57 @@
+import fs from 'fs';
+
+import {createPackage} from '@shopify/loom';
+import {babel, buildLibrary} from '@shopify/loom-plugin-build-library';
+
+export default createPackage((pkg) => {
+  pkg.entry({root: './src/server/index.ts'});
+  pkg.entry({root: './src/react/index.ts'});
+
+  const basePath = `${__dirname}/src/server/adapters`;
+  fs.readdirSync(basePath, {withFileTypes: true})
+    .filter((dirent) => dirent.isDirectory() && dirent.name !== '__tests__')
+    .forEach((dirent) => {
+      pkg.entry({root: `./src/server/adapters/${dirent.name}/index.ts`});
+    });
+
+  pkg.use(
+    buildLibrary({
+      // Required. A browserslist string for specifying your target output.
+      // Use browser targets (e.g. `'defaults'`) if your package targets the browser,
+      // node targets (e.g. `'node 12.22'`) if your package targets node
+      // or both (e.g.`'defaults, node 12.22'`) if your package targets both
+      targets: 'node 16',
+      // Optional. Defaults to false. Defines if commonjs outputs should be generated.
+      commonjs: true,
+      // Optional. Defaults to false. Defines if esmodules outputs should be generated.
+      esmodules: false,
+      // Optional. Defaults to false. Defines if esnext outputs should be generated.
+      esnext: false,
+      // Optional. Defaults to true. Defines if entrypoints should be written at
+      // the root of the repository. You can disable this if you have a single
+      // entrypoint or if your package uses the `exports` key in package.json
+      rootEntrypoints: false,
+      // Optional. Defaults to 'node'. Defines if the jest environment should be 'node' or 'jsdom'.
+      jestTestEnvironment: 'node',
+    }),
+    babel({
+      config(babelConfig) {
+        const presets = babelConfig.presets!;
+        const babelPresetIndex = presets.findIndex((preset) =>
+          String(preset[0]).includes('@shopify/babel-preset'),
+        );
+        const existingConfig = presets[babelPresetIndex][1];
+        presets[babelPresetIndex][1] = {
+          ...existingConfig,
+          reactOptions: {
+            ...existingConfig.reactOptions,
+            // This is required to support React 17
+            runtime: 'automatic',
+          },
+        };
+
+        return babelConfig;
+      },
+    }),
+  );
+});