diff --git a/packages/contentful/package.json b/packages/contentful/package.json
index 28164ef..3dab0b7 100644
--- a/packages/contentful/package.json
+++ b/packages/contentful/package.json
@@ -4,6 +4,7 @@
   "description": "Image and video renderer for Contentful assets.",
   "author": "Bukwild <info@bukwild.com>",
   "license": "MIT",
+  "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
diff --git a/packages/next/next.config.js b/packages/next/next.config.js
index 74a2e3c..bf6079e 100644
--- a/packages/next/next.config.js
+++ b/packages/next/next.config.js
@@ -1,5 +1,5 @@
 // Configuration of next/image for Cypress tess
-module.exports = {
+export default {
   images: {
 
     // Disable Next.js producing it's own crops within dev server which don't
diff --git a/packages/next/package.json b/packages/next/package.json
index 0920d53..722b0e2 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -4,6 +4,7 @@
   "description": "Image and video renderer for Next.js projects",
   "author": "Bukwild <info@bukwild.com>",
   "license": "MIT",
+  "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
diff --git a/packages/next/src/NextVisual.tsx b/packages/next/src/NextVisual.tsx
index 1f4571a..a707800 100644
--- a/packages/next/src/NextVisual.tsx
+++ b/packages/next/src/NextVisual.tsx
@@ -1,4 +1,8 @@
-import Image from 'next/image'
+// `next/image` as importing as { default: Image, __esmodule: true } when
+// this file was loaded by @react-visual/sanity-next. This is my hack to fix
+import _Image from "next/image";
+const Image = ("default" in _Image ? _Image.default : _Image) as typeof _Image;
+
 import type { ReactElement } from 'react'
 
 import { makeImagePlaceholder } from './lib/placeholder'
diff --git a/packages/react/package.json b/packages/react/package.json
index b52784b..2fe794a 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -4,6 +4,7 @@
   "description": "Image and video renderer for React projects",
   "author": "Bukwild <info@bukwild.com>",
   "license": "MIT",
+  "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
diff --git a/packages/sanity-next/next.config.js b/packages/sanity-next/next.config.js
index 258cd05..4f5044d 100644
--- a/packages/sanity-next/next.config.js
+++ b/packages/sanity-next/next.config.js
@@ -1,5 +1,5 @@
 // Configuration of next/image for Cypress tess
-module.exports = {
+export default {
   images: {
 
     // Support tests fetching imaages from placehold.co
diff --git a/packages/sanity-next/package.json b/packages/sanity-next/package.json
index bfaf0e4..1036963 100644
--- a/packages/sanity-next/package.json
+++ b/packages/sanity-next/package.json
@@ -4,6 +4,7 @@
   "description": "Image and video renderer for Sanity + Next.js projects",
   "author": "Bukwild <info@bukwild.com>",
   "license": "MIT",
+  "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
diff --git a/tsconfig.build.json b/tsconfig.build.json
index 52ae6ce..b4786a1 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
+    "target": "es2022",
+    "module": "es2022",
     "declaration": true,
     "outDir": "./dist",
     "strict": true,
@@ -10,6 +10,10 @@
     // Required for importing packages, like React, that have `export =`
     "esModuleInterop": true,
 
+    // Recommendations for greater interoperability
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+
     // Fixes build failures when dependent types have errors, like:
     // node_modules/next/dist/shared/lib/get-img-props.d.ts:70
     "skipLibCheck": true,