fix: build process causing esm issues (#48)

* fix: build process causing esm issues * fix: add back main and module to pkg json * fix: pr feedback * docs(changeset): add changeset * fix: pr feedback
knocklabs · Feb 8, 2024 · 59ce044 · 59ce044
1 parent 5d06f5d
commit 59ce044
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git a/.changeset/beige-bugs-act.md b/.changeset/beige-bugs-act.md
@@ -0,0 +1,5 @@
+---
+"@knocklabs/react": patch
+---
+
+fix: build process causing esm issues
diff --git a/examples/nextjs-example/next.config.js b/examples/nextjs-example/next.config.js
@@ -1,4 +1,2 @@
 /** @type {import('next').NextConfig} */
-module.exports = {
-  transpilePackages: ["@knocklabs/react"],
-};
+module.exports = {};
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -5,7 +5,7 @@
   "version": "0.1.5",
   "license": "MIT",
   "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.mjs",
+  "module": "dist/esm/index.esm.js",
   "types": "dist/types/index.d.ts",
   "typings": "dist/types/index.d.ts",
   "style": "dist/index.css",
@@ -14,7 +14,8 @@
     ".": {
       "require": "./dist/cjs/index.js",
       "types": "./dist/types/index.d.ts",
-      "default": "./dist/esm/index.mjs"
+      "import": "./dist/esm/index.esm.js",
+      "default": "./dist/esm/index.esm.js"
     }
   },
   "files": [
@@ -78,4 +79,4 @@
     "vite-plugin-no-bundle": "^3.0.0",
     "vitest": "^1.2.2"
   }
-}
+}
diff --git a/packages/react/vite.config.ts b/packages/react/vite.config.ts
@@ -9,31 +9,30 @@ import execute from "rollup-plugin-execute";
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), "");
-  const CJS = env.BUILD_TARGET?.toLocaleLowerCase()?.match("cjs");
-  const formats: LibraryFormats[] = CJS ? ["cjs"] : ["es"];
+  const target = env?.BUILD_TARGET?.toLowerCase() as LibraryFormats;
 
   return {
     plugins: [
       dts({
         outDir: "dist/types",
       }),
       react(),
-      noBundlePlugin({ root: "./src" }),
+      noBundlePlugin({ root: resolve(__dirname, "src") }),
     ],
     build: {
-      outDir: CJS ? "dist/cjs" : "dist/esm",
+      outDir: target === "cjs" ? "dist/cjs" : "dist/esm",
       sourcemap: true,
       lib: {
         entry: resolve(__dirname, "src/index.ts"),
+        fileName: "[name]",
+        formats: [target],
         name: "react",
-        formats,
       },
       rollupOptions: {
         // External packages that should not be bundled
         external: ["react", "react-dom"],
         output: {
           interop: "compat",
-          format: formats[0],
           globals: {
             react: "React",
           },
@@ -50,7 +49,10 @@ export default defineConfig(({ mode }) => {
             // Move index.css to root of dist
             `mv dist/esm/index.css dist/index.css`,
             // Delete extra .css.js files
-            `rm dist/**/*.css.*`,
+            `find ./dist -name "*.css.js" -delete`,
+            `find ./dist -name "*.css.js.map" -delete`,
+            `find ./dist -name "*.css.esm.js" -delete`,
+            `find ./dist -name "*.css.esm.js.map" -delete`,
           ]),
           // Remove css imports
           {
@@ -62,7 +64,7 @@ export default defineConfig(({ mode }) => {
                 if (file?.type === "chunk") {
                   // Replace .css imports and requires
                   const pattern =
-                    /(import\s+['"].+\.css(\.mjs)?['"];?)|(require\(['"][^()]+\.css(\.js)?['"]\);?)/;
+                    /(import ".*?\.css\..*?";)|(require\(['"][^()]+\.css(\.js)?['"]\);?)/g;
                   file.code = file.code.replace(pattern, "");
                 }
               }