diff --git a/babel.commonjs.js b/babel.commonjs.cjs
similarity index 100%
rename from babel.commonjs.js
rename to babel.commonjs.cjs
diff --git a/babel.config.js b/babel.config.cjs
similarity index 100%
rename from babel.config.js
rename to babel.config.cjs
diff --git a/babel/hash.js b/babel/hash.cjs
similarity index 100%
rename from babel/hash.js
rename to babel/hash.cjs
diff --git a/babel/index.js b/babel/index.cjs
similarity index 87%
rename from babel/index.js
rename to babel/index.cjs
index d8f399d..10b929b 100644
--- a/babel/index.js
+++ b/babel/index.cjs
@@ -1,11 +1,11 @@
 // @ts-check
 const PACKAGE_NAME = "css-variable";
-const hash = require("./hash");
+const hash = require("./hash.cjs");
 const pathRelative = require("path").relative;
 
 /** @typedef {import("@babel/core")} babel */
 
-/** 
+/**
  * The context of a babel plugin run
  * @typedef {{
  *  minifyVariables: boolean,
@@ -14,7 +14,7 @@ const pathRelative = require("path").relative;
  *  isImportedInCurrentFile: boolean,
  *  localVarNames: string[],
  *  opts: babel.PluginOptions & { displayName?: boolean }
- * } & babel.PluginPass} PluginPass 
+ * } & babel.PluginPass} PluginPass
  */
 
 /**
@@ -36,10 +36,14 @@ module.exports = function (babel) {
       return;
     }
     const callee = path.node.callee;
-    if (!("name" in callee) || !pluginPass.localVarNames.includes(callee.name)) {
+    if (
+      !("name" in callee) ||
+      !pluginPass.localVarNames.includes(callee.name)
+    ) {
       return;
     }
-    const readableName = !pluginPass.minifyVariables && dashed(getNameByUsage(path));
+    const readableName =
+      !pluginPass.minifyVariables && dashed(getNameByUsage(path));
     const readablePrefix = readableName ? `${readableName}--` : "";
     //
     // Inject the variable prefix
@@ -51,7 +55,9 @@ module.exports = function (babel) {
     const firstArg = constructorArguments[0];
     if (!firstArg || firstArg.type !== "StringLiteral") {
       constructorArguments.unshift(
-        stringLiteral(readablePrefix + getUniqueHash(pluginPass) + pluginPass.varCount++)
+        stringLiteral(
+          readablePrefix + getUniqueHash(pluginPass) + pluginPass.varCount++
+        )
       );
     }
     //
@@ -60,16 +66,17 @@ module.exports = function (babel) {
     // side effects and is save to be removed
     //
     path.addComment("leading", "@__PURE__");
-  }
+  };
 
   return {
     name: `${PACKAGE_NAME} unique variable name injector`,
     pre() {
       this.isImportedInCurrentFile = false;
       this.varCount = 0;
-      this.minifyVariables = this.opts.displayName !== undefined ?
-        !this.opts.displayName
-        : this.file.opts.envName !== "development";
+      this.minifyVariables =
+        this.opts.displayName !== undefined
+          ? !this.opts.displayName
+          : this.file.opts.envName !== "development";
       this.localVarNames = [];
     },
     visitor: {
@@ -106,7 +113,6 @@ module.exports = function (babel) {
   };
 };
 
-
 /**
  * Tries to extract the name for readable names in developments
  * e.g.:
@@ -118,7 +124,7 @@ module.exports = function (babel) {
  */
 function getNameByUsage(path) {
   const parent = path.parent;
-  if (!parent) return;
+  if (!parent) return "";
   if (parent.type === "ObjectProperty") {
     const key = parent.key;
     if (key && key.type === "Identifier" && key.name) {
@@ -138,9 +144,9 @@ function getNameByUsage(path) {
 function dashed(val) {
   /** handle camelCase and CONSTANT_CASE */
   return val
-  .replace(/([0-9a-z])([A-Z])/g, "$1-$2")
-  .toLowerCase()
-  .replace(/_/g, "-");
+    .replace(/([0-9a-z])([A-Z])/g, "$1-$2")
+    .toLowerCase()
+    .replace(/_/g, "-");
 }
 
 /** @type {WeakMap<babel.PluginPass, string>} */
diff --git a/examples/styled-components/.babelrc b/examples/styled-components/.babelrc
deleted file mode 100644
index 69a7bee..0000000
--- a/examples/styled-components/.babelrc
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-    "presets": ["next/babel"],
-    "plugins": [
-        "css-variable/babel",
-        "babel-plugin-styled-components"
-    ]
-}
\ No newline at end of file
diff --git a/examples/styled-components/babel.config.js b/examples/styled-components/babel.config.js
new file mode 100644
index 0000000..1a85f93
--- /dev/null
+++ b/examples/styled-components/babel.config.js
@@ -0,0 +1,10 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["next/babel"],
+    plugins: [
+      ["css-variable/babel", { async: false }],
+      ["babel-plugin-styled-components", { ssr: true }],
+    ],
+  };
+};
diff --git a/examples/styled-components/next-env.d.ts b/examples/styled-components/next-env.d.ts
index 4f11a03..a4a7b3f 100644
--- a/examples/styled-components/next-env.d.ts
+++ b/examples/styled-components/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/examples/styled-components/next.config.js b/examples/styled-components/next.config.js
index 0aed03e..206bdb1 100644
--- a/examples/styled-components/next.config.js
+++ b/examples/styled-components/next.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  pageExtensions: ['page.tsx'],
-};
\ No newline at end of file
+  pageExtensions: ["page.tsx"],
+};
diff --git a/examples/styled-components/package.json b/examples/styled-components/package.json
index 47f182a..ad07a7c 100644
--- a/examples/styled-components/package.json
+++ b/examples/styled-components/package.json
@@ -19,4 +19,4 @@
     "styled-components": "^6.1.11",
     "typescript": "5.4.5"
   }
-}
\ No newline at end of file
+}
diff --git a/jest.config.js b/jest.config.cjs
similarity index 100%
rename from jest.config.js
rename to jest.config.cjs
diff --git a/package.json b/package.json
index 91424fb..b95cb34 100644
--- a/package.json
+++ b/package.json
@@ -1,15 +1,17 @@
 {
   "name": "css-variable",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "define CSS custom properties (variables) in JS",
   "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
-    "./babel": "./babel/index.js",
+    "./babel": "./babel/index.cjs",
     "./swc": "./swc/target/wasm32-wasi/release/swc_plugin_css_variable.wasm"
   },
   "types": "./dist/index.d.ts",
@@ -24,8 +26,8 @@
   "scripts": {
     "prepublishOnly": "npm run build && npm run build:swc",
     "build": "npm run build:types && npm run build:commonjs && npm run build:module && npm run build:modulemin",
-    "build:commonjs": "babel --config-file=./babel.commonjs.js -o dist/index.js src/index.ts",
-    "build:module": "babel --config-file=./babel.config.js -o dist/index.mjs src/index.ts",
+    "build:commonjs": "babel --config-file=./babel.commonjs.cjs -o dist/index.js src/index.ts",
+    "build:module": "babel --config-file=./babel.config.cjs -o dist/index.mjs src/index.ts",
     "build:types": "tsc --skipLibCheck --emitDeclarationOnly --declaration --target ESNext --outDir dist src/index.ts",
     "build:modulemin": "terser ./dist/index.mjs -o ./dist/index.min.mjs -m --ecma 2017 --module --toplevel -b -c",
     "build:swc": "cargo build --manifest-path ./swc/Cargo.toml --release --target=wasm32-wasi",
@@ -58,11 +60,11 @@
   "homepage": "https://css-variable.js.org/",
   "devDependencies": {
     "@babel/cli": "7.19.3",
-    "@babel/core": "7.20.2",
+    "@babel/core": "7.22.0",
     "@babel/plugin-transform-modules-commonjs": "^7.19.6",
     "@babel/preset-typescript": "^7.18.6",
     "@babel/runtime": "^7.20.1",
-    "@babel/types": "^7.20.2",
+    "@babel/types": "^7.22.0",
     "@swc/core": "1.4.17",
     "@swc/jest": "^0.2.36",
     "@types/jest": "^29.2.3",
diff --git a/tsconfig.json b/tsconfig.json
index e950254..0fec037 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -97,4 +97,4 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
   },
-}
+}
\ No newline at end of file