Conversation
📝 WalkthroughWalkthroughThe pull request switches the package's build output from CommonJS to ES modules. This includes updating entry points in Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@package.json`:
- Around line 14-15: The package.json currently points both "import" and
"require" to "./dist/index.mjs", which causes ERR_REQUIRE_ESM for CommonJS
consumers; fix by either making the package ESM-only (remove the "require" field
and add "type": "module" so consumers use the "import" entry) or produce a
dual-format build and repoint "require" to a CJS bundle (e.g.,
"./dist/index.cjs") while keeping "import": "./dist/index.mjs"; update your
webpack output and package.json fields ("import", "require") accordingly.
In `@webpack.config.js`:
- Around line 7-22: The webpack build only defines a single entry
("entry.index") and emits dist/index.mjs, but package.json declares subpath
exports like "./components/ui", "./providers", "./themes", "./utils", and
"./settings" that expect dist/<path>/index.js; add matching multi-entry outputs
in webpack.config.js (e.g., add entries for components/ui, providers, themes,
utils, settings under the entry object) or remove/update the subpath exports in
package.json; ensure emitted filenames/library.module format matches the exports
(update filename pattern and/or change export targets to .mjs) and keep the
experiments.outputModule and output.module settings intact so each subpath
produces its own dist/<subpath>/index(.mjs) file for proper resolution.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 060983de-07f9-4eb0-9c37-4ff455aef071
📒 Files selected for processing (2)
package.jsonwebpack.config.js
| "import": "./dist/index.mjs", | ||
| "require": "./dist/index.mjs" |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Is require(esm) stable by default on Node.js 22.12 and what is the behavior on Node 22.0-22.11 when require() targets a .mjs file?
💡 Result:
No, require(esm) is not stable by default on Node.js 22.12. It is enabled by default (unflagged) but remains experimental, emitting an experimental warning on first use (unless from node_modules). It became fully stable later, as noted in end-of-2025 sources. On Node.js 22.0-22.11, require targeting a .mjs file throws ERR_REQUIRE_ESM by default. The feature requires the --experimental-require-module flag to load synchronous ESM (no top-level await), returning a namespace object similar to dynamic import. Without the flag, .mjs files cannot be required from CommonJS.
Citations:
- 1: https://joyeecheung.github.io/blog/2025/12/30/require-esm-in-node-js-from-experiment-to-stability/
- 2: https://nodejs.org/en/blog/announcements/v22-release-announce
- 3: https://github.com/nodejs/node/releases/tag/v22.12.0
- 4: https://nodejs.org/en/blog/release/v22.12.0
- 5: https://nodejs.org/download/release/v22.2.0/docs/api/modules.html
- 6: https://nodejs.dev/en/blog/announcements/v22-release-announce
"require": "./dist/index.mjs" is a semantic mismatch and breaks on Node 22.0–22.11.
.mjs files are always parsed as ES modules by Node.js, so pointing the require condition at an .mjs is incorrect. On Node 22.0–22.11 (within your declared engines.node: ">=22" range), this will throw ERR_REQUIRE_ESM for any CommonJS consumer. Even on Node 22.12 and later, require(esm) remains experimental (enabled-by-default but with warnings), not a stable feature.
Pick one of the following:
-
ESM-only package (recommended, matches the webpack output): drop the
requirecondition and declare the package as ESM.📦 Proposed change — ESM-only
"name": "@wedevs/plugin-ui", "version": "2.0.0", + "type": "module", "description": "Scoped, themeable UI components for WordPress plugins - ShadCN style", "main": "dist/index.mjs", @@ ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.mjs" + "import": "./dist/index.mjs" },
-
Dual-format: emit a separate CJS bundle from webpack and repoint
requireat it (e.g.dist/index.cjs).
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "import": "./dist/index.mjs", | |
| "require": "./dist/index.mjs" | |
| "import": "./dist/index.mjs" |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@package.json` around lines 14 - 15, The package.json currently points both
"import" and "require" to "./dist/index.mjs", which causes ERR_REQUIRE_ESM for
CommonJS consumers; fix by either making the package ESM-only (remove the
"require" field and add "type": "module" so consumers use the "import" entry) or
produce a dual-format build and repoint "require" to a CJS bundle (e.g.,
"./dist/index.cjs") while keeping "import": "./dist/index.mjs"; update your
webpack output and package.json fields ("import", "require") accordingly.
| entry: { | ||
| index: './src/index.ts', | ||
| }, | ||
| experiments: { | ||
| ...( defaultConfig.experiments || {} ), | ||
| outputModule: true, | ||
| }, | ||
| output: { | ||
| ...defaultConfig.output, | ||
| path: path.resolve( __dirname, 'dist' ), | ||
| filename: '[name].js', | ||
| filename: '[name].mjs', | ||
| library: { | ||
| type: 'commonjs2', | ||
| type: 'module', | ||
| }, | ||
| module: true, | ||
| chunkFormat: 'module', |
There was a problem hiding this comment.
Single index entry won't satisfy the subpath exports declared in package.json.
Webpack is configured with a single entry (index) emitting only dist/index.mjs, but package.json declares subpath exports for ./components/ui, ./providers, ./themes, ./utils, and ./settings that reference dist/<path>/index.js. Those files will never be produced by this build, so any consumer doing import ... from '@wedevs/plugin-ui/settings' (the documented usage pattern) will fail module resolution.
Either add corresponding entries here (and update the subpath exports to .mjs) or drop the subpath exports from package.json if only the root entry is supported.
🛠️ Example: multi-entry output
entry: {
index: './src/index.ts',
+ 'components/ui/index': './src/components/ui/index.ts',
+ 'providers/index': './src/providers/index.ts',
+ 'themes/index': './src/themes/index.ts',
+ 'utils/index': './src/utils/index.ts',
+ 'components/settings/index': './src/components/settings/index.ts',
},Based on learnings: "Use sub-path exports for organized imports: wedevs/plugin-ui/settings, wedevs/plugin-ui/components/ui, wedevs/plugin-ui/providers, wedevs/plugin-ui/themes, wedevs/plugin-ui/utils".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@webpack.config.js` around lines 7 - 22, The webpack build only defines a
single entry ("entry.index") and emits dist/index.mjs, but package.json declares
subpath exports like "./components/ui", "./providers", "./themes", "./utils",
and "./settings" that expect dist/<path>/index.js; add matching multi-entry
outputs in webpack.config.js (e.g., add entries for components/ui, providers,
themes, utils, settings under the entry object) or remove/update the subpath
exports in package.json; ensure emitted filenames/library.module format matches
the exports (update filename pattern and/or change export targets to .mjs) and
keep the experiments.outputModule and output.module settings intact so each
subpath produces its own dist/<subpath>/index(.mjs) file for proper resolution.
1 participant
Summary by CodeRabbit
.mjs), ensuring consistent module resolution for both ESM and CommonJS consumers.