Integration with Shopify Hydrogen and Oxygen

​

Adding remix-development-tools to your project

Even though remix-development-tools is an ESM package, some of the dependencies it relies on are unfortunately not. This means that these dependencies will break the shopify CLI when running your Remix app built on top of Shopify Hydrogen and Oxygen.

In case your package.json script dev command looks like this:

  "dev": "shopify hydrogen dev --codegen",

This means you'll have to do the following to get it working.

Go to your vite.config.ts and add remix-development-tools, depending on your project the file will look something like this:

import { defineConfig } from 'vite';
import { hydrogen } from '@shopify/hydrogen/vite';
import { oxygen } from '@shopify/mini-oxygen/vite';
import { vitePlugin as remix} from '@remix-run/dev';
import tsconfigPaths from 'vite-tsconfig-paths';
+ import { remixDevTools } from 'remix-development-tools';
export default defineConfig({
  plugins: [
+   remixDevTools(),
    hydrogen(),
    oxygen(),
    remix({
      presets: [hydrogen.preset()],
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
  ],
  build: {
    assetsInlineLimit: 0,
  },
  ssr: {
    optimizeDeps: {
      include: [],
    },
  },
});

​

Adding problematic dependencies

Add the following dependencies to ssr.optimizeDeps.include array:

export default defineConfig({
  plugins: [
    hydrogen(),
    oxygen(),
    remix({
      presets: [hydrogen.preset()],
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
  ],
  build: {
    assetsInlineLimit: 0,
  },
+  ssr: {
+    optimizeDeps: {
+      include: [
+        'react-use-websocket',
+        'beautify',
+        'react-diff-viewer-continued',
+        'react-d3-tree',
+      ],
+    },
+  },
});

​

Debugging issues

If you're still having issues, look at the error log output by the Shopify CLI and see if there are any errors related to the dependencies, the usual errors you might see are:

• require is not defined
• module.exports is not defined
• Cannot find module 'X'

This all indicated that there is a problem with a dependency that is used by remix-development-tools. Sometimes it's even a dependency not directly used by remix-development-tools, but it's a dependency of a dependency that is used by remix-development-tools.

So if adding the first depedency in the error stack strace does not work, see if there are any additional dependencies in the stack trace before remix-development-tools. This package will be the last one in the stack trace.

Enjoy your new remix-development-tools 🚀