From 7fd4ae4e8c487759d675af5947d1b55fbd0b3391 Mon Sep 17 00:00:00 2001
From: Dan Onoshko <danon0404@gmail.com>
Date: Mon, 5 Dec 2022 21:09:22 +0400
Subject: [PATCH] feat: upgrade Chart.js to v4 (#960)

Chart.js v4 support

BREAKING CHANGE: package now is ESM-only, no CommonJS support
---
 .eslintrc.js => .eslintrc.cjs    |  2 +-
 .size-limit.json                 | 11 --------
 .storybook/manager.js            |  2 +-
 .storybook/package.json          |  3 +++
 package.json                     | 11 +++++---
 rollup.config.js                 | 32 +++++++++++++++++++++++
 rollup.config.mjs                | 45 --------------------------------
 sandboxes/bar/package.json       |  5 ++--
 sandboxes/bar/src/App.vue        |  2 +-
 sandboxes/bubble/package.json    |  5 ++--
 sandboxes/bubble/src/App.vue     |  2 +-
 sandboxes/custom/package.json    |  5 ++--
 sandboxes/custom/src/App.vue     |  4 +--
 sandboxes/doughnut/package.json  |  5 ++--
 sandboxes/doughnut/src/App.vue   |  2 +-
 sandboxes/line/package.json      |  5 ++--
 sandboxes/line/src/App.vue       |  2 +-
 sandboxes/pie/package.json       |  5 ++--
 sandboxes/pie/src/App.vue        |  2 +-
 sandboxes/polar-area/src/App.vue |  2 +-
 sandboxes/radar/package.json     |  5 ++--
 sandboxes/radar/src/App.vue      |  2 +-
 sandboxes/reactive/package.json  |  5 ++--
 sandboxes/reactive/src/App.vue   |  2 +-
 sandboxes/scatter/package.json   |  5 ++--
 sandboxes/scatter/src/App.vue    |  2 +-
 src/chart.ts                     |  7 ++---
 src/index.ts                     |  6 ++---
 src/props.ts                     |  6 ++---
 src/typedCharts.ts               |  6 ++---
 src/types.ts                     |  2 ++
 stories/bar.stories.ts           |  4 +--
 stories/bubble.stories.ts        |  4 +--
 stories/custom.stories.ts        |  4 +--
 stories/doughnut.stories.ts      |  4 +--
 stories/line.stories.ts          |  4 +--
 stories/pie.stories.ts           |  4 +--
 stories/polarArea.stories.ts     |  4 +--
 stories/radar.stories.ts         |  4 +--
 stories/reactive.stories.ts      |  4 +--
 stories/scatter.stories.ts       |  4 +--
 test/Bar.spec.ts                 |  4 +--
 test/Bubble.spec.ts              |  4 +--
 test/Doughnut.spec.ts            |  4 +--
 test/Line.spec.ts                |  4 +--
 test/Pie.spec.ts                 |  4 +--
 test/PolarArea.spec.ts           |  4 +--
 test/Radar.spec.ts               |  4 +--
 test/Scatter.spec.ts             |  4 +--
 test/types.test-d.ts             |  4 +--
 tsconfig.json                    |  7 ++---
 51 files changed, 139 insertions(+), 144 deletions(-)
 rename .eslintrc.js => .eslintrc.cjs (98%)
 create mode 100644 .storybook/package.json
 create mode 100644 rollup.config.js
 delete mode 100644 rollup.config.mjs

diff --git a/.eslintrc.js b/.eslintrc.cjs
similarity index 98%
rename from .eslintrc.js
rename to .eslintrc.cjs
index 69d9d53d..934c8dad 100644
--- a/.eslintrc.js
+++ b/.eslintrc.cjs
@@ -31,5 +31,5 @@ module.exports = {
       }
     }
   ],
-  ignorePatterns: ['dist/**/*', 'node_modules/**/*', 'rollup.config.mjs']
+  ignorePatterns: ['dist/**/*', 'node_modules/**/*', 'rollup.config.js']
 }
diff --git a/.size-limit.json b/.size-limit.json
index dd0eb0b3..5261dc91 100644
--- a/.size-limit.json
+++ b/.size-limit.json
@@ -1,15 +1,4 @@
 [
-  {
-    "path": "dist/index.cjs",
-    "limit": "1.75 KB",
-    "webpack": false,
-    "running": false
-  },
-  {
-    "path": "dist/index.cjs",
-    "limit": "1 KB",
-    "import": "{ Bar }"
-  },
   {
     "path": "dist/index.js",
     "limit": "1.7 KB",
diff --git a/.storybook/manager.js b/.storybook/manager.js
index da7d4c1a..7f903a97 100644
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@@ -1,6 +1,6 @@
 import { addons } from '@storybook/addons'
 
-import { theme } from './theme'
+import { theme } from './theme.js'
 
 addons.setConfig({
   theme,
diff --git a/.storybook/package.json b/.storybook/package.json
new file mode 100644
index 00000000..5bbefffb
--- /dev/null
+++ b/.storybook/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}
diff --git a/package.json b/package.json
index df8dd9d6..3347037e 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "name": "vue-chartjs",
+  "type": "module",
   "version": "4.1.2",
   "description": "Vue.js wrapper for chart.js for creating beautiful charts.",
   "author": "Jakub Juszczak <jakub@posteo.de>",
@@ -37,11 +38,13 @@
     "Charts"
   ],
   "sideEffects": false,
-  "main": "./src/index.ts",
   "types": "./dist/index.d.ts",
+  "exports": "./src/index.ts",
   "publishConfig": {
-    "main": "./dist/index.cjs",
-    "module": "./dist/index.js",
+    "exports": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
     "directory": "package"
   },
   "files": [
@@ -68,7 +71,7 @@
     "updateGitHooks": "simple-git-hooks"
   },
   "peerDependencies": {
-    "chart.js": "^3.7.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.0.0-0 || ^2.6.0"
   },
   "devDependencies": {
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 00000000..d2d47531
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,32 @@
+import { swc } from 'rollup-plugin-swc3'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import pkg from './package.json' assert { type: 'json' }
+
+const extensions = ['.js', '.ts']
+const external = _ => /node_modules/.test(_) && !/@swc\/helpers/.test(_)
+const plugins = targets => [
+  nodeResolve({
+    extensions
+  }),
+  swc({
+    tsconfig: false,
+    env: {
+      targets
+    },
+    module: {
+      type: 'es6'
+    },
+    sourceMaps: true
+  })
+]
+
+export default {
+  input: pkg.exports,
+  plugins: plugins('defaults and supports es6-module'),
+  external,
+  output: {
+    format: 'es',
+    file: pkg.publishConfig.exports.import,
+    sourcemap: true
+  }
+}
diff --git a/rollup.config.mjs b/rollup.config.mjs
deleted file mode 100644
index 0b5b60ff..00000000
--- a/rollup.config.mjs
+++ /dev/null
@@ -1,45 +0,0 @@
-import { swc } from 'rollup-plugin-swc3'
-import { nodeResolve } from '@rollup/plugin-node-resolve'
-import pkg from './package.json' assert { type: 'json' }
-
-const extensions = ['.js', '.ts']
-const external = _ => /node_modules/.test(_) && !/@swc\/helpers/.test(_)
-const plugins = (targets) => [
-  nodeResolve({
-    extensions
-  }),
-  swc({
-    tsconfig: false,
-    env: {
-      targets
-    },
-    module: {
-      type: 'es6'
-    },
-    sourceMaps: true
-  })
-]
-
-export default [
-  {
-    input: pkg.main,
-    plugins: plugins('defaults, not ie 11, not ie_mob 11'),
-    external,
-    output: {
-      format: 'cjs',
-      file: pkg.publishConfig.main,
-      exports: 'named',
-      sourcemap: true
-    }
-  },
-  {
-    input: pkg.main,
-    plugins: plugins('defaults and supports es6-module'),
-    external,
-    output: {
-      format: 'es',
-      file: pkg.publishConfig.module,
-      sourcemap: true
-    }
-  }
-]
diff --git a/sandboxes/bar/package.json b/sandboxes/bar/package.json
index 17f5a5dc..df369262 100644
--- a/sandboxes/bar/package.json
+++ b/sandboxes/bar/package.json
@@ -1,11 +1,12 @@
 {
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "dependencies": {
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.2.31",
-    "vue-chartjs": "^4.0.0"
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
diff --git a/sandboxes/bar/src/App.vue b/sandboxes/bar/src/App.vue
index 2cf53cdd..239a3ca0 100644
--- a/sandboxes/bar/src/App.vue
+++ b/sandboxes/bar/src/App.vue
@@ -13,7 +13,7 @@ import {
   LinearScale
 } from 'chart.js'
 import { Bar } from 'vue-chartjs'
-import * as chartConfig from './chartConfig'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
 
diff --git a/sandboxes/bubble/package.json b/sandboxes/bubble/package.json
index 17f5a5dc..df369262 100644
--- a/sandboxes/bubble/package.json
+++ b/sandboxes/bubble/package.json
@@ -1,11 +1,12 @@
 {
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "dependencies": {
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.2.31",
-    "vue-chartjs": "^4.0.0"
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
diff --git a/sandboxes/bubble/src/App.vue b/sandboxes/bubble/src/App.vue
index 50693f1b..787e5d86 100644
--- a/sandboxes/bubble/src/App.vue
+++ b/sandboxes/bubble/src/App.vue
@@ -11,7 +11,7 @@ import {
   LinearScale
 } from 'chart.js'
 import { Bubble } from 'vue-chartjs'
-import * as chartConfig from './chartConfig'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(LinearScale, PointElement, Tooltip, Legend)
 
diff --git a/sandboxes/custom/package.json b/sandboxes/custom/package.json
index 17f5a5dc..df369262 100644
--- a/sandboxes/custom/package.json
+++ b/sandboxes/custom/package.json
@@ -1,11 +1,12 @@
 {
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "dependencies": {
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.2.31",
-    "vue-chartjs": "^4.0.0"
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
diff --git a/sandboxes/custom/src/App.vue b/sandboxes/custom/src/App.vue
index a9007583..9ba2accc 100644
--- a/sandboxes/custom/src/App.vue
+++ b/sandboxes/custom/src/App.vue
@@ -13,8 +13,8 @@ import {
   Tooltip,
   Legend
 } from 'chart.js'
-import LineWithLineChart from './components/LineWithLineChart'
-import * as chartConfig from './chartConfig'
+import LineWithLineChart from './components/LineWithLineChart.js'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(
   CategoryScale,
diff --git a/sandboxes/doughnut/package.json b/sandboxes/doughnut/package.json
index 17f5a5dc..df369262 100644
--- a/sandboxes/doughnut/package.json
+++ b/sandboxes/doughnut/package.json
@@ -1,11 +1,12 @@
 {
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "dependencies": {
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.2.31",
-    "vue-chartjs": "^4.0.0"
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
diff --git a/sandboxes/doughnut/src/App.vue b/sandboxes/doughnut/src/App.vue
index 085fb258..cfe2fca1 100644
--- a/sandboxes/doughnut/src/App.vue
+++ b/sandboxes/doughnut/src/App.vue
@@ -5,7 +5,7 @@
 <script lang="ts">
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
 import { Doughnut } from 'vue-chartjs'
-import * as chartConfig from './chartConfig'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(ArcElement, Tooltip, Legend)
 
diff --git a/sandboxes/line/package.json b/sandboxes/line/package.json
index 17f5a5dc..df369262 100644
--- a/sandboxes/line/package.json
+++ b/sandboxes/line/package.json
@@ -1,11 +1,12 @@
 {
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "dependencies": {
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.2.31",
-    "vue-chartjs": "^4.0.0"
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
diff --git a/sandboxes/line/src/App.vue b/sandboxes/line/src/App.vue
index 692d1574..d0794b6f 100644
--- a/sandboxes/line/src/App.vue
+++ b/sandboxes/line/src/App.vue
@@ -14,7 +14,7 @@ import {
   Legend
 } from 'chart.js'
 import { Line } from 'vue-chartjs'
-import * as chartConfig from './chartConfig'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(
   CategoryScale,
diff --git a/sandboxes/pie/package.json b/sandboxes/pie/package.json
index 17f5a5dc..df369262 100644
--- a/sandboxes/pie/package.json
+++ b/sandboxes/pie/package.json
@@ -1,11 +1,12 @@
 {
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "dependencies": {
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.2.31",
-    "vue-chartjs": "^4.0.0"
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
diff --git a/sandboxes/pie/src/App.vue b/sandboxes/pie/src/App.vue
index 310c3935..b6e0b2e3 100644
--- a/sandboxes/pie/src/App.vue
+++ b/sandboxes/pie/src/App.vue
@@ -5,7 +5,7 @@
 <script lang="ts">
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
 import { Pie } from 'vue-chartjs'
-import * as chartConfig from './chartConfig'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(ArcElement, Tooltip, Legend)
 
diff --git a/sandboxes/polar-area/src/App.vue b/sandboxes/polar-area/src/App.vue
index 849663f7..e4289c33 100644
--- a/sandboxes/polar-area/src/App.vue
+++ b/sandboxes/polar-area/src/App.vue
@@ -11,7 +11,7 @@ import {
   Legend
 } from 'chart.js'
 import { PolarArea } from 'vue-chartjs'
-import * as chartConfig from './chartConfig'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend)
 
diff --git a/sandboxes/radar/package.json b/sandboxes/radar/package.json
index 17f5a5dc..df369262 100644
--- a/sandboxes/radar/package.json
+++ b/sandboxes/radar/package.json
@@ -1,11 +1,12 @@
 {
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "dependencies": {
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.2.31",
-    "vue-chartjs": "^4.0.0"
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
diff --git a/sandboxes/radar/src/App.vue b/sandboxes/radar/src/App.vue
index 2d9516a4..b0809877 100644
--- a/sandboxes/radar/src/App.vue
+++ b/sandboxes/radar/src/App.vue
@@ -13,7 +13,7 @@ import {
   Legend
 } from 'chart.js'
 import { Radar } from 'vue-chartjs'
-import * as chartConfig from './chartConfig'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(
   RadialLinearScale,
diff --git a/sandboxes/reactive/package.json b/sandboxes/reactive/package.json
index 17f5a5dc..df369262 100644
--- a/sandboxes/reactive/package.json
+++ b/sandboxes/reactive/package.json
@@ -1,11 +1,12 @@
 {
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "dependencies": {
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.2.31",
-    "vue-chartjs": "^4.0.0"
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
diff --git a/sandboxes/reactive/src/App.vue b/sandboxes/reactive/src/App.vue
index 2120f8d1..cf083e99 100644
--- a/sandboxes/reactive/src/App.vue
+++ b/sandboxes/reactive/src/App.vue
@@ -15,7 +15,7 @@ import {
   ChartData
 } from 'chart.js'
 import { Bar } from 'vue-chartjs'
-import * as chartConfig from './chartConfig'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
 
diff --git a/sandboxes/scatter/package.json b/sandboxes/scatter/package.json
index 17f5a5dc..df369262 100644
--- a/sandboxes/scatter/package.json
+++ b/sandboxes/scatter/package.json
@@ -1,11 +1,12 @@
 {
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "dependencies": {
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.2.31",
-    "vue-chartjs": "^4.0.0"
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
diff --git a/sandboxes/scatter/src/App.vue b/sandboxes/scatter/src/App.vue
index 4009fcf6..1ed9bd44 100644
--- a/sandboxes/scatter/src/App.vue
+++ b/sandboxes/scatter/src/App.vue
@@ -12,7 +12,7 @@ import {
   Legend
 } from 'chart.js'
 import { Scatter } from 'vue-chartjs'
-import * as chartConfig from './chartConfig'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend)
 
diff --git a/src/chart.ts b/src/chart.ts
index 463ee905..dbe4c8a7 100644
--- a/src/chart.ts
+++ b/src/chart.ts
@@ -9,7 +9,8 @@ import {
   toRaw
 } from 'vue'
 import { Chart as ChartJS } from 'chart.js'
-import { Props } from './props'
+import type { ChartComponent } from './types.js'
+import { Props } from './props.js'
 import {
   cloneData,
   setLabels,
@@ -17,7 +18,7 @@ import {
   setOptions,
   toRawIfProxy,
   cloneProxy
-} from './utils'
+} from './utils.js'
 
 export const Chart = defineComponent({
   props: Props,
@@ -113,4 +114,4 @@ export const Chart = defineComponent({
       })
     }
   }
-})
+}) as ChartComponent
diff --git a/src/index.ts b/src/index.ts
index 024deb2e..26f802d1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
-import { Chart } from './chart'
+import { Chart } from './chart.js'
 import {
   createTypedChart,
   Bar,
@@ -9,9 +9,9 @@ import {
   Radar,
   Bubble,
   Scatter
-} from './typedCharts'
+} from './typedCharts.js'
 
-export type { ChartProps, ChartComponentRef } from './types'
+export type { ChartProps, ChartComponentRef } from './types.js'
 export {
   Chart,
   createTypedChart,
diff --git a/src/props.ts b/src/props.ts
index 05dbd384..90b54121 100644
--- a/src/props.ts
+++ b/src/props.ts
@@ -1,5 +1,5 @@
-import { PropType } from 'vue'
-import type { ChartType, ChartData, ChartOptions, Plugin } from 'chart.js'
+import type { PropType } from 'vue'
+import type { ChartType, ChartData, Plugin } from 'chart.js'
 
 export const CommonProps = {
   data: {
@@ -7,7 +7,7 @@ export const CommonProps = {
     required: true
   },
   options: {
-    type: Object as PropType<ChartOptions>,
+    type: Object, // as PropType<ChartOptions>, restore after Chart.js update
     default: () => ({})
   },
   plugins: {
diff --git a/src/typedCharts.ts b/src/typedCharts.ts
index 1da7cfb1..3160d04e 100644
--- a/src/typedCharts.ts
+++ b/src/typedCharts.ts
@@ -11,9 +11,9 @@ import {
   RadarController,
   ScatterController
 } from 'chart.js'
-import type { TypedChartComponent, ChartComponentRef } from './types'
-import { CommonProps } from './props'
-import { Chart } from './chart'
+import type { TypedChartComponent, ChartComponentRef } from './types.js'
+import { CommonProps } from './props.js'
+import { Chart } from './chart.js'
 
 export function createTypedChart<
   TType extends ChartType = ChartType,
diff --git a/src/types.ts b/src/types.ts
index f9b5e0eb..70a68c8b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -49,6 +49,8 @@ export interface ChartComponentRef<
   chart: ChartJS<TType, TData, TLabel> | null
 }
 
+export type ChartComponent = DefineComponent<ChartProps>
+
 export type TypedChartComponent<
   TType extends ChartType,
   TData = DefaultDataPoint<TType>,
diff --git a/stories/bar.stories.ts b/stories/bar.stories.ts
index b5e98b09..ec53afc9 100644
--- a/stories/bar.stories.ts
+++ b/stories/bar.stories.ts
@@ -1,6 +1,6 @@
 import 'chart.js/auto'
-import { Bar } from '../src'
-import * as barChartConfig from '../sandboxes/bar/src/chartConfig'
+import { Bar } from '../src/index.js'
+import * as barChartConfig from '../sandboxes/bar/src/chartConfig.js'
 
 export default {
   title: 'BarChart',
diff --git a/stories/bubble.stories.ts b/stories/bubble.stories.ts
index 5d30bf12..3a1c5dd4 100644
--- a/stories/bubble.stories.ts
+++ b/stories/bubble.stories.ts
@@ -1,6 +1,6 @@
 import 'chart.js/auto'
-import { Bubble } from '../src'
-import * as bubbleChartConfig from '../sandboxes/bubble/src/chartConfig'
+import { Bubble } from '../src/index.js'
+import * as bubbleChartConfig from '../sandboxes/bubble/src/chartConfig.js'
 
 export default {
   title: 'BubbleChart',
diff --git a/stories/custom.stories.ts b/stories/custom.stories.ts
index 97c9c688..cda760fa 100644
--- a/stories/custom.stories.ts
+++ b/stories/custom.stories.ts
@@ -1,6 +1,6 @@
 import 'chart.js/auto'
-import LineWithLineChart from '../sandboxes/custom/src/components/LineWithLineChart'
-import * as customChartConfig from '../sandboxes/custom/src/chartConfig'
+import LineWithLineChart from '../sandboxes/custom/src/components/LineWithLineChart.js'
+import * as customChartConfig from '../sandboxes/custom/src/chartConfig.js'
 
 export default {
   title: 'CustomChart',
diff --git a/stories/doughnut.stories.ts b/stories/doughnut.stories.ts
index b7eacc3f..edbafc42 100644
--- a/stories/doughnut.stories.ts
+++ b/stories/doughnut.stories.ts
@@ -1,6 +1,6 @@
 import 'chart.js/auto'
-import { Doughnut } from '../src'
-import * as doughnutChartConfig from '../sandboxes/doughnut/src/chartConfig'
+import { Doughnut } from '../src/index.js'
+import * as doughnutChartConfig from '../sandboxes/doughnut/src/chartConfig.js'
 
 export default {
   title: 'DoughnutChart',
diff --git a/stories/line.stories.ts b/stories/line.stories.ts
index e1f81416..2a209046 100644
--- a/stories/line.stories.ts
+++ b/stories/line.stories.ts
@@ -1,6 +1,6 @@
 import 'chart.js/auto'
-import { Line } from '../src'
-import * as lineChartConfig from '../sandboxes/line/src/chartConfig'
+import { Line } from '../src/index.js'
+import * as lineChartConfig from '../sandboxes/line/src/chartConfig.js'
 
 export default {
   title: 'LineChart',
diff --git a/stories/pie.stories.ts b/stories/pie.stories.ts
index 09212604..ebf42dbc 100644
--- a/stories/pie.stories.ts
+++ b/stories/pie.stories.ts
@@ -1,6 +1,6 @@
 import 'chart.js/auto'
-import { Pie } from '../src'
-import * as pieChartConfig from '../sandboxes/pie/src/chartConfig'
+import { Pie } from '../src/index.js'
+import * as pieChartConfig from '../sandboxes/pie/src/chartConfig.js'
 
 export default {
   title: 'PieChart',
diff --git a/stories/polarArea.stories.ts b/stories/polarArea.stories.ts
index b71dbe15..7c1ba82a 100644
--- a/stories/polarArea.stories.ts
+++ b/stories/polarArea.stories.ts
@@ -1,6 +1,6 @@
 import 'chart.js/auto'
-import { PolarArea } from '../src'
-import * as polarAreaChartConfig from '../sandboxes/polar-area/src/chartConfig'
+import { PolarArea } from '../src/index.js'
+import * as polarAreaChartConfig from '../sandboxes/polar-area/src/chartConfig.js'
 
 export default {
   title: 'PolarAreaChart',
diff --git a/stories/radar.stories.ts b/stories/radar.stories.ts
index 5de75f49..29615d46 100644
--- a/stories/radar.stories.ts
+++ b/stories/radar.stories.ts
@@ -1,6 +1,6 @@
 import 'chart.js/auto'
-import { Radar } from '../src'
-import * as radarChartConfig from '../sandboxes/radar/src/chartConfig'
+import { Radar } from '../src/index.js'
+import * as radarChartConfig from '../sandboxes/radar/src/chartConfig.js'
 
 export default {
   title: 'RadarChart',
diff --git a/stories/reactive.stories.ts b/stories/reactive.stories.ts
index 2626c9f6..e6b01208 100644
--- a/stories/reactive.stories.ts
+++ b/stories/reactive.stories.ts
@@ -1,7 +1,7 @@
 import 'chart.js/auto'
 import { ref, onMounted } from 'vue'
-import { Bar } from '../src'
-import * as reactiveChartConfig from '../sandboxes/reactive/src/chartConfig'
+import { Bar } from '../src/index.js'
+import * as reactiveChartConfig from '../sandboxes/reactive/src/chartConfig.js'
 
 export default {
   title: 'Reactive',
diff --git a/stories/scatter.stories.ts b/stories/scatter.stories.ts
index 8d54cf11..e51b5f59 100644
--- a/stories/scatter.stories.ts
+++ b/stories/scatter.stories.ts
@@ -1,6 +1,6 @@
 import 'chart.js/auto'
-import { Scatter } from '../src'
-import * as scatterChartConfig from '../sandboxes/scatter/src/chartConfig'
+import { Scatter } from '../src/index.js'
+import * as scatterChartConfig from '../sandboxes/scatter/src/chartConfig.js'
 
 export default {
   title: 'ScatterChart',
diff --git a/test/Bar.spec.ts b/test/Bar.spec.ts
index 7c30adb2..c2b570a3 100644
--- a/test/Bar.spec.ts
+++ b/test/Bar.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { Bar } from '../src'
-import * as barChartConfig from '../sandboxes/bar/src/chartConfig'
+import { Bar } from '../src/index.js'
+import * as barChartConfig from '../sandboxes/bar/src/chartConfig.js'
 
 describe('BarChart', () => {
   it('should render a canvas', () => {
diff --git a/test/Bubble.spec.ts b/test/Bubble.spec.ts
index 252951ba..dc5cf60c 100644
--- a/test/Bubble.spec.ts
+++ b/test/Bubble.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { Bubble } from '../src'
-import * as bubbleChartConfig from '../sandboxes/bubble/src/chartConfig'
+import { Bubble } from '../src/index.js'
+import * as bubbleChartConfig from '../sandboxes/bubble/src/chartConfig.js'
 
 describe('BubbleChart', () => {
   it('should render a canvas', () => {
diff --git a/test/Doughnut.spec.ts b/test/Doughnut.spec.ts
index 2b0901e6..fa4af99d 100644
--- a/test/Doughnut.spec.ts
+++ b/test/Doughnut.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { Doughnut } from '../src'
-import * as doughnutChartConfig from '../sandboxes/doughnut/src/chartConfig'
+import { Doughnut } from '../src/index.js'
+import * as doughnutChartConfig from '../sandboxes/doughnut/src/chartConfig.js'
 
 describe('DoughnutChart', () => {
   it('should render a canvas', () => {
diff --git a/test/Line.spec.ts b/test/Line.spec.ts
index 5751f161..81b4a7a2 100644
--- a/test/Line.spec.ts
+++ b/test/Line.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { Line } from '../src'
-import * as lineChartConfig from '../sandboxes/line/src/chartConfig'
+import { Line } from '../src/index.js'
+import * as lineChartConfig from '../sandboxes/line/src/chartConfig.js'
 
 describe('LineChart', () => {
   it('should render a canvas', () => {
diff --git a/test/Pie.spec.ts b/test/Pie.spec.ts
index ae599998..0f19ceb3 100644
--- a/test/Pie.spec.ts
+++ b/test/Pie.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { Pie } from '../src'
-import * as pieChartConfig from '../sandboxes/pie/src/chartConfig'
+import { Pie } from '../src/index.js'
+import * as pieChartConfig from '../sandboxes/pie/src/chartConfig.js'
 
 describe('PieChart', () => {
   it('should render a canvas', () => {
diff --git a/test/PolarArea.spec.ts b/test/PolarArea.spec.ts
index c3c86a63..e673d07b 100644
--- a/test/PolarArea.spec.ts
+++ b/test/PolarArea.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { PolarArea } from '../src'
-import * as polarAreaChartConfig from '../sandboxes/polar-area/src/chartConfig'
+import { PolarArea } from '../src/index.js'
+import * as polarAreaChartConfig from '../sandboxes/polar-area/src/chartConfig.js'
 
 describe('PolarAreaChart', () => {
   it('should render a canvas', () => {
diff --git a/test/Radar.spec.ts b/test/Radar.spec.ts
index 6b26415d..2e5b56b5 100644
--- a/test/Radar.spec.ts
+++ b/test/Radar.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { Radar } from '../src'
-import * as radarChartConfig from '../sandboxes/radar/src/chartConfig'
+import { Radar } from '../src/index.js'
+import * as radarChartConfig from '../sandboxes/radar/src/chartConfig.js'
 
 describe('RadarChart', () => {
   it('should render a canvas', () => {
diff --git a/test/Scatter.spec.ts b/test/Scatter.spec.ts
index d9f66600..391825ee 100644
--- a/test/Scatter.spec.ts
+++ b/test/Scatter.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { Scatter } from '../src'
-import * as scatterChartConfig from '../sandboxes/scatter/src/chartConfig'
+import { Scatter } from '../src/index.js'
+import * as scatterChartConfig from '../sandboxes/scatter/src/chartConfig.js'
 
 describe('ScatterChart', () => {
   it('should render a canvas', () => {
diff --git a/test/types.test-d.ts b/test/types.test-d.ts
index db73136e..a3bb41dc 100644
--- a/test/types.test-d.ts
+++ b/test/types.test-d.ts
@@ -1,8 +1,8 @@
 import { h } from 'vue'
 import { expectError } from 'tsd'
-import { Plugin } from 'chart.js'
+import type { Plugin } from 'chart.js'
 
-import { Bar, Radar, Scatter, Doughnut } from '../src'
+import { Bar, Radar, Scatter, Doughnut } from '../src/index.js'
 
 const data = {
   datasets: []
diff --git a/tsconfig.json b/tsconfig.json
index df120f0f..99b14f3d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,12 +10,13 @@
     "noUnusedParameters": true,
     /* Modules */
     "baseUrl": ".",
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Node", // restore to "NodeNext" after Chart.js update
     "resolveJsonModule": true,
     /* Emit */
     "declaration": true,
     "declarationMap": true,
+    "importsNotUsedAsValues": "error",
     "inlineSourceMap": true,
     "outDir": "dist",
     /* Interop Constraints */
@@ -26,7 +27,7 @@
       "dom",
       "esnext"
     ],
-    "target": "esnext",
+    "target": "ESNext",
     /* Completeness */
     "skipLibCheck": true
   },