Skip to content

fix: Fix imports #343

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zoryana94 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fix: Fix imports #343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a468f84
chore: Fix imports
zoryana94 Jan 2, 2026
6d22083
chore: Update imports
zoryana94 Jan 2, 2026
1868b43
chore: Add tests
zoryana94 Jan 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions .babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,20 @@
],
"@babel/preset-react"
],
"plugins": [["@babel/plugin-transform-runtime", {
"regenerator": true
}]]
"plugins": [
["@babel/plugin-transform-runtime", {
"regenerator": true
}],
[
"babel-plugin-transform-rewrite-imports",
Copy link
Contributor

@joao-imi joao-imi Jan 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zoryana94 thank you for addressing this fix!

I think the plugin babel-plugin-transform-rewrite-imports is inside env.esm, so it only runs for the ESM build.

The CJS build uses npm run transpile which doesn't set BABEL_ENV=esm, so the plugin doesn't run.

  • dist/esm/hooks/index.js -> "./useHCaptcha.js" ✅
  • dist/hooks/index.js -> "./useHCaptcha.jsx" ❌

We may want to move the plugin to the root plugins array instead.

Copy link
Contributor

@joao-imi joao-imi Jan 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also opened this other PR as a simpler alternative.

It uses .js extensions directly in the source files instead of relying on a Babel plugin.
No new dependencies, works for both CJS and ESM.

The only tradeoff is a small moduleNameMapper config in Jest to resolve .js -> .jsx during tests.

{
"replaceExtensions": {
".jsx": ".js",
".tsx": ".js"
}
}
]
]
}
}
}
2 changes: 1 addition & 1 deletion demo/app/examples/HookExample.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { HCaptchaProvider, useHCaptcha } from '../../../src/hooks/index.jsx';
import { HCaptchaProvider, useHCaptcha } from '../../../src/hooks/index.js';

function Form() {
const [email, setEmail] = useState("");
Expand Down
Loading
Loading