fix: support next.config.mjs (kuma-ui#389)

thomaslindstrom · Dec 16, 2023 · 51e773e · 51e773e
1 parent 407a55e
commit 51e773e
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 43 deletions.
diff --git a/.changeset/smooth-otters-float.md b/.changeset/smooth-otters-float.md
@@ -0,0 +1,6 @@
+---
+"@kuma-ui/next-plugin": patch
+"@kuma-ui/webpack-plugin": patch
+---
+
+fix: support esm with next.config.js
diff --git a/example/next-app-router/next.config.js b/example/next-app-router/next.config.js
diff --git a/example/next-app-router/next.config.mjs b/example/next-app-router/next.config.mjs
@@ -0,0 +1,8 @@
+import { withKumaUI } from "@kuma-ui/next-plugin";
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+export default withKumaUI(nextConfig);
diff --git a/packages/next-plugin/src/index.ts b/packages/next-plugin/src/index.ts
@@ -1,15 +1,15 @@
 import type { NextConfig } from "next";
-import { loadConfig } from "browserslist";
+import browserslist from "browserslist";
 import { type Configuration, type RuleSetRule } from "webpack";
 import KumaUIWebpackPlugin from "@kuma-ui/webpack-plugin";
-import { lazyPostCSS } from "next/dist/build/webpack/config/blocks/css";
-import { getGlobalCssLoader } from "next/dist/build/webpack/config/blocks/css/loaders";
-import { findPagesDir } from "next/dist/lib/find-pages-dir";
-import type { ConfigurationContext } from "next/dist/build/webpack/config/utils";
+import { lazyPostCSS } from "next/dist/build/webpack/config/blocks/css/index.js";
+import { getGlobalCssLoader } from "next/dist/build/webpack/config/blocks/css/loaders/index.js";
+import { findPagesDir } from "next/dist/lib/find-pages-dir.js";
+import type { ConfigurationContext } from "next/dist/build/webpack/config/utils.js";
 
 const getSupportedBrowsers = (dir: string, isDevelopment: boolean) => {
   try {
-    return loadConfig({
+    return browserslist.loadConfig({
       path: dir,
       env: isDevelopment ? "development" : "production",
     });

diff --git a/packages/webpack-plugin/src/getUserTheme.ts b/packages/webpack-plugin/src/getUserTheme.ts
@@ -1,4 +1,4 @@
-import eval from "eval";
+import _eval from "eval";
 import { buildSync } from "esbuild";
 import fs from "fs";
 import type { UserTheme } from "packages/sheet";
@@ -27,7 +27,7 @@ export const getUserTheme = (configPath: string) => {
     logLevel: "silent",
   });
 
-  const { default: userTheme } = eval(
+  const { default: userTheme } = _eval(
     result.outputFiles[0].text,
     configPath,
   ) as {

diff --git a/packages/webpack-plugin/src/loader.ts b/packages/webpack-plugin/src/loader.ts
@@ -11,7 +11,6 @@ export const CSS_PARAM_NAME = "css";
 
 type Options = {
   config?: string;
-  virtualLoader: boolean;
   cssOutputDir: string;
 };
 

diff --git a/packages/webpack-plugin/src/plugin.ts b/packages/webpack-plugin/src/plugin.ts
@@ -3,22 +3,19 @@ import { theme } from "@kuma-ui/sheet";
 import path from "path";
 import { readdirSync } from "fs";
 import { getUserTheme } from "./getUserTheme";
+import { createRequire } from "module";
 
-// type WebpackPluginOption = {};
+// tsup will replace __ESM__ with true during ESM build and false during CJS build when bundling.
+declare const __ESM__: boolean;
 
-export const CSS_PATH = require.resolve("../assets/kuma.css");
-export const cssLoader = require.resolve("./cssLoader");
+const _require = __ESM__ ? createRequire(import.meta.url) : require;
+
+export const CSS_PATH = _require.resolve("../assets/kuma.css");
 
 class KumaUIWebpackPlugin {
-  // private options: WebpackPluginOption;
   private config: string | undefined;
 
-  static loader = require.resolve("./loader");
-
   constructor() {
-    // options: WebpackPluginOption = {}
-    // this.options = options;
-
     const dir = readdirSync(".");
     dir.forEach((filePath) => {
       if (filePath.startsWith("kuma.config.")) {
@@ -60,7 +57,7 @@ class KumaUIWebpackPlugin {
         exclude: /node_modules/,
         use: [
           {
-            loader: KumaUIWebpackPlugin.loader,
+            loader: _require.resolve("./loader.js"),
             options: {
               config,
             },
@@ -71,7 +68,7 @@ class KumaUIWebpackPlugin {
         test: CSS_PATH,
         use: [
           {
-            loader: cssLoader,
+            loader: _require.resolve("./cssLoader.js"),
           },
         ],
       },

diff --git a/packages/webpack-plugin/src/virtualLoader.ts b/packages/webpack-plugin/src/virtualLoader.ts
diff --git a/tsup.config.ts b/tsup.config.ts
@@ -1,8 +1,22 @@
-import { defineConfig } from 'tsup';
+import { defineConfig } from "tsup";
 
-export default defineConfig({
-  clean: true,
-  dts: true,
-  format: ['cjs', 'esm'],
-  entry: ['src', '!src/**/*.test.*', '!src/**__test__/**'],
-});
+const entries = ["src", "!src/**/*.test.*", "!src/**__test__/**"];
+
+export default defineConfig([
+  {
+    target: "esnext",
+    clean: true,
+    dts: true,
+    format: "cjs",
+    entry: entries,
+    define: { __ESM__: "false" },
+  },
+  {
+    target: "esnext",
+    clean: true,
+    dts: true,
+    format: "esm",
+    entry: entries,
+    define: { __ESM__: "true" },
+  },
+]);