From 4f2fcbb8e7316532c1584d608fb1d8df2b7affa6 Mon Sep 17 00:00:00 2001 From: Robert Reinhard Date: Mon, 9 Sep 2024 14:53:35 -0700 Subject: [PATCH 1/4] Switch to es6 exports --- packages/contentful/package.json | 1 + packages/next/package.json | 1 + packages/react/package.json | 1 + packages/sanity-next/package.json | 1 + tsconfig.build.json | 8 ++++++-- 5 files changed, 10 insertions(+), 2 deletions(-) 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 ", "license": "MIT", + "type": "module", "main": "dist/index.js", "types": "dist/index.d.ts", "files": [ 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 ", "license": "MIT", + "type": "module", "main": "dist/index.js", "types": "dist/index.d.ts", "files": [ 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 ", "license": "MIT", + "type": "module", "main": "dist/index.js", "types": "dist/index.d.ts", "files": [ 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 ", "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..4e8ec67 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -1,7 +1,7 @@ { "compilerOptions": { - "target": "es5", - "module": "commonjs", + "target": "ESNext", + "module": "ESNext", "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, From d3ddd7a784e4a7fbd68d01fc92cdb31fa67758b4 Mon Sep 17 00:00:00 2001 From: Robert Reinhard Date: Mon, 9 Sep 2024 15:02:19 -0700 Subject: [PATCH 2/4] Update exports in Next config --- packages/next/next.config.js | 2 +- packages/sanity-next/next.config.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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/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 From 991a97e9413e609e2c6cbab42d24ddaa21c97e3d Mon Sep 17 00:00:00 2001 From: Robert Reinhard Date: Mon, 9 Sep 2024 15:42:30 -0700 Subject: [PATCH 3/4] Switch to explicit versions --- tsconfig.build.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tsconfig.build.json b/tsconfig.build.json index 4e8ec67..b4786a1 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -1,7 +1,7 @@ { "compilerOptions": { - "target": "ESNext", - "module": "ESNext", + "target": "es2022", + "module": "es2022", "declaration": true, "outDir": "./dist", "strict": true, From 4efe097e28abda9a7b11ba43c63ff11cc3fdd535 Mon Sep 17 00:00:00 2001 From: Robert Reinhard Date: Mon, 9 Sep 2024 15:43:39 -0700 Subject: [PATCH 4/4] Adding hack for loading next/image into sanity-next --- packages/next/src/NextVisual.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) 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'