Merge pull request #51 from BKWLD/es6-exports

Switch to ES6 exports
BKWLD · Sep 9, 2024 · 8235e53 · 8235e53
2 parents 68ef6ca + 4efe097
commit 8235e53
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 5 deletions.
diff --git a/packages/contentful/package.json b/packages/contentful/package.json
@@ -4,6 +4,7 @@
   "description": "Image and video renderer for Contentful assets.",
   "author": "Bukwild <[email protected]>",
   "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
@@ -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
@@ -4,6 +4,7 @@
   "description": "Image and video renderer for Next.js projects",
   "author": "Bukwild <[email protected]>",
   "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
@@ -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
@@ -4,6 +4,7 @@
   "description": "Image and video renderer for React projects",
   "author": "Bukwild <[email protected]>",
   "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
@@ -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
@@ -4,6 +4,7 @@
   "description": "Image and video renderer for Sanity + Next.js projects",
   "author": "Bukwild <[email protected]>",
   "license": "MIT",
+  "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [

diff --git 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,