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: package types exports for ESM projects #970

Merged
merged 4 commits into from
Feb 3, 2023

Conversation

cseas
Copy link
Member

@cseas cseas commented Jan 21, 2023

Fixes #960

Description

TypeScript requires types to be declared in the "types" property under "exports" section of package.json of npm packages to detect declaration files in a project setup that outputs ESM.
(combination of type:module in project's package.json and module:NodeNext in tsconfig.json)

I've added the missing fields. These fields are only used by TypeScript in an ESM setup so backwards compatibility shouldn't be affected.

Note: An alternate shorter solution is to rename the generated types files for web from index.d.ts to index.web.d.ts. While that would work for the above config, it will break types for moduleResolution:node. Since the automatic detection of TypeScript varies based on the moduleResolution used, it's better to tell TypeScript explicitly where the types are for each export instead of relying on automatic detection. Renaming the generated file will also cause a backwards compatibility issue as pointed out by this code comment:

https://github.com/razorpay/blade/blob/master/packages/blade/rollup.config.js#L127

Testing

Tested the below combinations in a web project.

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

Note: Haven't tested this solution for a react-native project.

Screenshots

Before
Screenshot 2023-01-21 at 2 48 07 PM
After
Screenshot 2023-01-21 at 3 40 06 PM

References

@changeset-bot
Copy link

changeset-bot bot commented Jan 21, 2023

🦋 Changeset detected

Latest commit: 3223527

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 Jan 21, 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 3223527:

Sandbox Source
razorpay/blade: basic Configuration

@cseas cseas changed the title fix: bundled declaration file for web fix: package types exports for ESM projects Jan 21, 2023
@cseas cseas self-assigned this Jan 21, 2023
@github-actions
Copy link
Contributor

✅ PR title follows Conventional Commits specification.

@kamleshchandnani
Copy link
Collaborator

can you test this on react native project and confirm? AFAIK the exports field has no effect on RN projects yet.

Copy link
Collaborator

@kamleshchandnani kamleshchandnani left a comment

Choose a reason for hiding this comment

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

LGTM ✅

Just check if things are not breaking on React Native

@cseas
Copy link
Member Author

cseas commented Jan 30, 2023

Ack. Will test on React Native soon as I get some time.

@kamleshchandnani kamleshchandnani merged commit 26ffc56 into master Feb 3, 2023
@kamleshchandnani kamleshchandnani deleted the fix-web-declaration branch February 3, 2023 05:07
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.

TypeScript cannot find declaration files with module nodenext
2 participants