Can now export from @primer/react/drafts #1771

pksjce · 2022-01-05T07:28:58Z

Describe your changes here.

Right now, we need to import draft components from @primer/react/lib-esm/drafts. This is less than ideal.
In our docs, we have aliased @primer/react to the src folder relatively. So it works for our documentation site.
But it clearly does not work elsewhere as demonstrated in #1768

Our module definition right now defines lib-esm/index.js as the main module import in package.json. We need to alias drafts to work as expected.

One option is to use workspaces. I think this is unwieldy for our current usecase.
This blogpost suggested module-alias, but there's a new update to go for subpath-imports.

I'm trying it out with this PR. I need a build package to verify if it's working

Screenshots

Please provide before/after screenshots for any visual changes

Merge checklist

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

changeset-bot · 2022-01-05T07:29:00Z

⚠️ No Changeset found

Latest commit: 5940a97

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

github-actions · 2022-01-05T07:32:50Z

size-limit report 📦

Path	Size
dist/browser.esm.js	61.64 KB (0%)
dist/browser.umd.js	62 KB (0%)

pksjce · 2022-01-05T07:39:07Z

Update

This does seem to work! Try it for yourself by using this canary version @primer/react@0.0.0-20220572435
https://codesandbox.io/s/objective-dirac-ihz1h?file=/src/App.js

PS - Does this need a changeset?

siddharthkp

Yes!! Thank you for this <3

maximedegreve

Not 100% sure if it's working or if I'm doing this wrong but...

In my package.json I've added:
"@primer/react": "primer/react#pk/exports",.

But then I get an import error:
Module not found: Can't resolve '@primer/react' in '/workspaces/search/src'

I also can't see a the lib-esm folder in ./node_modules/@primer/react that is defined in exports.

UPDATE: @siddharthkp explained me that we don't support pointing to branches right now and I need to use the generated id however the same error still happens.

siddharthkp · 2022-01-05T10:13:42Z

@pksjce Should we add IconButton to drafts as well?

siddharthkp · 2022-01-05T10:28:11Z

Update: Aww, tried to use this with webpack and it doesn't pick it up automatically :( (I think it works on codesandbox because it uses sandpack instead of webpack)

pksjce · 2022-01-06T03:47:51Z

@siddharthkp - IconButton is already in there

Also yeah, this exports syntax seems to not be fully supported by webpack 5 and not at all supported in webpack 4. I wonder how the other bundlers will react to this either. Will investigate more.

Until then import {..} from '@primer/react/lib-esm/drafts' is what will work unfortunately.

maximedegreve · 2022-01-06T10:46:44Z

Sounds good. Before we close this issue can we make sure we update all our docs to have those new instructions on how to import those components?

siddharthkp · 2022-01-06T11:23:48Z

can we make sure we update all our docs to have those new instructions on how to import those components?

I can create a PR :)

package.json

Try conditional subpaths Change tsconfig files Add package.json hack to drafts

pksjce · 2022-02-01T09:06:17Z

@siddharthkp , after much trial and error, I seem to have fixed this PR to make it backward compatible with the lib-esm folder imports. Adding

    "./lib-esm/*": {
      "node": ["./lib/*.js","./lib/*/index.js"],
      "default": ["./lib-esm/*.js","./lib-esm/*/index.js"]
    }

seems to have done the trick.
I tested this in memex in this codespace and in a nextjs app too.
I have also updated the documentation for the files in https://github.com/primer/react/pull/1785/files

siddharthkp

Let's gooooo!

Dismiss sounds so haughty lol. I think I've made the requested changes! Want to merge them!

Invalid typescript version makes `npm ci` fail in the latest npm npm/cli#4363 Merge conflict was introduced in primer#1771

Invalid typescript version makes `npm ci` fail in the latest npm npm/cli#4363 Merge conflict was introduced in #1771

pksjce requested review from siddharthkp and maximedegreve January 5, 2022 07:39

pksjce self-assigned this Jan 5, 2022

pksjce added the skip changeset This change does not need a changelog label Jan 5, 2022

pksjce marked this pull request as ready for review January 5, 2022 07:42

pksjce requested a review from a team January 5, 2022 07:42

siddharthkp approved these changes Jan 5, 2022

View reviewed changes

maximedegreve approved these changes Jan 5, 2022

View reviewed changes

maximedegreve self-requested a review January 5, 2022 09:59

maximedegreve previously requested changes Jan 5, 2022

View reviewed changes

pksjce force-pushed the pk/exports branch from e0e9c93 to c2edf37 Compare January 14, 2022 06:58

github-actions bot had a problem deploying to Preview January 14, 2022 06:58 Failure

github-actions bot deployed to Preview January 14, 2022 07:29 View deployment

siddharthkp reviewed Jan 14, 2022

View reviewed changes

package.json Outdated Show resolved Hide resolved

pksjce force-pushed the pk/exports branch from 9b2369e to b76b649 Compare January 17, 2022 07:43

github-actions bot deployed to Preview January 17, 2022 07:43 View deployment

github-actions bot deployed to Preview January 17, 2022 08:07 View deployment

github-actions bot deployed to Preview January 17, 2022 08:32 View deployment

github-actions bot deployed to Preview January 17, 2022 10:27 View deployment

github-actions bot deployed to Preview January 17, 2022 13:15 View deployment

pksjce mentioned this pull request Jan 17, 2022

Unable to use package with Next.js: ERR_REQUIRE_ESM #1762

Closed

github-actions bot deployed to Preview January 18, 2022 09:30 View deployment

pksjce added 3 commits February 1, 2022 19:28

Add exports to package.json

dfa66a4

Try conditional subpaths Change tsconfig files Add package.json hack to drafts

Add lib-esm deep path to exports

cac7048

This actually works

f3f490a

pksjce force-pushed the pk/exports branch from 1549f0d to f3f490a Compare February 1, 2022 08:28

github-actions bot had a problem deploying to Preview February 1, 2022 08:29 Failure

Adjust draft paths

cb1a3f1

github-actions bot deployed to Preview February 1, 2022 08:43 View deployment

In case of directories, we need to go to index.js

0dca8ea

github-actions bot deployed to Preview February 1, 2022 08:58 View deployment

Update documentation to reflect the drafts link

40366cf

github-actions bot deployed to Preview February 1, 2022 09:05 View deployment

siddharthkp self-assigned this Feb 1, 2022

siddharthkp added the react label Feb 1, 2022

pksjce requested a review from maximedegreve February 2, 2022 05:45

Merge branch 'main' into pk/exports

cbcc092

github-actions bot deployed to Preview February 2, 2022 05:46 View deployment

siddharthkp approved these changes Feb 4, 2022

View reviewed changes

Merge branch 'main' into pk/exports

5940a97

github-actions bot deployed to Preview February 7, 2022 09:06 View deployment

pksjce enabled auto-merge (squash) February 7, 2022 09:15

pksjce removed the request for review from maximedegreve February 7, 2022 09:29

pksjce merged commit 1088ee3 into main Feb 7, 2022

pksjce deleted the pk/exports branch February 7, 2022 09:30

This was referenced Feb 14, 2022

ModuleNotFoundError: Could not find module in path: '<path/file>' relative to '<path/file>' codesandbox/codesandbox-client#6172

Open

ModuleNotFoundError: Could not find module in path "" relative to "" codesandbox/codesandbox-client#6473

Closed

wraithgar added a commit to wraithgar/react that referenced this pull request Feb 17, 2022

chore(package-lock): remove git conflict, invalid versions

65fbd12

Invalid typescript version makes `npm ci` fail in the latest npm npm/cli#4363 Merge conflict was introduced in primer#1771

wraithgar mentioned this pull request Feb 17, 2022

chore(package-lock): remove git conflict, invalid versions #1869

Merged

siddharthkp pushed a commit that referenced this pull request Feb 17, 2022

chore(package-lock): remove git conflict, invalid versions (#1869)

b22a795

Invalid typescript version makes `npm ci` fail in the latest npm npm/cli#4363 Merge conflict was introduced in #1771

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can now export from @primer/react/drafts #1771

Can now export from @primer/react/drafts #1771

pksjce commented Jan 5, 2022 •

edited

Loading

changeset-bot bot commented Jan 5, 2022 •

edited

Loading

github-actions bot commented Jan 5, 2022 •

edited

Loading

pksjce commented Jan 5, 2022 •

edited

Loading

siddharthkp left a comment

maximedegreve left a comment •

edited

Loading

siddharthkp commented Jan 5, 2022

siddharthkp commented Jan 5, 2022 •

edited

Loading

pksjce commented Jan 6, 2022

maximedegreve commented Jan 6, 2022

siddharthkp commented Jan 6, 2022

pksjce commented Feb 1, 2022

siddharthkp left a comment

Can now export from @primer/react/drafts #1771

Can now export from @primer/react/drafts #1771

Conversation

pksjce commented Jan 5, 2022 • edited Loading

Screenshots

Merge checklist

changeset-bot bot commented Jan 5, 2022 • edited Loading

⚠️ No Changeset found

github-actions bot commented Jan 5, 2022 • edited Loading

size-limit report 📦

pksjce commented Jan 5, 2022 • edited Loading

Update

siddharthkp left a comment

Choose a reason for hiding this comment

maximedegreve left a comment • edited Loading

Choose a reason for hiding this comment

siddharthkp commented Jan 5, 2022

siddharthkp commented Jan 5, 2022 • edited Loading

pksjce commented Jan 6, 2022

maximedegreve commented Jan 6, 2022

siddharthkp commented Jan 6, 2022

pksjce commented Feb 1, 2022

siddharthkp left a comment

Choose a reason for hiding this comment

pksjce commented Jan 5, 2022 •

edited

Loading

changeset-bot bot commented Jan 5, 2022 •

edited

Loading

github-actions bot commented Jan 5, 2022 •

edited

Loading

pksjce commented Jan 5, 2022 •

edited

Loading

maximedegreve left a comment •

edited

Loading

siddharthkp commented Jan 5, 2022 •

edited

Loading