diff --git a/.changeset/css-side-effect-import-extensions.md b/.changeset/css-side-effect-import-extensions.md
new file mode 100644
index 00000000000..16699b0394e
--- /dev/null
+++ b/.changeset/css-side-effect-import-extensions.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+Add support for `.mjs` and `.cjs` extensions when detecting CSS side-effect imports
diff --git a/contributors.yml b/contributors.yml
index 968c704e5a9..9f0d1ef1b0e 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -107,6 +107,7 @@
 - derekr
 - derenge
 - developit
+- devongovett
 - dgurns
 - dhargitai
 - dhmacs
diff --git a/integration/css-side-effect-imports-test.ts b/integration/css-side-effect-imports-test.ts
index 11cef0e99c8..3d8213bdc29 100644
--- a/integration/css-side-effect-imports-test.ts
+++ b/integration/css-side-effect-imports-test.ts
@@ -7,6 +7,7 @@ import {
   createFixture,
   css,
   js,
+  json,
 } from "./helpers/create-fixture";
 
 const TEST_PADDING_VALUE = "20px";
@@ -251,7 +252,7 @@ test.describe("CSS side-effect imports", () => {
         padding: ${TEST_PADDING_VALUE};
       }
     `,
-    "node_modules/@test-package/esm/index.js": js`
+    "node_modules/@test-package/esm/index.mjs": js`
       import React from 'react';
       import './styles.css';
 
@@ -266,6 +267,9 @@ test.describe("CSS side-effect imports", () => {
         );
       };
     `,
+    "node_modules/@test-package/esm/package.json": json({
+      exports: './index.mjs'
+    }),
     "app/routes/esm-package-test.jsx": js`
       import { Test } from "@test-package/esm";
       export default function() {
diff --git a/packages/remix-dev/compiler/plugins/cssSideEffectImportsPlugin.ts b/packages/remix-dev/compiler/plugins/cssSideEffectImportsPlugin.ts
index 57ff4653d52..cf9b1705077 100644
--- a/packages/remix-dev/compiler/plugins/cssSideEffectImportsPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/cssSideEffectImportsPlugin.ts
@@ -21,17 +21,19 @@ export function isCssSideEffectImportPath(path: string): boolean {
   return cssSideEffectFilter.test(path);
 }
 
-const loaders = ["js", "jsx", "ts", "tsx"] as const;
-const allJsFilesFilter = new RegExp(`\\.(${loaders.join("|")})$`);
+const extensions = ["js", "jsx", "ts", "tsx", "mjs", "cjs"] as const;
+const allJsFilesFilter = new RegExp(`\\.(${extensions.join("|")})$`);
 
-type Loader = typeof loaders[number];
-type Extension = `.${Loader}`;
+type Loader = 'js' | 'jsx' | 'ts' | 'tsx';
+type Extension = `.${typeof extensions[number]}`;
 
 const loaderForExtension: Record<Extension, Loader> = {
   ".js": "js",
   ".jsx": "jsx",
   ".ts": "ts",
   ".tsx": "tsx",
+  ".mjs": "js",
+  ".cjs": "js"
 };
 
 /**