Upgrading paste-core from 6.0.0 to 10.11.0

[tomtobac]

Hey team 👋

I am trying to clean up our role, removing some unused dependencies and upgrading others, and when I am running our tests i'm facing a weird errors, like:

TypeError: Cannot read property 'space40' of undefined

      153 |             BetaFeatureEnabledMock.mockReturnValue(true);
      154 |             server.use(...handlers);
    > 155 |             render(
          |             ^
      156 |                     <NotificationStoreProvider>
      157 |                             <ToasterStoreProvider>
      158 |                                     <SettingsContext.Provider value={RECORDINGS_SETTINGS_CONTEXT}>

I thought it was related to the design tokens (since I removed them as dependency, AFAIK it should come from @paste-core) but then I tried to install the latest version and I having the same issue... I have checked both providers and none of them are using design tokens :/

Another error is that now there is a bunch of console.error, like:

console.error
      Paste: "colorBorderLight" is a deprecated design token. It will be removed in the 2021.11.16 release of Paste

But we are not using any of there design tokens, at least, hardcoded.

Finally, the weird one is that a input that is expecting a string now it complains that is receiving a number. It's weird because it was working before the upgrade and typescript doesn't complain about type checking (numer !== string)

 FAIL  client/src/settings/rooms/components/__tests__/Settings.test.tsx (13.028 s)
  ● Settings › should allow us to change the room type and save it

    Warning: Failed prop type: Invalid prop `value` of type `number` supplied to `Input`, expected `string`.
        in Input (created by RoomTopology)
        in RoomTopology (created by Settings)
        in div (created by Context.Consumer)
        in Styled(div) (created by Box)
        in Box (created by Settings)
        in Settings (created by SettingsWithToaster)
        in ToasterStoreProvider (created by SettingsWithToaster)
        in div (created by Context.Consumer)
        in Styled(div) (created by L)
        in At (created by L)
        in L (created by SettingsWithToaster)
        in SettingsWithToaster

Here it's my pull request, I will try to figure out meanwhile but if you could have any clue or idea I would appreciate it! Thanks!

[nkrantz]

Hi @tomtobac, I'm checking with the rest of the team and will get back to you. Hang tight! Let us know here if you make any progress on your end.

[TheSisb]

Hi @tomtobac

TypeError: Cannot read property 'space40' of undefined

I can't tell where this code is in your project, but can you make sure it is being wrapped by the Theme.Provider? This error is saying that theme is undefined, so theme.space40 doesn't exist. My first hunch is that the Theme.Provider isn't wrapping this code. Is it in a portal for example?

Paste: "colorBorderLight" is a deprecated design token. It will be removed in the 2021.11.16 release of Paste

This shouldn't be breaking builds, but is worth upgrading anyways. Since introducing the dark theme, the token names ending with light and dark no longer made sense. We swapped them to weak and strong, respectively. You can see the token renaming mapping here: https://github.com/twilio-labs/paste/blob/main/packages/paste-core/core-bundle/CHANGELOG.md#920

Warning: Failed prop type: Invalid prop value of type number supplied to Input, expected string.

I'm not sure what caused this to silently fail in the past, but it reads like a valid error. I'd recommend following the stacktrace to see if you're setting <Input value={12} /> or similar. An easy fix is to wrap the value variable in a template string like <Input value={`${12}`}

[tomtobac]

hey @TheSisb, I figure it out! Thank you for the help!

TypeError: Cannot read property 'space40' of undefined

It was caused because some of my test component didn't get wrapped (as you mention it) into a <Theme.Provider>... My bad, it should be since the beginning but since it didn't complain before the upgrade I thought it was totally fine.

Warning: Failed prop type: Invalid prop value of type number supplied to Input, expected string.

This one I got confused since I thought it was thrown by the input that I was changing the value in the test but looks like it was another input that had a default value of a number. Even the input was set to type number it was throwing this error. Finally I make it work with the trick of the template string

<Input
  aria-describedby="maximumParticipantsLabel"
  id="maximumParticipants"
  name="maximumParticipants"
  data-s="maximumParticipants"
  type="number"
  onChange={handleMaximumParticipantsChange}
  required
  value={`${maximumParticipants}`}
/>