diff --git a/package-lock.json b/package-lock.json
index b6b5560b7..c78303f97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7870,7 +7870,7 @@
             }
         },
         "packages/alpinejs": {
-            "version": "3.14.4",
+            "version": "3.14.9",
             "license": "MIT",
             "dependencies": {
                 "@vue/reactivity": "~3.1.1"
@@ -7878,17 +7878,17 @@
         },
         "packages/anchor": {
             "name": "@alpinejs/anchor",
-            "version": "3.14.4",
+            "version": "3.14.9",
             "license": "MIT"
         },
         "packages/collapse": {
             "name": "@alpinejs/collapse",
-            "version": "3.14.4",
+            "version": "3.14.9",
             "license": "MIT"
         },
         "packages/csp": {
             "name": "@alpinejs/csp",
-            "version": "3.14.4",
+            "version": "3.14.9",
             "license": "MIT",
             "dependencies": {
                 "@vue/reactivity": "~3.1.1"
@@ -7896,12 +7896,12 @@
         },
         "packages/docs": {
             "name": "@alpinejs/docs",
-            "version": "3.14.4-revision.1",
+            "version": "3.14.9-revision.1",
             "license": "MIT"
         },
         "packages/focus": {
             "name": "@alpinejs/focus",
-            "version": "3.14.4",
+            "version": "3.14.9",
             "license": "MIT",
             "dependencies": {
                 "focus-trap": "^6.9.4",
@@ -7918,17 +7918,17 @@
         },
         "packages/intersect": {
             "name": "@alpinejs/intersect",
-            "version": "3.14.4",
+            "version": "3.14.9",
             "license": "MIT"
         },
         "packages/mask": {
             "name": "@alpinejs/mask",
-            "version": "3.14.4",
+            "version": "3.14.9",
             "license": "MIT"
         },
         "packages/morph": {
             "name": "@alpinejs/morph",
-            "version": "3.14.4",
+            "version": "3.14.9",
             "license": "MIT"
         },
         "packages/navigate": {
@@ -7941,22 +7941,22 @@
         },
         "packages/persist": {
             "name": "@alpinejs/persist",
-            "version": "3.14.4",
+            "version": "3.14.9",
             "license": "MIT"
         },
         "packages/resize": {
             "name": "@alpinejs/resize",
-            "version": "3.14.4",
+            "version": "3.14.9",
             "license": "MIT"
         },
         "packages/sort": {
             "name": "@alpinejs/sort",
-            "version": "3.14.4",
+            "version": "3.14.9",
             "license": "MIT"
         },
         "packages/ui": {
             "name": "@alpinejs/ui",
-            "version": "3.14.4",
+            "version": "3.14.9",
             "license": "MIT",
             "devDependencies": {}
         }
diff --git a/packages/alpinejs/builds/cdn.js b/packages/alpinejs/builds/cdn.js
index a54e7e050..3ee074462 100644
--- a/packages/alpinejs/builds/cdn.js
+++ b/packages/alpinejs/builds/cdn.js
@@ -1,4 +1,4 @@
-import Alpine from './../src/index'
+import Alpine from '../src/index.js'
 
 window.Alpine = Alpine
 
diff --git a/packages/alpinejs/builds/module.js b/packages/alpinejs/builds/module.js
index 1d9d6a76d..925f7dbed 100644
--- a/packages/alpinejs/builds/module.js
+++ b/packages/alpinejs/builds/module.js
@@ -1,4 +1,4 @@
-import Alpine from './../src/index'
+import Alpine from '../src/index.js'
 
 export default Alpine
 
diff --git a/packages/alpinejs/src/alpine.js b/packages/alpinejs/src/alpine.js
index cf7081ef6..7549654ca 100644
--- a/packages/alpinejs/src/alpine.js
+++ b/packages/alpinejs/src/alpine.js
@@ -1,24 +1,24 @@
-import { setReactivityEngine, disableEffectScheduling, reactive, effect, release, raw, watch } from './reactivity'
-import { mapAttributes, directive, setPrefix as prefix, prefix as prefixed } from './directives'
-import { start, addRootSelector, addInitSelector, closestRoot, findClosest, initTree, destroyTree, interceptInit } from './lifecycle'
-import { onElRemoved, onAttributeRemoved, onAttributesAdded, mutateDom, deferMutations, flushAndStopDeferringMutations, startObservingMutations, stopObservingMutations } from './mutation'
-import { mergeProxies, closestDataStack, addScopeToNode, scope as $data } from './scope'
-import { setEvaluator, evaluate, evaluateLater, dontAutoEvaluateFunctions } from './evaluator'
-import { transition } from './directives/x-transition'
-import { clone, cloneNode, skipDuringClone, onlyDuringClone, interceptClone } from './clone'
-import { interceptor } from './interceptor'
-import { getBinding as bound, extractProp } from './utils/bind'
-import { debounce } from './utils/debounce'
-import { throttle } from './utils/throttle'
-import { setStyles } from './utils/styles'
-import { entangle } from './entangle'
-import { nextTick } from './nextTick'
-import { walk } from './utils/walk'
-import { plugin } from './plugin'
-import { magic } from './magics'
-import { store } from './store'
-import { bind } from './binds'
-import { data } from './datas'
+import { setReactivityEngine, disableEffectScheduling, reactive, effect, release, raw, watch } from './reactivity.js'
+import { mapAttributes, directive, setPrefix as prefix, prefix as prefixed } from './directives.js'
+import { start, addRootSelector, addInitSelector, closestRoot, findClosest, initTree, destroyTree, interceptInit } from './lifecycle.js'
+import { onElRemoved, onAttributeRemoved, onAttributesAdded, mutateDom, deferMutations, flushAndStopDeferringMutations, startObservingMutations, stopObservingMutations } from './mutation.js'
+import { mergeProxies, closestDataStack, addScopeToNode, scope as $data } from './scope.js'
+import { setEvaluator, evaluate, evaluateLater, dontAutoEvaluateFunctions } from './evaluator.js'
+import { transition } from './directives/x-transition.js'
+import { clone, cloneNode, skipDuringClone, onlyDuringClone, interceptClone } from './clone.js'
+import { interceptor } from './interceptor.js'
+import { getBinding as bound, extractProp } from './utils/bind.js'
+import { debounce } from './utils/debounce.js'
+import { throttle } from './utils/throttle.js'
+import { setStyles } from './utils/styles.js'
+import { entangle } from './entangle.js'
+import { nextTick } from './nextTick.js'
+import { walk } from './utils/walk.js'
+import { plugin } from './plugin.js'
+import { magic } from './magics.js'
+import { store } from './store.js'
+import { bind } from './binds.js'
+import { data } from './datas.js'
 
 let Alpine = {
     get reactive() { return reactive },
diff --git a/packages/alpinejs/src/binds.js b/packages/alpinejs/src/binds.js
index ae09b41a6..9c07782db 100644
--- a/packages/alpinejs/src/binds.js
+++ b/packages/alpinejs/src/binds.js
@@ -1,4 +1,4 @@
-import { attributesOnly, directives } from "./directives"
+import { attributesOnly, directives } from "./directives.js"
 
 let binds = {}
 
diff --git a/packages/alpinejs/src/clone.js b/packages/alpinejs/src/clone.js
index e93ff688c..0d650cfaa 100644
--- a/packages/alpinejs/src/clone.js
+++ b/packages/alpinejs/src/clone.js
@@ -1,6 +1,6 @@
-import { effect, release, overrideEffect } from "./reactivity"
-import { initTree, isRoot } from "./lifecycle"
-import { walk } from "./utils/walk"
+import { effect, release, overrideEffect } from "./reactivity.js"
+import { initTree, isRoot } from "./lifecycle.js"
+import { walk } from "./utils/walk.js"
 
 export let isCloning = false
 
diff --git a/packages/alpinejs/src/directives.js b/packages/alpinejs/src/directives.js
index 410086b09..efcd9dbe5 100644
--- a/packages/alpinejs/src/directives.js
+++ b/packages/alpinejs/src/directives.js
@@ -1,7 +1,7 @@
-import { onAttributeRemoved, onElRemoved } from './mutation'
-import { evaluate, evaluateLater } from './evaluator'
-import { elementBoundEffect } from './reactivity'
-import Alpine from './alpine'
+import { onAttributeRemoved, onElRemoved } from './mutation.js'
+import { evaluate, evaluateLater } from './evaluator.js'
+import { elementBoundEffect } from './reactivity.js'
+import Alpine from './alpine.js'
 
 let prefixAsString = 'x-'
 
diff --git a/packages/alpinejs/src/directives/index.js b/packages/alpinejs/src/directives/index.js
index 0c9ed3ba2..ad56dfbc6 100644
--- a/packages/alpinejs/src/directives/index.js
+++ b/packages/alpinejs/src/directives/index.js
@@ -1,24 +1,24 @@
-import { directive } from '../directives'
-import { warn } from '../utils/warn'
+import { directive } from '../directives.js'
+import { warn } from '../utils/warn.js'
 
-import './x-transition'
-import './x-modelable'
-import './x-teleport'
-import './x-ignore'
-import './x-effect'
-import './x-model'
-import './x-cloak'
-import './x-init'
-import './x-text'
-import './x-html'
-import './x-bind'
-import './x-data'
-import './x-show'
-import './x-for'
-import './x-ref'
-import './x-if'
-import './x-id'
-import './x-on'
+import './x-transition.js'
+import './x-modelable.js'
+import './x-teleport.js'
+import './x-ignore.js'
+import './x-effect.js'
+import './x-model.js'
+import './x-cloak.js'
+import './x-init.js'
+import './x-text.js'
+import './x-html.js'
+import './x-bind.js'
+import './x-data.js'
+import './x-show.js'
+import './x-for.js'
+import './x-ref.js'
+import './x-if.js'
+import './x-id.js'
+import './x-on.js'
 
 // Register warnings for people using plugin syntaxes and not loading the plugin itself:
 warnMissingPluginDirective('Collapse', 'collapse', 'collapse')
diff --git a/packages/alpinejs/src/directives/x-bind.js b/packages/alpinejs/src/directives/x-bind.js
index 947d0f837..57eb5259a 100644
--- a/packages/alpinejs/src/directives/x-bind.js
+++ b/packages/alpinejs/src/directives/x-bind.js
@@ -1,8 +1,8 @@
-import { directive, into, mapAttributes, prefix, startingWith } from '../directives'
-import { evaluateLater } from '../evaluator'
-import { mutateDom } from '../mutation'
-import bind from '../utils/bind'
-import { applyBindingsObject, injectBindingProviders } from '../binds'
+import { directive, into, mapAttributes, prefix, startingWith } from '../directives.js'
+import { evaluateLater } from '../evaluator.js'
+import { mutateDom } from '../mutation.js'
+import bind from '../utils/bind.js'
+import { applyBindingsObject, injectBindingProviders } from '../binds.js'
 
 mapAttributes(startingWith(':', into(prefix('bind:'))))
 
diff --git a/packages/alpinejs/src/directives/x-cloak.js b/packages/alpinejs/src/directives/x-cloak.js
index 84639f0a2..a0630bf06 100644
--- a/packages/alpinejs/src/directives/x-cloak.js
+++ b/packages/alpinejs/src/directives/x-cloak.js
@@ -1,4 +1,4 @@
-import { directive, prefix } from '../directives'
-import { mutateDom } from '../mutation'
+import { directive, prefix } from '../directives.js'
+import { mutateDom } from '../mutation.js'
 
 directive('cloak', el => queueMicrotask(() => mutateDom(() => el.removeAttribute(prefix('cloak')))))
diff --git a/packages/alpinejs/src/directives/x-data.js b/packages/alpinejs/src/directives/x-data.js
index 0bc0ed972..fae6b652d 100644
--- a/packages/alpinejs/src/directives/x-data.js
+++ b/packages/alpinejs/src/directives/x-data.js
@@ -1,12 +1,12 @@
-import { directive, prefix } from '../directives'
-import { initInterceptors } from '../interceptor'
-import { injectDataProviders } from '../datas'
-import { addRootSelector } from '../lifecycle'
-import { interceptClone, isCloning, isCloningLegacy } from '../clone'
-import { addScopeToNode } from '../scope'
-import { injectMagics, magic } from '../magics'
-import { reactive } from '../reactivity'
-import { evaluate } from '../evaluator'
+import { directive, prefix } from '../directives.js'
+import { initInterceptors } from '../interceptor.js'
+import { injectDataProviders } from '../datas.js'
+import { addRootSelector } from '../lifecycle.js'
+import { interceptClone, isCloning, isCloningLegacy } from '../clone.js'
+import { addScopeToNode } from '../scope.js'
+import { injectMagics, magic } from '../magics.js'
+import { reactive } from '../reactivity.js'
+import { evaluate } from '../evaluator.js'
 
 addRootSelector(() => `[${prefix('data')}]`)
 
diff --git a/packages/alpinejs/src/directives/x-effect.js b/packages/alpinejs/src/directives/x-effect.js
index 0207edfac..c688d8ce7 100644
--- a/packages/alpinejs/src/directives/x-effect.js
+++ b/packages/alpinejs/src/directives/x-effect.js
@@ -1,6 +1,6 @@
-import { skipDuringClone } from '../clone'
-import { directive } from '../directives'
-import { evaluate, evaluateLater } from '../evaluator'
+import { skipDuringClone } from '../clone.js'
+import { directive } from '../directives.js'
+import { evaluate, evaluateLater } from '../evaluator.js'
 
 directive('effect', skipDuringClone((el, { expression }, { effect }) => {
     effect(evaluateLater(el, expression))
diff --git a/packages/alpinejs/src/directives/x-for.js b/packages/alpinejs/src/directives/x-for.js
index 6c2b0b312..306b08ad3 100644
--- a/packages/alpinejs/src/directives/x-for.js
+++ b/packages/alpinejs/src/directives/x-for.js
@@ -1,11 +1,11 @@
-import { addScopeToNode } from '../scope'
-import { evaluateLater } from '../evaluator'
-import { directive } from '../directives'
-import { reactive } from '../reactivity'
-import { initTree, destroyTree } from '../lifecycle'
-import { mutateDom } from '../mutation'
-import { warn } from '../utils/warn'
-import { skipDuringClone } from '../clone'
+import { addScopeToNode } from '../scope.js'
+import { evaluateLater } from '../evaluator.js'
+import { directive } from '../directives.js'
+import { reactive } from '../reactivity.js'
+import { initTree, destroyTree } from '../lifecycle.js'
+import { mutateDom } from '../mutation.js'
+import { warn } from '../utils/warn.js'
+import { skipDuringClone } from '../clone.js'
 
 directive('for', (el, { expression }, { effect, cleanup }) => {
     let iteratorNames = parseForExpression(expression)
diff --git a/packages/alpinejs/src/directives/x-html.js b/packages/alpinejs/src/directives/x-html.js
index d434ec25b..fd6c3637b 100644
--- a/packages/alpinejs/src/directives/x-html.js
+++ b/packages/alpinejs/src/directives/x-html.js
@@ -1,6 +1,6 @@
-import { directive } from '../directives'
-import { initTree } from '../lifecycle'
-import { mutateDom } from '../mutation'
+import { directive } from '../directives.js'
+import { initTree } from '../lifecycle.js'
+import { mutateDom } from '../mutation.js'
 
 directive('html', (el, { expression }, { effect, evaluateLater }) => {
     let evaluate = evaluateLater(expression)
diff --git a/packages/alpinejs/src/directives/x-id.js b/packages/alpinejs/src/directives/x-id.js
index 673ba70cf..a11e089cf 100644
--- a/packages/alpinejs/src/directives/x-id.js
+++ b/packages/alpinejs/src/directives/x-id.js
@@ -1,6 +1,6 @@
-import { interceptClone } from "../clone"
-import { directive } from "../directives"
-import { setIdRoot } from '../ids'
+import { interceptClone } from "../clone.js"
+import { directive } from "../directives.js"
+import { setIdRoot } from '../ids.js'
 
 directive('id', (el, { expression }, { evaluate }) => {
     let names = evaluate(expression)
diff --git a/packages/alpinejs/src/directives/x-if.js b/packages/alpinejs/src/directives/x-if.js
index cd15e6bce..1996b85d3 100644
--- a/packages/alpinejs/src/directives/x-if.js
+++ b/packages/alpinejs/src/directives/x-if.js
@@ -1,10 +1,10 @@
-import { evaluateLater } from '../evaluator'
-import { addScopeToNode } from '../scope'
-import { directive } from '../directives'
-import { initTree, destroyTree } from '../lifecycle'
-import { mutateDom } from '../mutation'
-import { warn } from "../utils/warn"
-import { skipDuringClone } from '../clone'
+import { evaluateLater } from '../evaluator.js'
+import { addScopeToNode } from '../scope.js'
+import { directive } from '../directives.js'
+import { initTree, destroyTree } from '../lifecycle.js'
+import { mutateDom } from '../mutation.js'
+import { warn } from "../utils/warn.js"
+import { skipDuringClone } from '../clone.js'
 
 directive('if', (el, { expression }, { effect, cleanup }) => {
     if (el.tagName.toLowerCase() !== 'template') warn('x-if can only be used on a <template> tag', el)
diff --git a/packages/alpinejs/src/directives/x-ignore.js b/packages/alpinejs/src/directives/x-ignore.js
index 2f21de393..9c1b70d50 100644
--- a/packages/alpinejs/src/directives/x-ignore.js
+++ b/packages/alpinejs/src/directives/x-ignore.js
@@ -1,4 +1,4 @@
-import { directive } from "../directives"
+import { directive } from "../directives.js"
 
 let handler = () => {}
 
diff --git a/packages/alpinejs/src/directives/x-init.js b/packages/alpinejs/src/directives/x-init.js
index 80c7c5734..30320c577 100644
--- a/packages/alpinejs/src/directives/x-init.js
+++ b/packages/alpinejs/src/directives/x-init.js
@@ -1,6 +1,6 @@
-import { directive, prefix } from "../directives";
-import { addInitSelector } from "../lifecycle";
-import { skipDuringClone } from "../clone";
+import { directive, prefix } from "../directives.js";
+import { addInitSelector } from "../lifecycle.js";
+import { skipDuringClone } from "../clone.js";
 
 addInitSelector(() => `[${prefix('init')}]`)
 
diff --git a/packages/alpinejs/src/directives/x-model.js b/packages/alpinejs/src/directives/x-model.js
index 488004c2a..29417b0d3 100644
--- a/packages/alpinejs/src/directives/x-model.js
+++ b/packages/alpinejs/src/directives/x-model.js
@@ -1,10 +1,10 @@
-import bind, { isCheckbox, isRadio, safeParseBoolean } from '../utils/bind'
-import { evaluateLater } from '../evaluator'
-import { directive } from '../directives'
-import { mutateDom } from '../mutation'
-import { nextTick } from '../nextTick'
-import { isCloning } from '../clone'
-import on from '../utils/on'
+import bind, { isCheckbox, isRadio, safeParseBoolean } from '../utils/bind.js'
+import { evaluateLater } from '../evaluator.js'
+import { directive } from '../directives.js'
+import { mutateDom } from '../mutation.js'
+import { nextTick } from '../nextTick.js'
+import { isCloning } from '../clone.js'
+import on from '../utils/on.js'
 
 directive('model', (el, { modifiers, expression }, { effect, cleanup }) => {
     let scopeTarget = el
diff --git a/packages/alpinejs/src/directives/x-modelable.js b/packages/alpinejs/src/directives/x-modelable.js
index f6e46c88e..9609176fe 100644
--- a/packages/alpinejs/src/directives/x-modelable.js
+++ b/packages/alpinejs/src/directives/x-modelable.js
@@ -1,5 +1,5 @@
-import { directive } from '../directives'
-import { entangle } from '../entangle';
+import { directive } from '../directives.js'
+import { entangle } from '../entangle.js';
 
 directive('modelable', (el, { expression }, { effect, evaluateLater, cleanup }) => {
     let func = evaluateLater(expression)
diff --git a/packages/alpinejs/src/directives/x-on.js b/packages/alpinejs/src/directives/x-on.js
index 210e2f17b..a3f6bed1b 100644
--- a/packages/alpinejs/src/directives/x-on.js
+++ b/packages/alpinejs/src/directives/x-on.js
@@ -1,7 +1,7 @@
-import { directive, into, mapAttributes, prefix, startingWith } from '../directives'
-import { evaluateLater } from '../evaluator'
-import { skipDuringClone } from '../clone'
-import on from '../utils/on'
+import { directive, into, mapAttributes, prefix, startingWith } from '../directives.js'
+import { evaluateLater } from '../evaluator.js'
+import { skipDuringClone } from '../clone.js'
+import on from '../utils/on.js'
 
 mapAttributes(startingWith('@', into(prefix('on:'))))
 
diff --git a/packages/alpinejs/src/directives/x-ref.js b/packages/alpinejs/src/directives/x-ref.js
index 9d6bbf61d..6b5540b09 100644
--- a/packages/alpinejs/src/directives/x-ref.js
+++ b/packages/alpinejs/src/directives/x-ref.js
@@ -1,5 +1,5 @@
-import { closestRoot } from '../lifecycle'
-import { directive } from '../directives'
+import { closestRoot } from '../lifecycle.js'
+import { directive } from '../directives.js'
 
 function handler () {}
 
diff --git a/packages/alpinejs/src/directives/x-show.js b/packages/alpinejs/src/directives/x-show.js
index 6d764e206..96f232acf 100644
--- a/packages/alpinejs/src/directives/x-show.js
+++ b/packages/alpinejs/src/directives/x-show.js
@@ -1,7 +1,7 @@
-import { evaluateLater } from '../evaluator'
-import { directive } from '../directives'
-import { mutateDom } from '../mutation'
-import { once } from '../utils/once'
+import { evaluateLater } from '../evaluator.js'
+import { directive } from '../directives.js'
+import { mutateDom } from '../mutation.js'
+import { once } from '../utils/once.js'
 
 directive('show', (el, { modifiers, expression }, { effect }) => {
     let evaluate = evaluateLater(el, expression)
diff --git a/packages/alpinejs/src/directives/x-teleport.js b/packages/alpinejs/src/directives/x-teleport.js
index 48dd16940..82a1fb224 100644
--- a/packages/alpinejs/src/directives/x-teleport.js
+++ b/packages/alpinejs/src/directives/x-teleport.js
@@ -1,9 +1,9 @@
-import { skipDuringClone } from "../clone"
-import { directive } from "../directives"
-import { initTree, destroyTree } from "../lifecycle"
-import { mutateDom } from "../mutation"
-import { addScopeToNode } from "../scope"
-import { warn } from "../utils/warn"
+import { skipDuringClone } from "../clone.js"
+import { directive } from "../directives.js"
+import { initTree, destroyTree } from "../lifecycle.js"
+import { mutateDom } from "../mutation.js"
+import { addScopeToNode } from "../scope.js"
+import { warn } from "../utils/warn.js"
 
 directive('teleport', (el, { modifiers, expression }, { cleanup }) => {
     if (el.tagName.toLowerCase() !== 'template') warn('x-teleport can only be used on a <template> tag', el)
diff --git a/packages/alpinejs/src/directives/x-text.js b/packages/alpinejs/src/directives/x-text.js
index 74be1093c..99ab2798c 100644
--- a/packages/alpinejs/src/directives/x-text.js
+++ b/packages/alpinejs/src/directives/x-text.js
@@ -1,5 +1,5 @@
-import { directive } from '../directives'
-import { mutateDom } from '../mutation'
+import { directive } from '../directives.js'
+import { mutateDom } from '../mutation.js'
 
 directive('text', (el, { expression }, { effect, evaluateLater }) => {
     let evaluate = evaluateLater(expression)
diff --git a/packages/alpinejs/src/directives/x-transition.js b/packages/alpinejs/src/directives/x-transition.js
index a496f09ee..92dfcd6c6 100644
--- a/packages/alpinejs/src/directives/x-transition.js
+++ b/packages/alpinejs/src/directives/x-transition.js
@@ -1,9 +1,9 @@
-import { releaseNextTicks, holdNextTicks } from '../nextTick'
-import { setClasses } from '../utils/classes'
-import { setStyles } from '../utils/styles'
-import { directive } from '../directives'
-import { mutateDom } from '../mutation'
-import { once } from '../utils/once'
+import { releaseNextTicks, holdNextTicks } from '../nextTick.js'
+import { setClasses } from '../utils/classes.js'
+import { setStyles } from '../utils/styles.js'
+import { directive } from '../directives.js'
+import { mutateDom } from '../mutation.js'
+import { once } from '../utils/once.js'
 
 directive('transition', (el, { value, modifiers, expression }, { evaluate }) => {
     if (typeof expression === 'function') expression = evaluate(expression)
diff --git a/packages/alpinejs/src/entangle.js b/packages/alpinejs/src/entangle.js
index 6b5ed7bf1..61acc49e0 100644
--- a/packages/alpinejs/src/entangle.js
+++ b/packages/alpinejs/src/entangle.js
@@ -1,4 +1,4 @@
-import { effect, release } from './reactivity'
+import { effect, release } from './reactivity.js'
 
 export function entangle({ get: outerGet, set: outerSet }, { get: innerGet, set: innerSet }) {
     let firstRun = true
diff --git a/packages/alpinejs/src/evaluator.js b/packages/alpinejs/src/evaluator.js
index 6c662dad7..869f6712f 100644
--- a/packages/alpinejs/src/evaluator.js
+++ b/packages/alpinejs/src/evaluator.js
@@ -1,6 +1,6 @@
-import { closestDataStack, mergeProxies } from './scope'
-import { injectMagics } from './magics'
-import { tryCatch, handleError } from './utils/error'
+import { closestDataStack, mergeProxies } from './scope.js'
+import { injectMagics } from './magics.js'
+import { tryCatch, handleError } from './utils/error.js'
 
 let shouldAutoEvaluateFunctions = true
 
diff --git a/packages/alpinejs/src/ids.js b/packages/alpinejs/src/ids.js
index f2cbd7b09..81b031184 100644
--- a/packages/alpinejs/src/ids.js
+++ b/packages/alpinejs/src/ids.js
@@ -1,4 +1,4 @@
-import { findClosest } from './lifecycle'
+import { findClosest } from './lifecycle.js'
 
 let globalIdMemo = {}
 
diff --git a/packages/alpinejs/src/index.js b/packages/alpinejs/src/index.js
index b0ea55085..9590871e6 100644
--- a/packages/alpinejs/src/index.js
+++ b/packages/alpinejs/src/index.js
@@ -12,7 +12,7 @@
  * For starters, we'll import Alpine's core. This is the
  * object that will expose all of Alpine's public API.
  */
-import Alpine from './alpine'
+import Alpine from './alpine.js'
 
 /**
  * _______________________________________________________
@@ -23,7 +23,7 @@ import Alpine from './alpine'
  * It's the function that converts raw JavaScript string
  * expressions like @click="toggle()", into actual JS.
  */
-import { normalEvaluator } from './evaluator'
+import { normalEvaluator } from './evaluator.js'
 
 Alpine.setEvaluator(normalEvaluator)
 
@@ -49,7 +49,7 @@ Alpine.setReactivityEngine({ reactive, effect, release: stop, raw: toRaw })
  * These are the properties that are magically available
  * to all the Alpine expressions, within your web app.
  */
-import './magics/index'
+import './magics/index.js'
 
 /**
  * _______________________________________________________
@@ -60,7 +60,7 @@ import './magics/index'
  * directives like x-text or x-on that form the basis of
  * how Alpine adds behavior to an app's static markup.
  */
-import './directives/index'
+import './directives/index.js'
 
 /**
  * _______________________________________________________
diff --git a/packages/alpinejs/src/lifecycle.js b/packages/alpinejs/src/lifecycle.js
index 66b792468..9b3a2146c 100644
--- a/packages/alpinejs/src/lifecycle.js
+++ b/packages/alpinejs/src/lifecycle.js
@@ -1,8 +1,8 @@
-import { startObservingMutations, onAttributesAdded, onElAdded, onElRemoved, cleanupAttributes, cleanupElement } from "./mutation"
-import { deferHandlingDirectives, directiveExists, directives } from "./directives"
-import { dispatch } from './utils/dispatch'
-import { walk } from "./utils/walk"
-import { warn } from './utils/warn'
+import { startObservingMutations, onAttributesAdded, onElAdded, onElRemoved, cleanupAttributes, cleanupElement } from "./mutation.js"
+import { deferHandlingDirectives, directiveExists, directives } from "./directives.js"
+import { dispatch } from './utils/dispatch.js'
+import { walk } from "./utils/walk.js"
+import { warn } from './utils/warn.js'
 
 let started = false
 
diff --git a/packages/alpinejs/src/magics.js b/packages/alpinejs/src/magics.js
index 21dd746e6..62da57303 100644
--- a/packages/alpinejs/src/magics.js
+++ b/packages/alpinejs/src/magics.js
@@ -1,6 +1,6 @@
-import { getElementBoundUtilities } from './directives'
-import { interceptor } from './interceptor'
-import { onElRemoved } from './mutation'
+import { getElementBoundUtilities } from './directives.js'
+import { interceptor } from './interceptor.js'
+import { onElRemoved } from './mutation.js'
 
 let magics = {}
 
diff --git a/packages/alpinejs/src/magics/$data.js b/packages/alpinejs/src/magics/$data.js
index b9b0965b6..2600becc2 100644
--- a/packages/alpinejs/src/magics/$data.js
+++ b/packages/alpinejs/src/magics/$data.js
@@ -1,4 +1,4 @@
-import { scope } from '../scope'
-import { magic } from '../magics'
+import { scope } from '../scope.js'
+import { magic } from '../magics.js'
 
 magic('data', el => scope(el))
diff --git a/packages/alpinejs/src/magics/$dispatch.js b/packages/alpinejs/src/magics/$dispatch.js
index 6eb878db8..b3fbadf4f 100644
--- a/packages/alpinejs/src/magics/$dispatch.js
+++ b/packages/alpinejs/src/magics/$dispatch.js
@@ -1,4 +1,4 @@
-import { dispatch } from '../utils/dispatch'
-import { magic } from '../magics'
+import { dispatch } from '../utils/dispatch.js'
+import { magic } from '../magics.js'
 
 magic('dispatch', el => dispatch.bind(dispatch, el))
diff --git a/packages/alpinejs/src/magics/$el.js b/packages/alpinejs/src/magics/$el.js
index 10b9f4939..6bb6aff15 100644
--- a/packages/alpinejs/src/magics/$el.js
+++ b/packages/alpinejs/src/magics/$el.js
@@ -1,3 +1,3 @@
-import { magic } from "../magics";
+import { magic } from "../magics.js";
 
 magic('el', el => el)
diff --git a/packages/alpinejs/src/magics/$id.js b/packages/alpinejs/src/magics/$id.js
index 28a887df7..bc81da1c1 100644
--- a/packages/alpinejs/src/magics/$id.js
+++ b/packages/alpinejs/src/magics/$id.js
@@ -1,6 +1,6 @@
-import { magic } from '../magics'
-import { closestIdRoot, findAndIncrementId } from '../ids'
-import { interceptClone } from '../clone'
+import { magic } from '../magics.js'
+import { closestIdRoot, findAndIncrementId } from '../ids.js'
+import { interceptClone } from '../clone.js'
 
 magic('id', (el, { cleanup }) => (name, key = null) => {
     let cacheKey = `${name}${key ? `-${key}` : ''}`
diff --git a/packages/alpinejs/src/magics/$nextTick.js b/packages/alpinejs/src/magics/$nextTick.js
index 8318cc62d..74bb5e04f 100644
--- a/packages/alpinejs/src/magics/$nextTick.js
+++ b/packages/alpinejs/src/magics/$nextTick.js
@@ -1,4 +1,4 @@
-import { nextTick } from '../nextTick'
-import { magic } from '../magics'
+import { nextTick } from '../nextTick.js'
+import { magic } from '../magics.js'
 
 magic('nextTick', () => nextTick)
diff --git a/packages/alpinejs/src/magics/$refs.js b/packages/alpinejs/src/magics/$refs.js
index 49e98ea8e..1a8903106 100644
--- a/packages/alpinejs/src/magics/$refs.js
+++ b/packages/alpinejs/src/magics/$refs.js
@@ -1,6 +1,6 @@
-import { closestRoot, findClosest } from '../lifecycle'
-import { mergeProxies } from '../scope'
-import { magic } from '../magics'
+import { closestRoot, findClosest } from '../lifecycle.js'
+import { mergeProxies } from '../scope.js'
+import { magic } from '../magics.js'
 
 magic('refs', el => {
     if (el._x_refs_proxy) return el._x_refs_proxy
diff --git a/packages/alpinejs/src/magics/$root.js b/packages/alpinejs/src/magics/$root.js
index 140eece6a..edaee3bb9 100644
--- a/packages/alpinejs/src/magics/$root.js
+++ b/packages/alpinejs/src/magics/$root.js
@@ -1,4 +1,4 @@
-import { closestRoot } from "../lifecycle";
-import { magic } from "../magics";
+import { closestRoot } from "../lifecycle.js";
+import { magic } from "../magics.js";
 
 magic('root', el => closestRoot(el))
diff --git a/packages/alpinejs/src/magics/$store.js b/packages/alpinejs/src/magics/$store.js
index a14d40d97..1e641a249 100644
--- a/packages/alpinejs/src/magics/$store.js
+++ b/packages/alpinejs/src/magics/$store.js
@@ -1,4 +1,4 @@
-import { getStores } from '../store'
-import { magic } from '../magics'
+import { getStores } from '../store.js'
+import { magic } from '../magics.js'
 
 magic('store', getStores)
diff --git a/packages/alpinejs/src/magics/$watch.js b/packages/alpinejs/src/magics/$watch.js
index 7539c8792..709dbb4f2 100644
--- a/packages/alpinejs/src/magics/$watch.js
+++ b/packages/alpinejs/src/magics/$watch.js
@@ -1,5 +1,5 @@
-import { magic } from '../magics'
-import { watch } from '../reactivity'
+import { magic } from '../magics.js'
+import { watch } from '../reactivity.js'
 
 magic('watch', (el, { evaluateLater, cleanup }) => (key, callback) => {
     let evaluate = evaluateLater(key)
diff --git a/packages/alpinejs/src/magics/index.js b/packages/alpinejs/src/magics/index.js
index 2920c5f65..aa2507517 100644
--- a/packages/alpinejs/src/magics/index.js
+++ b/packages/alpinejs/src/magics/index.js
@@ -1,15 +1,15 @@
-import { warn } from '../utils/warn'
-import { magic } from '../magics'
+import { warn } from '../utils/warn.js'
+import { magic } from '../magics.js'
 
-import './$nextTick'
-import './$dispatch'
-import './$watch'
-import './$store'
-import './$data'
-import './$root'
-import './$refs'
-import './$id'
-import './$el'
+import './$nextTick.js'
+import './$dispatch.js'
+import './$watch.js'
+import './$store.js'
+import './$data.js'
+import './$root.js'
+import './$refs.js'
+import './$id.js'
+import './$el.js'
 
 // Register warnings for people using plugin syntaxes and not loading the plugin itself:
 warnMissingPluginMagic('Focus', 'focus', 'focus')
diff --git a/packages/alpinejs/src/mutation.js b/packages/alpinejs/src/mutation.js
index d612153d3..6ad94635c 100644
--- a/packages/alpinejs/src/mutation.js
+++ b/packages/alpinejs/src/mutation.js
@@ -1,4 +1,4 @@
-import { dequeueJob } from "./scheduler";
+import { dequeueJob } from "./scheduler.js";
 let onAttributeAddeds = []
 let onElRemoveds = []
 let onElAddeds = []
diff --git a/packages/alpinejs/src/plugin.js b/packages/alpinejs/src/plugin.js
index c939b611b..2ff0ac478 100644
--- a/packages/alpinejs/src/plugin.js
+++ b/packages/alpinejs/src/plugin.js
@@ -1,4 +1,4 @@
-import Alpine from "./alpine";
+import Alpine from "./alpine.js";
 
 export function plugin(callback) {
     let callbacks = Array.isArray(callback) ? callback : [callback]
diff --git a/packages/alpinejs/src/reactivity.js b/packages/alpinejs/src/reactivity.js
index c24cf2a55..e2be05169 100644
--- a/packages/alpinejs/src/reactivity.js
+++ b/packages/alpinejs/src/reactivity.js
@@ -1,5 +1,5 @@
 
-import { scheduler } from './scheduler'
+import { scheduler } from './scheduler.js'
 
 let reactive, effect, release, raw
 
diff --git a/packages/alpinejs/src/store.js b/packages/alpinejs/src/store.js
index 60a44dcf5..db3081bcf 100644
--- a/packages/alpinejs/src/store.js
+++ b/packages/alpinejs/src/store.js
@@ -1,5 +1,5 @@
-import { initInterceptors } from "./interceptor";
-import { reactive } from "./reactivity"
+import { initInterceptors } from "./interceptor.js";
+import { reactive } from "./reactivity.js"
 
 let stores = {}
 let isReactive = false
diff --git a/packages/alpinejs/src/utils/bind.js b/packages/alpinejs/src/utils/bind.js
index 75a1898f6..d7b389773 100644
--- a/packages/alpinejs/src/utils/bind.js
+++ b/packages/alpinejs/src/utils/bind.js
@@ -1,7 +1,7 @@
-import { dontAutoEvaluateFunctions, evaluate } from '../evaluator'
-import { reactive } from '../reactivity'
-import { setClasses } from './classes'
-import { setStyles } from './styles'
+import { dontAutoEvaluateFunctions, evaluate } from '../evaluator.js'
+import { reactive } from '../reactivity.js'
+import { setClasses } from './classes.js'
+import { setStyles } from './styles.js'
 
 export default function bind(el, name, value, modifiers = []) {
     // Register bound data as pure observable data for other APIs to use.
diff --git a/packages/alpinejs/src/utils/on.js b/packages/alpinejs/src/utils/on.js
index d877d87c9..10e59c640 100644
--- a/packages/alpinejs/src/utils/on.js
+++ b/packages/alpinejs/src/utils/on.js
@@ -1,5 +1,5 @@
-import { debounce } from './debounce'
-import { throttle } from './throttle'
+import { debounce } from './debounce.js'
+import { throttle } from './throttle.js'
 
 export default function on (el, event, modifiers, callback) {
     let listenerTarget = el
diff --git a/packages/csp/builds/cdn.js b/packages/csp/builds/cdn.js
index a54e7e050..3ee074462 100644
--- a/packages/csp/builds/cdn.js
+++ b/packages/csp/builds/cdn.js
@@ -1,4 +1,4 @@
-import Alpine from './../src/index'
+import Alpine from '../src/index.js'
 
 window.Alpine = Alpine
 
diff --git a/packages/csp/builds/module.js b/packages/csp/builds/module.js
index 1d9d6a76d..925f7dbed 100644
--- a/packages/csp/builds/module.js
+++ b/packages/csp/builds/module.js
@@ -1,4 +1,4 @@
-import Alpine from './../src/index'
+import Alpine from '../src/index.js'
 
 export default Alpine
 
diff --git a/packages/csp/src/index.js b/packages/csp/src/index.js
index 5638985c5..4c12af62c 100644
--- a/packages/csp/src/index.js
+++ b/packages/csp/src/index.js
@@ -17,7 +17,7 @@ import Alpine from 'alpinejs/src/alpine'
  * interpret strings as runtime JS. We're going to use
  * a more CSP-friendly evaluator for this instead.
  */
-import { cspEvaluator } from './evaluator'
+import { cspEvaluator } from './evaluator.js'
 
 Alpine.setEvaluator(cspEvaluator)
 
diff --git a/packages/morph/src/index.js b/packages/morph/src/index.js
index 93c46b206..f4937d9b2 100644
--- a/packages/morph/src/index.js
+++ b/packages/morph/src/index.js
@@ -1,4 +1,4 @@
-import { morph } from './morph'
+import { morph } from './morph.js'
 
 export default function (Alpine) {
     Alpine.morph = morph
diff --git a/packages/ui/src/combobox.js b/packages/ui/src/combobox.js
index d2e6c116f..24ee3e343 100644
--- a/packages/ui/src/combobox.js
+++ b/packages/ui/src/combobox.js
@@ -1,4 +1,4 @@
-import { generateContext, renderHiddenInputs } from './list-context'
+import { generateContext, renderHiddenInputs } from './list-context.js'
 
 export default function (Alpine) {
     Alpine.directive('combobox', (el, directive, { evaluate }) => {
diff --git a/packages/ui/src/index.js b/packages/ui/src/index.js
index c834946af..f32eb7f77 100644
--- a/packages/ui/src/index.js
+++ b/packages/ui/src/index.js
@@ -1,12 +1,12 @@
-import combobox from './combobox'
-import dialog from './dialog'
-import disclosure from './disclosure'
-import listbox from './listbox'
-import popover from './popover'
-import menu from './menu'
-import notSwitch from './switch'
-import radio from './radio'
-import tabs from './tabs'
+import combobox from './combobox.js'
+import dialog from './dialog.js'
+import disclosure from './disclosure.js'
+import listbox from './listbox.js'
+import popover from './popover.js'
+import menu from './menu.js'
+import notSwitch from './switch.js'
+import radio from './radio.js'
+import tabs from './tabs.js'
 
 export default function (Alpine) {
     combobox(Alpine)
diff --git a/packages/ui/src/listbox.js b/packages/ui/src/listbox.js
index 3fc52fcce..a753ae531 100644
--- a/packages/ui/src/listbox.js
+++ b/packages/ui/src/listbox.js
@@ -1,4 +1,4 @@
-import { generateContext, renderHiddenInputs } from './list-context'
+import { generateContext, renderHiddenInputs } from './list-context.js'
 
 export default function (Alpine) {
     Alpine.directive('listbox', (el, directive) => {
diff --git a/scripts/build.js b/scripts/build.js
index c7421ab44..d9c9e75b2 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -1,4 +1,4 @@
-let { writeToPackageDotJson, getFromPackageDotJson } = require('./utils');
+let { writeToPackageDotJson, getFromPackageDotJson } = require('./utils.js');
 let fs = require('fs');
 let zlib = require('zlib');
 
diff --git a/scripts/release.js b/scripts/release.js
index 3cb746913..b42aabe19 100644
--- a/scripts/release.js
+++ b/scripts/release.js
@@ -1,4 +1,4 @@
-let { runFromPackage, writeToPackageDotJson, ask, run, getFromPackageDotJson } = require('./utils')
+let { runFromPackage, writeToPackageDotJson, ask, run, getFromPackageDotJson } = require('./utils.js')
 let chalk = require('chalk');
 let log = message => console.log(chalk.green(message))
 let version = process.argv[2]
@@ -82,7 +82,7 @@ function writeNewDocsVersion() {
 
 function buildAssets() {
     console.log('Building assets...')
-    require('./build')
+    require('./build.js')
 }
 
 function publish() {
diff --git a/scripts/update-docs.js b/scripts/update-docs.js
index a772b699e..fb4e366be 100644
--- a/scripts/update-docs.js
+++ b/scripts/update-docs.js
@@ -1,4 +1,4 @@
-let { runFromPackage, getFromPackageDotJson, writeToPackageDotJson, ask } = require('./utils')
+let { runFromPackage, getFromPackageDotJson, writeToPackageDotJson, ask } = require('./utils.js')
 
 let version = getFromPackageDotJson('docs', 'version')
 
diff --git a/tests/cypress/integration/clone.spec.js b/tests/cypress/integration/clone.spec.js
index 9d4f0d652..04e58abaf 100644
--- a/tests/cypress/integration/clone.spec.js
+++ b/tests/cypress/integration/clone.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../utils'
+import { haveText, html, test } from '../utils.js'
 
 test('can clone a component',
     html`
diff --git a/tests/cypress/integration/custom-bind.spec.js b/tests/cypress/integration/custom-bind.spec.js
index 08a82e8d6..2ee045402 100644
--- a/tests/cypress/integration/custom-bind.spec.js
+++ b/tests/cypress/integration/custom-bind.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../utils'
+import { haveText, html, test } from '../utils.js'
 
 test('can register custom bind object',
     html`
diff --git a/tests/cypress/integration/custom-data.spec.js b/tests/cypress/integration/custom-data.spec.js
index 53ae04da2..b1c32e602 100644
--- a/tests/cypress/integration/custom-data.spec.js
+++ b/tests/cypress/integration/custom-data.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../utils'
+import { haveText, html, test } from '../utils.js'
 
 test('can register custom data providers',
     html`
diff --git a/tests/cypress/integration/custom-directives.spec.js b/tests/cypress/integration/custom-directives.spec.js
index c4267a1d6..554bc03a9 100644
--- a/tests/cypress/integration/custom-directives.spec.js
+++ b/tests/cypress/integration/custom-directives.spec.js
@@ -1,4 +1,4 @@
-import { haveText, haveAttribute, html, test } from '../utils'
+import { haveText, haveAttribute, html, test } from '../utils.js'
 
 test('can register custom directive',
     [html`
diff --git a/tests/cypress/integration/custom-interceptors.spec.js b/tests/cypress/integration/custom-interceptors.spec.js
index a66c7c9b8..eab6144fc 100644
--- a/tests/cypress/integration/custom-interceptors.spec.js
+++ b/tests/cypress/integration/custom-interceptors.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../utils'
+import { haveText, html, test } from '../utils.js'
 
 test('can register custom interceptors',
     [html`
diff --git a/tests/cypress/integration/custom-magics.spec.js b/tests/cypress/integration/custom-magics.spec.js
index 5f463e43c..653ee93df 100644
--- a/tests/cypress/integration/custom-magics.spec.js
+++ b/tests/cypress/integration/custom-magics.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../utils'
+import { haveText, html, test } from '../utils.js'
 
 test('can register custom magic properties',
     html`
diff --git a/tests/cypress/integration/custom-prefix.spec.js b/tests/cypress/integration/custom-prefix.spec.js
index f310c4f62..e0c5c5e32 100644
--- a/tests/cypress/integration/custom-prefix.spec.js
+++ b/tests/cypress/integration/custom-prefix.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../utils'
+import { haveText, html, test } from '../utils.js'
 
 test('can set a custom x- prefix',
     html`
diff --git a/tests/cypress/integration/directives/x-bind-class.spec.js b/tests/cypress/integration/directives/x-bind-class.spec.js
index 486a60b1a..cda9f5d1f 100644
--- a/tests/cypress/integration/directives/x-bind-class.spec.js
+++ b/tests/cypress/integration/directives/x-bind-class.spec.js
@@ -1,4 +1,4 @@
-import { beHidden, beVisible, haveText, beChecked, haveAttribute, haveClasses, haveValue, notBeChecked, notHaveAttribute, notHaveClasses, test, html } from '../../utils'
+import { beHidden, beVisible, haveText, beChecked, haveAttribute, haveClasses, haveValue, notBeChecked, notHaveAttribute, notHaveClasses, test, html } from '../../utils.js'
 
 test('class attribute bindings are merged by string syntax',
     html`
diff --git a/tests/cypress/integration/directives/x-bind-style.spec.js b/tests/cypress/integration/directives/x-bind-style.spec.js
index 56d0b9fd5..783418d92 100644
--- a/tests/cypress/integration/directives/x-bind-style.spec.js
+++ b/tests/cypress/integration/directives/x-bind-style.spec.js
@@ -1,4 +1,4 @@
-import { beHidden, beVisible, haveText, beChecked, haveAttribute, haveClasses, haveValue, notBeChecked, notHaveAttribute, notHaveClasses, test, html } from '../../utils'
+import { beHidden, beVisible, haveText, beChecked, haveAttribute, haveClasses, haveValue, notBeChecked, notHaveAttribute, notHaveClasses, test, html } from '../../utils.js'
 
 test('style attribute object binding',
     html`
diff --git a/tests/cypress/integration/directives/x-bind.spec.js b/tests/cypress/integration/directives/x-bind.spec.js
index ccbd61aa1..7675ebfcc 100644
--- a/tests/cypress/integration/directives/x-bind.spec.js
+++ b/tests/cypress/integration/directives/x-bind.spec.js
@@ -1,4 +1,4 @@
-import { beHidden, beVisible, haveText, beChecked, haveAttribute, haveClasses, haveProperty, haveValue, notBeChecked, notHaveAttribute, notHaveClasses, test, html } from '../../utils';
+import { beHidden, beVisible, haveText, beChecked, haveAttribute, haveClasses, haveProperty, haveValue, notBeChecked, notHaveAttribute, notHaveClasses, test, html } from '../../utils.js';
 
 test('sets attribute bindings on initialize',
     html`
diff --git a/tests/cypress/integration/directives/x-cloak.spec.js b/tests/cypress/integration/directives/x-cloak.spec.js
index f51383ca9..3f35cc478 100644
--- a/tests/cypress/integration/directives/x-cloak.spec.js
+++ b/tests/cypress/integration/directives/x-cloak.spec.js
@@ -1,4 +1,4 @@
-import { html, notHaveAttribute, test } from '../../utils'
+import { html, notHaveAttribute, test } from '../../utils.js'
 
 test('x-cloak is removed',
     html`
diff --git a/tests/cypress/integration/directives/x-data.spec.js b/tests/cypress/integration/directives/x-data.spec.js
index 13e1bedad..e1d1214eb 100644
--- a/tests/cypress/integration/directives/x-data.spec.js
+++ b/tests/cypress/integration/directives/x-data.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../../utils'
+import { haveText, html, test } from '../../utils.js'
 
 test('x-data attribute value is optional',
     html`
diff --git a/tests/cypress/integration/directives/x-for.spec.js b/tests/cypress/integration/directives/x-for.spec.js
index deb60e17e..c69843647 100644
--- a/tests/cypress/integration/directives/x-for.spec.js
+++ b/tests/cypress/integration/directives/x-for.spec.js
@@ -1,4 +1,4 @@
-import { exist, haveLength, haveText, html, notExist, test } from '../../utils'
+import { exist, haveLength, haveText, html, notExist, test } from '../../utils.js'
 
 test('renders loops with x-for',
     html`
diff --git a/tests/cypress/integration/directives/x-html.spec.js b/tests/cypress/integration/directives/x-html.spec.js
index 5ea4d4aeb..96e75b7a0 100644
--- a/tests/cypress/integration/directives/x-html.spec.js
+++ b/tests/cypress/integration/directives/x-html.spec.js
@@ -1,4 +1,4 @@
-import { haveText, notHaveText, html, test } from '../../utils'
+import { haveText, notHaveText, html, test } from '../../utils.js'
 
 test('sets html on init',
     html`
diff --git a/tests/cypress/integration/directives/x-if.spec.js b/tests/cypress/integration/directives/x-if.spec.js
index 607d708cd..04eb1827e 100644
--- a/tests/cypress/integration/directives/x-if.spec.js
+++ b/tests/cypress/integration/directives/x-if.spec.js
@@ -1,4 +1,4 @@
-import { exist, haveText, html, notExist, test } from '../../utils'
+import { exist, haveText, html, notExist, test } from '../../utils.js'
 
 test('x-if',
     html`
diff --git a/tests/cypress/integration/directives/x-ignore.spec.js b/tests/cypress/integration/directives/x-ignore.spec.js
index 34c002302..9627e310e 100644
--- a/tests/cypress/integration/directives/x-ignore.spec.js
+++ b/tests/cypress/integration/directives/x-ignore.spec.js
@@ -1,4 +1,4 @@
-import { haveClasses, haveText, html, notHaveClasses, notHaveText, test } from '../../utils'
+import { haveClasses, haveText, html, notHaveClasses, notHaveText, test } from '../../utils.js'
 
 test('x-ignore',
     html`
diff --git a/tests/cypress/integration/directives/x-init.spec.js b/tests/cypress/integration/directives/x-init.spec.js
index 4db184b29..3640a6751 100644
--- a/tests/cypress/integration/directives/x-init.spec.js
+++ b/tests/cypress/integration/directives/x-init.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../../utils'
+import { haveText, html, test } from '../../utils.js'
 
 test('sets text on init',
     html`
diff --git a/tests/cypress/integration/directives/x-model.spec.js b/tests/cypress/integration/directives/x-model.spec.js
index 7bd6e9f57..11bdbcbee 100644
--- a/tests/cypress/integration/directives/x-model.spec.js
+++ b/tests/cypress/integration/directives/x-model.spec.js
@@ -1,4 +1,4 @@
-import { beChecked, haveData, haveText, haveValue, html, notBeChecked, test } from '../../utils'
+import { beChecked, haveData, haveText, haveValue, html, notBeChecked, test } from '../../utils.js'
 
 test('The name of the test',
     html`<h1 x-data x-text="'HEY'"></h1>`,
diff --git a/tests/cypress/integration/directives/x-modelable.spec.js b/tests/cypress/integration/directives/x-modelable.spec.js
index 690e42264..099c78eb9 100644
--- a/tests/cypress/integration/directives/x-modelable.spec.js
+++ b/tests/cypress/integration/directives/x-modelable.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../../utils'
+import { haveText, html, test } from '../../utils.js'
 
 test('can expose data for x-model binding',
     html`
diff --git a/tests/cypress/integration/directives/x-on.spec.js b/tests/cypress/integration/directives/x-on.spec.js
index 47d598ec1..0f270bd46 100644
--- a/tests/cypress/integration/directives/x-on.spec.js
+++ b/tests/cypress/integration/directives/x-on.spec.js
@@ -1,4 +1,4 @@
-import { beChecked, contain, notBeChecked, haveAttribute, haveData, haveText, test, beVisible, notBeVisible, html } from '../../utils'
+import { beChecked, contain, notBeChecked, haveAttribute, haveData, haveText, test, beVisible, notBeVisible, html } from '../../utils.js'
 
 test('data modified in event listener updates affected attribute bindings',
     html`
diff --git a/tests/cypress/integration/directives/x-show.spec.js b/tests/cypress/integration/directives/x-show.spec.js
index 46c646067..4aee2f589 100644
--- a/tests/cypress/integration/directives/x-show.spec.js
+++ b/tests/cypress/integration/directives/x-show.spec.js
@@ -1,4 +1,4 @@
-import { beHidden, beVisible, haveAttribute, html, test } from '../../utils'
+import { beHidden, beVisible, haveAttribute, html, test } from '../../utils.js'
 
 test('x-show toggles display: none; with no other style attributes',
     html`
diff --git a/tests/cypress/integration/directives/x-teleport.spec.js b/tests/cypress/integration/directives/x-teleport.spec.js
index c4a714ab2..0f4e63aba 100644
--- a/tests/cypress/integration/directives/x-teleport.spec.js
+++ b/tests/cypress/integration/directives/x-teleport.spec.js
@@ -1,4 +1,4 @@
-import { exist, haveText, html, notExist, test } from '../../utils'
+import { exist, haveText, html, notExist, test } from '../../utils.js'
 
 test('can use a x-teleport',
     [html`
diff --git a/tests/cypress/integration/directives/x-text.spec.js b/tests/cypress/integration/directives/x-text.spec.js
index 723c825e1..74504bb11 100644
--- a/tests/cypress/integration/directives/x-text.spec.js
+++ b/tests/cypress/integration/directives/x-text.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, notHaveText, test } from '../../utils'
+import { haveText, html, notHaveText, test } from '../../utils.js'
 
 test('sets text on init',
     html`
diff --git a/tests/cypress/integration/directives/x-transition.spec.js b/tests/cypress/integration/directives/x-transition.spec.js
index 717d4ea7e..7cf9f3dfe 100644
--- a/tests/cypress/integration/directives/x-transition.spec.js
+++ b/tests/cypress/integration/directives/x-transition.spec.js
@@ -1,4 +1,4 @@
-import { beHidden, beVisible, haveClasses, haveComputedStyle, html, notBeVisible, notHaveClasses, notHaveComputedStyle, test } from '../../utils'
+import { beHidden, beVisible, haveClasses, haveComputedStyle, html, notBeVisible, notHaveClasses, notHaveComputedStyle, test } from '../../utils.js'
 
 test('transition in',
     html`
diff --git a/tests/cypress/integration/entangle.spec.js b/tests/cypress/integration/entangle.spec.js
index 3ffb4bf5f..dbf12a499 100644
--- a/tests/cypress/integration/entangle.spec.js
+++ b/tests/cypress/integration/entangle.spec.js
@@ -1,4 +1,4 @@
-import { haveValue, html, test } from '../utils'
+import { haveValue, html, test } from '../utils.js'
 
 test.skip('can entangle to getter/setter pairs',
     [html`
diff --git a/tests/cypress/integration/error-handling.spec.js b/tests/cypress/integration/error-handling.spec.js
index 9e8360143..35e573221 100644
--- a/tests/cypress/integration/error-handling.spec.js
+++ b/tests/cypress/integration/error-handling.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../utils'
+import { haveText, html, test } from '../utils.js'
 
 export function setupConsoleInterceptor( ...targetIds ) {
     const mappedTargetIds = targetIds.map( tid => `'${tid}'` ).join( ',' )
diff --git a/tests/cypress/integration/magics/$data.spec.js b/tests/cypress/integration/magics/$data.spec.js
index c1b7dfe98..c32f37778 100644
--- a/tests/cypress/integration/magics/$data.spec.js
+++ b/tests/cypress/integration/magics/$data.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../../utils'
+import { haveText, html, test } from '../../utils.js'
 
 test('$data returns the current scope (with cascading)',
     html`
diff --git a/tests/cypress/integration/magics/$dispatch.spec.js b/tests/cypress/integration/magics/$dispatch.spec.js
index b760be0b6..44b223680 100644
--- a/tests/cypress/integration/magics/$dispatch.spec.js
+++ b/tests/cypress/integration/magics/$dispatch.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../../utils'
+import { haveText, html, test } from '../../utils.js'
 
 test('$dispatch dispatches events properly',
     html`
diff --git a/tests/cypress/integration/magics/$el.spec.js b/tests/cypress/integration/magics/$el.spec.js
index 328447b96..862036f90 100644
--- a/tests/cypress/integration/magics/$el.spec.js
+++ b/tests/cypress/integration/magics/$el.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../../utils'
+import { haveText, html, test } from '../../utils.js'
 
 test('$el returns the current element',
     html`
diff --git a/tests/cypress/integration/magics/$id.spec.js b/tests/cypress/integration/magics/$id.spec.js
index 61296fac3..548fd0eee 100644
--- a/tests/cypress/integration/magics/$id.spec.js
+++ b/tests/cypress/integration/magics/$id.spec.js
@@ -1,4 +1,4 @@
-import { haveAttribute, haveText, html, test } from '../../utils'
+import { haveAttribute, haveText, html, test } from '../../utils.js'
 
 test('$id generates a unique id',
     html`
diff --git a/tests/cypress/integration/magics/$nextTick.spec.js b/tests/cypress/integration/magics/$nextTick.spec.js
index 5899680d2..c40415b64 100644
--- a/tests/cypress/integration/magics/$nextTick.spec.js
+++ b/tests/cypress/integration/magics/$nextTick.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../../utils'
+import { haveText, html, test } from '../../utils.js'
 
 test('$nextTick runs code on the next available managed tick',
     html`
diff --git a/tests/cypress/integration/magics/$refs.spec.js b/tests/cypress/integration/magics/$refs.spec.js
index 5a7a53b24..1306d4234 100644
--- a/tests/cypress/integration/magics/$refs.spec.js
+++ b/tests/cypress/integration/magics/$refs.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../../utils'
+import { haveText, html, test } from '../../utils.js'
 
 test('can reference elements from event listeners',
     html`
diff --git a/tests/cypress/integration/magics/$root.spec.js b/tests/cypress/integration/magics/$root.spec.js
index eb3b295de..79e39d23f 100644
--- a/tests/cypress/integration/magics/$root.spec.js
+++ b/tests/cypress/integration/magics/$root.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../../utils'
+import { haveText, html, test } from '../../utils.js'
 
 test('$root returns the root element of the component',
     html`
diff --git a/tests/cypress/integration/magics/$watch.spec.js b/tests/cypress/integration/magics/$watch.spec.js
index cf83b2fb2..d06dc7519 100644
--- a/tests/cypress/integration/magics/$watch.spec.js
+++ b/tests/cypress/integration/magics/$watch.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../../utils'
+import { haveText, html, test } from '../../utils.js'
 
 test('$watch',
     html`
diff --git a/tests/cypress/integration/mutation.spec.js b/tests/cypress/integration/mutation.spec.js
index 9dce237a4..0f9b51ce2 100644
--- a/tests/cypress/integration/mutation.spec.js
+++ b/tests/cypress/integration/mutation.spec.js
@@ -1,4 +1,4 @@
-import { beVisible, haveText, html, test } from '../utils'
+import { beVisible, haveText, html, test } from '../utils.js'
 
 test('element side effects are cleaned up after the elements are removed',
     html`
diff --git a/tests/cypress/integration/plugins/anchor.spec.js b/tests/cypress/integration/plugins/anchor.spec.js
index 52e97eeb5..e96baedbe 100644
--- a/tests/cypress/integration/plugins/anchor.spec.js
+++ b/tests/cypress/integration/plugins/anchor.spec.js
@@ -1,4 +1,4 @@
-import { haveAttribute, haveComputedStyle, html, notHaveAttribute, test } from '../../utils'
+import { haveAttribute, haveComputedStyle, html, notHaveAttribute, test } from '../../utils.js'
 
 test('can anchor an element',
     [html`
diff --git a/tests/cypress/integration/plugins/collapse.spec.js b/tests/cypress/integration/plugins/collapse.spec.js
index 5db26ab87..5f3d90f75 100644
--- a/tests/cypress/integration/plugins/collapse.spec.js
+++ b/tests/cypress/integration/plugins/collapse.spec.js
@@ -1,4 +1,4 @@
-import { haveAttribute, haveComputedStyle, html, notHaveAttribute, test } from '../../utils'
+import { haveAttribute, haveComputedStyle, html, notHaveAttribute, test } from '../../utils.js'
 
 test('can collapse and expand element',
     [html`
diff --git a/tests/cypress/integration/plugins/csp-compatibility.spec.js b/tests/cypress/integration/plugins/csp-compatibility.spec.js
index 94290cda8..ec06d8de2 100644
--- a/tests/cypress/integration/plugins/csp-compatibility.spec.js
+++ b/tests/cypress/integration/plugins/csp-compatibility.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../../utils'
+import { haveText, html, test } from '../../utils.js'
 
 test.csp('Can use components and basic expressions with CSP-compatible build',
     [html`
diff --git a/tests/cypress/integration/plugins/focus.spec.js b/tests/cypress/integration/plugins/focus.spec.js
index 155281cb7..80eccd97c 100644
--- a/tests/cypress/integration/plugins/focus.spec.js
+++ b/tests/cypress/integration/plugins/focus.spec.js
@@ -1,4 +1,4 @@
-import { haveText, test, html, haveFocus, notHaveAttribute, haveAttribute, notHaveFocus, notHaveText } from '../../utils'
+import { haveText, test, html, haveFocus, notHaveAttribute, haveAttribute, notHaveFocus, notHaveText } from '../../utils.js'
 
 test('can trap focus',
     [html`
diff --git a/tests/cypress/integration/plugins/history.spec.js b/tests/cypress/integration/plugins/history.spec.js
index 34a124138..5943a7aed 100644
--- a/tests/cypress/integration/plugins/history.spec.js
+++ b/tests/cypress/integration/plugins/history.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../../utils'
+import { haveText, html, test } from '../../utils.js'
 
 // Skipping these tests because the plugin has been moved to livewire/livewire until it's stablhese tests because the plugin has been moved to livewire/livewire until it's stable...
 describe.skip('History tests', function () {
diff --git a/tests/cypress/integration/plugins/intersect.spec.js b/tests/cypress/integration/plugins/intersect.spec.js
index ab83245c0..92ef95287 100644
--- a/tests/cypress/integration/plugins/intersect.spec.js
+++ b/tests/cypress/integration/plugins/intersect.spec.js
@@ -1,4 +1,4 @@
-import { haveText, test, html } from '../../utils'
+import { haveText, test, html } from '../../utils.js'
 
 test('can intersect',
     [html`
diff --git a/tests/cypress/integration/plugins/mask.spec.js b/tests/cypress/integration/plugins/mask.spec.js
index 20d26e5ea..b40a06240 100644
--- a/tests/cypress/integration/plugins/mask.spec.js
+++ b/tests/cypress/integration/plugins/mask.spec.js
@@ -1,4 +1,4 @@
-import { haveValue, html, test } from '../../utils'
+import { haveValue, html, test } from '../../utils.js'
 
 test('x-mask',
     [html`<input x-data x-mask="(999) 999-9999">`],
diff --git a/tests/cypress/integration/plugins/morph.spec.js b/tests/cypress/integration/plugins/morph.spec.js
index af16a5b9c..b62b1d2b7 100644
--- a/tests/cypress/integration/plugins/morph.spec.js
+++ b/tests/cypress/integration/plugins/morph.spec.js
@@ -1,4 +1,4 @@
-import { haveAttribute, haveLength, haveText, haveValue, haveHtml, html, test } from '../../utils'
+import { haveAttribute, haveLength, haveText, haveValue, haveHtml, html, test } from '../../utils.js'
 
 test('can morph components and preserve Alpine state',
     [html`
diff --git a/tests/cypress/integration/plugins/navigate.spec.js b/tests/cypress/integration/plugins/navigate.spec.js
index fd66cc4e5..646eb43b1 100644
--- a/tests/cypress/integration/plugins/navigate.spec.js
+++ b/tests/cypress/integration/plugins/navigate.spec.js
@@ -1,4 +1,4 @@
-import { beEqualTo, beVisible, haveAttribute, haveFocus, haveText, html, notBeVisible, test } from '../../utils'
+import { beEqualTo, beVisible, haveAttribute, haveFocus, haveText, html, notBeVisible, test } from '../../utils.js'
 
 // Skipping these tests because the plugin has been moved to livewire/livewire until it's stablhese tests because the plugin has been moved to livewire/livewire until it's stable...
 describe.skip('Navigate tests', function () {
diff --git a/tests/cypress/integration/plugins/persist.spec.js b/tests/cypress/integration/plugins/persist.spec.js
index 32595fdea..8e725d40c 100644
--- a/tests/cypress/integration/plugins/persist.spec.js
+++ b/tests/cypress/integration/plugins/persist.spec.js
@@ -1,4 +1,4 @@
-import { beEqualTo, exist, haveText, html, notExist, test } from '../../utils'
+import { beEqualTo, exist, haveText, html, notExist, test } from '../../utils.js'
 
 test('can persist number',
     [html`
diff --git a/tests/cypress/integration/plugins/resize.spec.js b/tests/cypress/integration/plugins/resize.spec.js
index 6004ef31b..19703567b 100644
--- a/tests/cypress/integration/plugins/resize.spec.js
+++ b/tests/cypress/integration/plugins/resize.spec.js
@@ -1,4 +1,4 @@
-import { haveText, test, html, notHaveText } from '../../utils'
+import { haveText, test, html, notHaveText } from '../../utils.js'
 
 test('can react to the resizing of an element',
     [html`
diff --git a/tests/cypress/integration/plugins/sort.spec.js b/tests/cypress/integration/plugins/sort.spec.js
index 4394a4dba..b331a5120 100644
--- a/tests/cypress/integration/plugins/sort.spec.js
+++ b/tests/cypress/integration/plugins/sort.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../../utils'
+import { haveText, html, test } from '../../utils.js'
 
 /**
  * Skipping all these tests because they are flaky in CI.
diff --git a/tests/cypress/integration/plugins/ui/combobox.spec.js b/tests/cypress/integration/plugins/ui/combobox.spec.js
index aa8137397..ff2528186 100644
--- a/tests/cypress/integration/plugins/ui/combobox.spec.js
+++ b/tests/cypress/integration/plugins/ui/combobox.spec.js
@@ -1,4 +1,4 @@
-import { beVisible, beHidden, haveAttribute, haveClasses, notHaveClasses, haveText, contain, notContain, html, notBeVisible, notHaveAttribute, notExist, haveFocus, test, haveValue, haveLength, ensureNoConsoleWarns} from '../../../utils'
+import { beVisible, beHidden, haveAttribute, haveClasses, notHaveClasses, haveText, contain, notContain, html, notBeVisible, notHaveAttribute, notExist, haveFocus, test, haveValue, haveLength, ensureNoConsoleWarns} from '../../../utils.js'
 
 test('it works with x-model',
     [html`
diff --git a/tests/cypress/integration/plugins/ui/dialog.spec.js b/tests/cypress/integration/plugins/ui/dialog.spec.js
index d8379edb1..4c0f79247 100644
--- a/tests/cypress/integration/plugins/ui/dialog.spec.js
+++ b/tests/cypress/integration/plugins/ui/dialog.spec.js
@@ -1,4 +1,4 @@
-import { beVisible, haveAttribute, haveText, html, notBeVisible, notExist, test } from '../../../utils'
+import { beVisible, haveAttribute, haveText, html, notBeVisible, notExist, test } from '../../../utils.js'
 
 test('has accessibility attributes',
     [html`
diff --git a/tests/cypress/integration/plugins/ui/disclosure.spec.js b/tests/cypress/integration/plugins/ui/disclosure.spec.js
index 75113072f..325cba571 100644
--- a/tests/cypress/integration/plugins/ui/disclosure.spec.js
+++ b/tests/cypress/integration/plugins/ui/disclosure.spec.js
@@ -1,4 +1,4 @@
-import { beVisible, haveClasses, haveAttribute, html, notBeVisible, notHaveClasses, test } from '../../../utils'
+import { beVisible, haveClasses, haveAttribute, html, notBeVisible, notHaveClasses, test } from '../../../utils.js'
 
 test('has accessibility attributes',
     [html`
diff --git a/tests/cypress/integration/plugins/ui/listbox.spec.js b/tests/cypress/integration/plugins/ui/listbox.spec.js
index 6c2298918..12ec4a032 100644
--- a/tests/cypress/integration/plugins/ui/listbox.spec.js
+++ b/tests/cypress/integration/plugins/ui/listbox.spec.js
@@ -1,4 +1,4 @@
-import { beVisible, beHidden, haveAttribute, haveClasses, notHaveClasses, haveText, html, notBeVisible, notHaveAttribute, notExist, haveFocus, test, ensureNoConsoleWarns} from '../../../utils'
+import { beVisible, beHidden, haveAttribute, haveClasses, notHaveClasses, haveText, html, notBeVisible, notHaveAttribute, notExist, haveFocus, test, ensureNoConsoleWarns} from '../../../utils.js'
 
 test('it works with x-model',
     [html`
diff --git a/tests/cypress/integration/plugins/ui/menu.spec.js b/tests/cypress/integration/plugins/ui/menu.spec.js
index 6e6874b3e..95b4fb4a1 100644
--- a/tests/cypress/integration/plugins/ui/menu.spec.js
+++ b/tests/cypress/integration/plugins/ui/menu.spec.js
@@ -1,4 +1,4 @@
-import { haveClasses, beVisible, haveAttribute, haveText, html, notBeVisible, notExist, test, haveFocus, notHaveClasses, notHaveAttribute } from '../../../utils'
+import { haveClasses, beVisible, haveAttribute, haveText, html, notBeVisible, notExist, test, haveFocus, notHaveClasses, notHaveAttribute } from '../../../utils.js'
 
 test('it works',
     [html`
diff --git a/tests/cypress/integration/plugins/ui/popover.spec.js b/tests/cypress/integration/plugins/ui/popover.spec.js
index 58a2550bf..7cd4e3ba9 100644
--- a/tests/cypress/integration/plugins/ui/popover.spec.js
+++ b/tests/cypress/integration/plugins/ui/popover.spec.js
@@ -1,4 +1,4 @@
-import { beVisible, haveAttribute, html, notBeVisible, notHaveAttribute, test } from '../../../utils'
+import { beVisible, haveAttribute, html, notBeVisible, notHaveAttribute, test } from '../../../utils.js'
 
 test('button toggles panel',
     [html`
diff --git a/tests/cypress/integration/plugins/ui/radio.spec.js b/tests/cypress/integration/plugins/ui/radio.spec.js
index 7106ee610..f4c815c06 100644
--- a/tests/cypress/integration/plugins/ui/radio.spec.js
+++ b/tests/cypress/integration/plugins/ui/radio.spec.js
@@ -1,4 +1,4 @@
-import { haveAttribute, haveFocus, html, haveClasses, notHaveClasses, test, haveText, notExist, beHidden, } from '../../../utils'
+import { haveAttribute, haveFocus, html, haveClasses, notHaveClasses, test, haveText, notExist, beHidden, } from '../../../utils.js'
 
 test('it works using x-model',
     [html`
diff --git a/tests/cypress/integration/plugins/ui/switch.spec.js b/tests/cypress/integration/plugins/ui/switch.spec.js
index 0b55ec2ce..5c7c6b9e8 100644
--- a/tests/cypress/integration/plugins/ui/switch.spec.js
+++ b/tests/cypress/integration/plugins/ui/switch.spec.js
@@ -1,4 +1,4 @@
-import { beHidden, beVisible, haveAttribute, haveClasses, haveText, html, notBeVisible, notExist, test } from '../../../utils'
+import { beHidden, beVisible, haveAttribute, haveClasses, haveText, html, notBeVisible, notExist, test } from '../../../utils.js'
 
 test('has accessibility attributes',
     [html`
diff --git a/tests/cypress/integration/plugins/ui/tabs.spec.js b/tests/cypress/integration/plugins/ui/tabs.spec.js
index 08bcef4f4..d2d1ac3ce 100644
--- a/tests/cypress/integration/plugins/ui/tabs.spec.js
+++ b/tests/cypress/integration/plugins/ui/tabs.spec.js
@@ -1,4 +1,4 @@
-import { beVisible, haveClasses, haveFocus, html, notBeVisible, notHaveClasses, test } from '../../../utils'
+import { beVisible, haveClasses, haveFocus, html, notBeVisible, notHaveClasses, test } from '../../../utils.js'
 
 test('can use tabs to toggle panels',
     [html`
diff --git a/tests/cypress/integration/scope.spec.js b/tests/cypress/integration/scope.spec.js
index 3b40578d3..5a520e90b 100644
--- a/tests/cypress/integration/scope.spec.js
+++ b/tests/cypress/integration/scope.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from "../utils";
+import { haveText, html, test } from "../utils.js";
 
 test(
     "properly merges the datastack",
diff --git a/tests/cypress/integration/store.spec.js b/tests/cypress/integration/store.spec.js
index fde31a3c3..b60a972b0 100644
--- a/tests/cypress/integration/store.spec.js
+++ b/tests/cypress/integration/store.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, test } from '../utils'
+import { haveText, html, test } from '../utils.js'
 
 test('can register and use a global store',
     [html`
diff --git a/tests/cypress/support/index.js b/tests/cypress/support/index.js
index ef6e0d7b2..5bf33f5f8 100644
--- a/tests/cypress/support/index.js
+++ b/tests/cypress/support/index.js
@@ -14,10 +14,10 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands.js'
 
 // Import drag and drop helpers (https://github.com/4teamwork/cypress-drag-drop/blob/master/index.js)
-import './drag'
+import './drag.js'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')