fix: resolve ModuleNotFoundError in ESM environments by generating native bundles (#1299)

* fix: resolve ModuleNotFoundError in ESM environments by generating native bundles

* chore: modify build config

* chore: modify build config

* fix(package.json): add author and remove unused build:esm script

* fix(rollup): use preserveModules for client ESM build

* build(package.json): add build:umd script

* fix(package.json): build all artifacts in test:esm script

Author: Div627

.gitignore

@@ -1,6 +1,6 @@
 # Build directory
 dist/
-esm/types.ts
+esm/
 lib/
 
 # Logs

esm/client/html-to-dom.d.mts

@@ -29,9 +29,9 @@
   "scripts": {
     "build": "run-s build:*",
     "build:cjs": "tsc",
-    "build:esm": "awk '!/sourceMappingURL/' lib/types.d.ts > esm/types.ts",
+    "build:esm": "rollup --config --failAfterWarnings --environment ESM:true",
     "build:umd": "rollup --config --failAfterWarnings",
-    "clean": "rm -rf .nyc_output coverage dist lib",
+    "clean": "rm -rf .nyc_output coverage dist lib esm",
     "lint": "eslint .",
     "lint:fix": "npm run lint -- --fix",
     "lint:package": "publint",
@@ -43,7 +43,7 @@
     "test:client": "npm run test:client:watch -- --single-run",
     "test:client:build": "NODE_ENV=test npm run build",
     "test:client:watch": "npm run test:client:build && karma start",
-    "test:esm": "npm run build:cjs && node --test test/esm",
+    "test:esm": "npm run build && node --test test/esm",
     "test:server": "npm run build:cjs && nyc mocha"
   },
   "repository": {

esm/client/html-to-dom.mjs

@@ -3,55 +3,95 @@ import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import terser from '@rollup/plugin-terser';
 import typescript from '@rollup/plugin-typescript';
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
 
-const getConfig = (minify = false) => ({
-  input: 'src/index.ts',
-
-  output: {
-    file: `dist/html-dom-parser${minify ? '.min' : ''}.js`,
-    format: 'umd',
-    name: 'HTMLDOMParser',
-    sourcemap: true,
-  },
-
-  plugins: [
-    alias({
-      entries: [
-        {
-          find: './server/html-to-dom',
-          replacement: './client/html-to-dom',
-        },
-      ],
-    }),
-
+const getPlugins = (isBrowser = false, minify = false, outputDir) =>
+  [
+    isBrowser &&
+      alias({
+        entries: [
+          {
+            find: './server/html-to-dom',
+            replacement: './client/html-to-dom',
+          },
+        ],
+      }),
     typescript({
       declaration: false,
       declarationMap: false,
       module: 'esnext',
       compilerOptions: {
-        outDir: 'dist',
+        outDir: outputDir,
       },
     }),
-
     commonjs(),
-    resolve({ browser: true }),
+    resolve({ browser: isBrowser }),
     minify && terser(),
-  ],
-});
+  ].filter(Boolean);
 
-const configs = [getConfig(), getConfig(true)];
+const getUMDConfig = (minify = false) => {
+  const output = `dist/html-dom-parser${minify ? '.min' : ''}.js`;
+  return {
+    input: 'src/index.ts',
+    output: {
+      file: output,
+      format: 'umd',
+      name: 'HTMLDOMParser',
+      sourcemap: true,
+    },
+    plugins: getPlugins(true, minify, 'dist'),
+  };
+};
+
+const esmConfigs = [
+  {
+    input: 'src/index.ts',
+    output: {
+      file: 'esm/index.mjs',
+      format: 'es',
+      sourcemap: true,
+    },
+    plugins: getPlugins(false, false, 'esm'),
+  },
+  // Client build: use preserveModules for proper module structure
+  {
+    input: 'src/client/html-to-dom.ts',
+    output: {
+      dir: 'esm/client',
+      format: 'es',
+      entryFileNames: '[name].mjs',
+      preserveModules: true,
+      preserveModulesRoot: 'src/client',
+      sourcemap: true,
+    },
+    plugins: getPlugins(true, false, 'esm/client'),
+  },
+  {
+    input: 'src/server/html-to-dom.ts',
+    output: {
+      file: 'esm/server/html-to-dom.mjs',
+      format: 'es',
+      sourcemap: true,
+    },
+    plugins: getPlugins(false, false, 'esm'),
+  },
+];
 
-if (process.env.NODE_ENV === 'test') {
-  configs.push({
-    input: 'node_modules/htmlparser2',
+const configs = [
+  getUMDConfig(),
+  getUMDConfig(true),
+  ...esmConfigs,
+  {
+    input: require.resolve('htmlparser2'),
     output: {
       file: 'dist/htmlparser2.js',
       format: 'umd',
       name: 'htmlparser2',
       sourcemap: true,
     },
     plugins: [commonjs(), resolve({ browser: true })],
-  });
-}
+  },
+];
 
 export default configs;