fix: use mjs extension for esm build

package.json

@@ -2,12 +2,12 @@
   "name": "@portabletext/react",
   "version": "1.0.3",
   "description": "Render Portable Text with React",
-  "main": "./dist/react-portable-text.cjs.js",
-  "module": "./dist/react-portable-text.esm.js",
+  "main": "./dist/react-portable-text.js",
+  "module": "./dist/react-portable-text.mjs",
   "exports": {
     ".": {
-      "import": "./dist/react-portable-text.esm.js",
-      "require": "./dist/react-portable-text.cjs.js"
+      "import": "./dist/react-portable-text.mjs",
+      "require": "./dist/react-portable-text.js"
     }
   },
   "sideEffects": false,
@@ -20,7 +20,7 @@
   "scripts": {
     "lint": "eslint . && tsc --noEmit",
     "prepublishOnly": "npm run build && npm run lint",
-    "build:demo": "vite build demo --config=./vite.config.demo.js --base=/react-portabletext/",
+    "build:demo": "vite build demo --config=./vite.config.demo.ts --base=/react-portabletext/",
     "build": "vite build",
     "start": "vite demo",
     "test": "tap test/*.test.*",
@@ -37,10 +37,11 @@
   "author": "Sanity.io <hello@sanity.io>",
   "license": "MIT",
   "dependencies": {
-    "@portabletext/toolkit": "^1.0.4",
+    "@portabletext/toolkit": "^1.0.5",
     "@portabletext/types": "^1.0.3"
   },
   "devDependencies": {
+    "@rexxars/vite-dts": "^1.0.4",
     "@sanity/ui": "^0.37.5",
     "@types/leaflet": "^1.7.9",
     "@types/react": "^17.0.39",
@@ -66,8 +67,7 @@
     "styled-components": "^5.3.3",
     "tap": "^15.1.6",
     "typescript": "^4.5.5",
-    "vite": "^2.8.1",
-    "vite-dts": "^1.0.4"
+    "vite": "^2.8.1"
   },
   "peerDependencies": {
     "react": "^17.0.0"

vite.config.demo.js → vite.config.demo.ts

@@ -1,9 +1,10 @@
-const path = require('path')
-const {defineConfig} = require('vite')
-const {visualizer} = require('rollup-plugin-visualizer')
+import path from 'path'
+import {defineConfig} from 'vite'
+import {visualizer} from 'rollup-plugin-visualizer'
+
 const pkg = require('./package.json')
 
-module.exports = defineConfig({
+export default defineConfig({
   plugins: [
     visualizer({
       filename: path.join(__dirname, 'demo', 'dist', 'stats.html'),

vite.config.js → vite.config.ts

@@ -1,16 +1,20 @@
-const path = require('path')
-const {defineConfig} = require('vite')
-const dts = require('vite-dts').default
-const {visualizer} = require('rollup-plugin-visualizer')
+import path from 'path'
+import {defineConfig} from 'vite'
+import dts from '@rexxars/vite-dts'
+import {visualizer} from 'rollup-plugin-visualizer'
+
 const pkg = require('./package.json')
 
-module.exports = defineConfig({
+export default defineConfig({
   build: {
     lib: {
       entry: path.resolve(__dirname, 'src/index.ts'),
-      formats: ['esm', 'cjs'],
+      formats: ['es', 'cjs'],
       name: 'react-portable-text',
-      fileName: (format) => `react-portable-text.${format}.js`,
+      fileName: (format) => {
+        const ext = format === 'es' ? 'mjs' : 'js'
+        return `react-portable-text.${ext}`
+      },
     },
     rollupOptions: {
       external: ['react', '@portabletext/toolkit', '@portabletext/types'],