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.

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

Jump to bottom

fix: AIONAPFMWK-171: fix Hydration issues SSR on Paste Remix #2933

Merged
merged 5 commits into from
Jan 18, 2023
Merged

fix: AIONAPFMWK-171: fix Hydration issues SSR on Paste Remix #2933

merged 5 commits into from
Jan 18, 2023

Conversation

espipj
Copy link
Contributor

@espipj espipj commented Jan 11, 2023 •
edited
Loading

As reakit is not releasing a fix we've used patch-package to fix the reakit Portal build files. In the process changes from #2926 were reverted.

Also installed postinstall-postinstall package, see reason here: https://github.com/ds300/patch-package#why-use-postinstall-postinstall-with-yarn

Hopefully this fixes can be merged and released on the main reakit package in the following PR ariakit/ariakit#2198 and then we can revert this config

Some smaller fixes were made:

How to test:

  • Upgrade Paste Remix nextjs version to "^13"
  • Change the @twilio-paste/core to be a link to paste-core-bundle folder
  • build everything
  • run Paste Remix Dev

Contributing to Twilio

All third-party contributors acknowledge that any contributions they provide will be made under the same open-source license that the open-source project is provided under.

  • I acknowledge that all my contributions will be made under the project's license.

@changeset-bot
Copy link

changeset-bot bot commented Jan 11, 2023 •
edited
Loading

⚠️ No Changeset found

Latest commit: 8a8d94c

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

@eyerean eyerean mentioned this pull request Jan 16, 2023
Closed
1 task
@espipj espipj changed the title Fix/wrapup fix: AIONAPFMWK-171 Jan 16, 2023
@espipj espipj changed the title fix: AIONAPFMWK-171 fix: AIONAPFMWK-171: fix Hydration issues SSR on Paste Remix Jan 16, 2023
@espipj espipj marked this pull request as ready for review January 16, 2023 15:14
@espipj espipj requested a review from a team as a code owner January 16, 2023 15:14
@espipj espipj requested review from a user and removed request for a team January 16, 2023 15:14
Niznikr
Niznikr reviewed Jan 17, 2023
View reviewed changes
Copy link
Contributor

@Niznikr Niznikr left a comment

Choose a reason for hiding this comment

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

While this solution works for development I believe more work is needed to ensure paste-libraries has the patch applied when published. This approach is worth exploring.

@Niznikr Niznikr merged commit afb0a58 into twilio-labs:feat/react-18-new Jan 18, 2023
Niznikr pushed a commit that referenced this pull request Jan 20, 2023
@espipj @Niznikr
fix: AIONAPFMWK-171: fix Hydration issues SSR on Paste Remix (#2933)
955f48b 
* fix: betaBadge to show modal on useEffect, fixes hydration problem

* fix: storybook quiet mode script introduced here #230

* fix: prevent select showing options server-side which leads to hydration issues

* fix: using styled on Nextjs Link component (hydration issue)

* revert: adam fix reakit Portal #2926
Niznikr pushed a commit that referenced this pull request Feb 9, 2023
@espipj @Niznikr
fix: AIONAPFMWK-171: fix Hydration issues SSR on Paste Remix (#2933)
8606aee 
* fix: betaBadge to show modal on useEffect, fixes hydration problem

* fix: storybook quiet mode script introduced here #230

* fix: prevent select showing options server-side which leads to hydration issues

* fix: using styled on Nextjs Link component (hydration issue)

* revert: adam fix reakit Portal #2926
Niznikr pushed a commit that referenced this pull request Feb 9, 2023
@espipj @Niznikr
fix: AIONAPFMWK-171: fix Hydration issues SSR on Paste Remix (#2933)
1521e2d 
* fix: betaBadge to show modal on useEffect, fixes hydration problem

* fix: storybook quiet mode script introduced here #230

* fix: prevent select showing options server-side which leads to hydration issues

* fix: using styled on Nextjs Link component (hydration issue)

* revert: adam fix reakit Portal #2926
Niznikr pushed a commit that referenced this pull request Feb 10, 2023
@espipj @Niznikr
fix: AIONAPFMWK-171: fix Hydration issues SSR on Paste Remix (#2933)
ff6c57c 
* fix: betaBadge to show modal on useEffect, fixes hydration problem

* fix: storybook quiet mode script introduced here #230

* fix: prevent select showing options server-side which leads to hydration issues

* fix: using styled on Nextjs Link component (hydration issue)

* revert: adam fix reakit Portal #2926
SiTaggart pushed a commit that referenced this pull request Feb 22, 2023
@espipj @SiTaggart
fix: AIONAPFMWK-171: fix Hydration issues SSR on Paste Remix (#2933)
fb14811 
* fix: betaBadge to show modal on useEffect, fixes hydration problem

* fix: storybook quiet mode script introduced here #230

* fix: prevent select showing options server-side which leads to hydration issues

* fix: using styled on Nextjs Link component (hydration issue)

* revert: adam fix reakit Portal #2926
SiTaggart pushed a commit that referenced this pull request Feb 22, 2023
@espipj @SiTaggart
fix: AIONAPFMWK-171: fix Hydration issues SSR on Paste Remix (#2933)
7c5f3ed 
* fix: betaBadge to show modal on useEffect, fixes hydration problem

* fix: storybook quiet mode script introduced here #230

* fix: prevent select showing options server-side which leads to hydration issues

* fix: using styled on Nextjs Link component (hydration issue)

* revert: adam fix reakit Portal #2926
SiTaggart added a commit that referenced this pull request Feb 22, 2023
@Niznikr @andreasonny83
@espipj @adamb-92 @eyerean @SiTaggart @TheSisb
feat: add support for React 18 (#2965)
3c89fd8 
* build: add React18 Support (#2682)

* build: add React18 Support

Update packages dependencies to include React v18

* refactor: add PropsWithChildren pros

Add React.PropsWithChildren for compatibility with React v18

* chore: update React version on missing packages

* fix: added newer proptypes types (react 18) (#3)

* refactor(yarn.lock): update yarn.lock file

* chore: update eslint and React versions

* chore: fixing eslint issues

* WIP: Fix react fc typings (#5)

* fix: un-needed React.FC typing with no children

* fix: removing unknown from interface PropsWithChildren as not needed

* fix: types on the rest of the files

* fix(components): radio and button-group React18 fix

* fix: update React app tests

Co-authored-by: Pablo Espinosa <espipj@gmail.com>

* chore: upgrade react-helmet types

* [AIONAPFMWK-174]: refactor react-uid & React 18 useId (#2903)

* chore: added useUIDSeed custom using React useId method

(cherry picked from commit d39cdc9)

* fix: update yarn.lock file

* fix: react type version and include prop-type types (#2913)

* chore: upgraded @react-spring (#2914)

* fix: fix functionality of useUIDSeed and update tests (#2917)

* [AIONAPFMWK-170] Types Fix (#2915)

* chore: WIP updates on react 18  (#2868)

* chore: upgrade emotion libs

* chore: upgrade react-spring for animation lib

This reverts commit 62d59e8.

* chore: remove obsolete react imports

* chore: remove more react imports

* chore: fix types in TableOfContentsList (Scrollspy)

* chore: disable eslint rule for react imports

* chore: fix lint error

* chore: auto-fix lint warnings

* chore: removing un-used imports

Co-authored-by: Eirini Pappa <eptinea@gmail.com>
Co-authored-by: Eirini Pappa <epappa@twilio.com>

* fix: added back missing import (#2921)

* chore: update Storybook to v7 and use Vite (#2895) (#2922)

* chore: update to Storybook v7

* chore: remove old babel plugins

* chore: update to use vite

* fix: address build issue

* refactor: use TypeScript for SB files

* fix: gets builds to work

* fix: disable Chromatic on gatsby stories

* fix: mock gatsby exports

* refactor: output generic tokens as esm

* chore: add changeset

* ci: bump memory

* fix: remove barrel imports of prop-types

* fix: chat-log story structure

* chore: update changeset

* chore: update storybook

* docs: add comments

* fix: get env vars properly in vite

* fix: set profiling alias properly

* chore: update changeset

* chore: use separate changeset for tokens

* chore: include mainFields

* fix: only set mainFields for dev

* chore: remove flag

* fix: adjust test-storybook

* fix: wait for SB to load

* chore: delete empty package.json

* fix: don't use mainFields for test-runner

Co-authored-by: Robert Niznik <rniznik@twilio.com>

* fix: react 18 - fix reakit ssr issues with portals (#2926)

* fix: reakit ssr issues with portals

* chore: more detailed comments at top of reakti Portal file

* chore: remove unecessary exports from reakit library

* feat/react 18 fix tests for 16 and 17 (#2929)

* fix: broken tests with jest

* fix: update all '@testing-library/react-hooks' imports

* build: create new test directory with util methods to help with jest tests

* chore: linting update on test files

* chore: empty commit to test pipelines

* chore: re-introduce button tests

* chore: minor update to test pipelines

* fix: remove cache from pipelines

* fix: async issues with tooltip tests

* fix: additional async tests added for updated userEvent methods

* chore: trigger pipelines with empty commit

* fix: resolve remaining tests for react 18

* fix: re-introduce react import on paste-website files

* fix: increase timeout on failing test

* chore: split composable cell test into smaller tests

* fix: address issues with user event and fix root.render errors

* fix: react-dom tests

* chore: fix test using reactUID

* chore: add react 17 tests to github workflow

* chore: update comments and create react-dom monkey patch

* fix: fix broken tests from react dom patch

* chore: update react-dom helper method for tests

* chore: remove async from synchronous test

* chore: linting updates on tests

* feat: add react 18 as dependency on new components (#2941)

* fix: add react 18 as dependency on new packages

* fix: add disclaimer at top of yarn lock

* chore: upgrade react and react-router-dom in cra template (#2944)

* chore: ignore tsx check on react imports marked as unused (#2945)

* fix: AIONAPFMWK-171: fix Hydration issues SSR on Paste Remix (#2933)

* fix: betaBadge to show modal on useEffect, fixes hydration problem

* fix: storybook quiet mode script introduced here #230

* fix: prevent select showing options server-side which leads to hydration issues

* fix: using styled on Nextjs Link component (hydration issue)

* revert: adam fix reakit Portal #2926

* fix: use @niznikr/reakit for portal fix

* chore: update prettier format

* fix: get gatsby to build

* fix: update lockfile

* fix: delete old changesets

* fix: address dep issue

* fix: update snapshot

* fix: update comment style

* fix: ignore lint issues for patches

* chore: updates from rebase

* chore: upgrade to next 13 to fix hydration errors

* chore: fix date rendering

* chore: add changeset

* chore: add sharp

* chore: fix dep pins

* chore: remove resolution

* chore: pin versions

* chore: undo mock changes

* chore: update lock

* chore: update changeset

* chore: update forked reakit

* ci: wait for docsearch render

* fix: correct copy button double render

* ci: bump wait for double render

* chore: update reakit to include popover render fix

* chore: add changeset

* chore: switch to twilio namespaced reakit fork

* chore: new website image fix to be updated to next 13

* chore: update upgrade-guide.mdx

* fix: missing props with children type conversion

---------

Co-authored-by: Andrea Z <andreasonny83@gmail.com>
Co-authored-by: Pablo Espinosa <espipj@gmail.com>
Co-authored-by: Andrea Z <azornada@twilio.com>
Co-authored-by: adamb-92 <113509945+adamb-92@users.noreply.github.com>
Co-authored-by: Eirini Pappa <eptinea@gmail.com>
Co-authored-by: Eirini Pappa <epappa@twilio.com>
Co-authored-by: Si Taggart <me@simontaggart.com>
Co-authored-by: TheSisb <shadiisber@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@eyerean eyerean eyerean approved these changes

@Niznikr Niznikr Niznikr approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@espipj @eyerean @Niznikr