Skip to content
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.

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

fix: change import to default in package exports #1028

Merged
merged 4 commits into from
Feb 28, 2023

Conversation

cseas
Copy link
Member

@cseas cseas commented Feb 28, 2023

The changes made in #970 caused Jest tests to break for Blade consumers.
This is because Jest does not support the "import" condition in package exports.

Proper support for the exports field for Jest is still an open issue:
browserify/resolve#222

But we can fix this just by providing a "default" field which Jest does recognise. Since we're not exporting a dual package build which requires explicit import/require conditions, the default field is sufficient for all tools consuming Blade.

I've also moved the "types" to be defined first as is recommended by TypeScript. It still works right now in master because of a bug in TypeScript. Refer: https://arethetypeswrong.github.io/

@changeset-bot
Copy link

changeset-bot bot commented Feb 28, 2023

🦋 Changeset detected

Latest commit: 1b7c3b6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@razorpay/blade Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 28, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1b7c3b6:

Sandbox Source
razorpay/blade: basic Configuration

@github-actions
Copy link
Contributor

github-actions bot commented Feb 28, 2023

✅ PR title follows Conventional Commits specification.

@cseas cseas changed the title revert: package types exports for ESM projects fix: change import to default in package exports Feb 28, 2023
@kamleshchandnani
Copy link
Collaborator

have you tested with all the P&C as you did before? Want to be sure that this doesn't break what was fixed as part of #970

@cseas
Copy link
Member Author

cseas commented Feb 28, 2023

@kamleshchandnani Tested these combinations in a web project:

typescript module moduleResolution
4.9.4 NodeNext NodeNext
4.9.4 es6 node
4.6.4 es6 node

Can confirm this is not a breaking change.

"import": "./build/components/index.native.js",
"types": "./build/components/index.native.d.ts"
"types": "./build/components/index.native.d.ts",
"default": "./build/components/index.native.js"
Copy link
Collaborator

Choose a reason for hiding this comment

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

can you link what is the diff between using default and import here?

Copy link
Member Author

@cseas cseas Feb 28, 2023

Choose a reason for hiding this comment

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

Whenever Blade is used with import (e.g. import { Button } from "@razorpay/blade/components";), the tool processing this import (bundler/IDE/test) will look for the "import" condition in Blade's exports. This is true for all tools that support properly resolving the "exports" field.

Jest only supports "browser", "require" or "default" as mentioned in okta/okta-auth-js#1268 (comment), I couldn't find a docs link explaining this. But Jest's support for the "exports" field is still an open issue: browserify/resolve#222

The difference is that import will only work if the tool processing it supports it, jest doesn't. The default field instead works as "if nothing else resolves before this, finally resolve to this". If a default is not provided, the resolution of the package will fail if the tool doesn't support any of the other defined keys.

Node's conditional exports section explains this in detail:
https://nodejs.org/api/packages.html#conditional-exports

Copy link
Collaborator

Choose a reason for hiding this comment

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

found it here. Now i understand why jest fails to import because jest still doesn't support importing esm things so we could have done require and import so jest could use require export path and webpack can do import export path. but its fine for now since we don't have cjs and esm builds

@kamleshchandnani kamleshchandnani merged commit cbb1424 into master Feb 28, 2023
@kamleshchandnani kamleshchandnani deleted the revert-exports branch February 28, 2023 07:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants