'theme' prop in ReplacementVariableEditorStandalone.js is undefined

[hwinne]

Explanation

When trying to click Edit snippet in the Snippet Editor on the local Yoast Components page, an error gets thrown because the theme prop can not be found. The error gets thrown in javascript/packages/search-metadata-previews/src/snippet-editor/ReplacementVariableEditorStandalone.js. The theme prop is called in line 517: textDirectionality={ theme.isRtl ? "RTL" : "LTR" }

Error ReplacementVariableEditorStandalone.js?b1af:517 Uncaught TypeError: Cannot read property 'isRtl' of undefined

Component

Errored component

Recreate start the javascript dev server (javascript/apps/components --> yarn start) Go to the url and click the SnippetEditor tab. Click the Edit snippet button at the bottom of the page. Now the page should throw an error: Something went wrong. Please reload the page.

Technical decisions

Feedback?

[afercia]

Noticed this as well while working on https://github.com/Yoast/javascript/pull/380 see https://github.com/Yoast/bugreports/issues/563#issuecomment-544410208

Git bisect told me the first offending commit is https://github.com/Yoast/javascript/pull/350/commits/ab5c105fe54d7136f88a2d590e072dc5e7a992c3 from the PR Multi step progress component https://github.com/Yoast/javascript/pull/350 which upgraded styled-components in the apps/components/package.json from ^4.2.0 to ^4.3.2. Reverting the change to the package.json file fixes the error.

Not sure if there are specific reasons for the version upgrade though. /Cc @Xyfi

Looks like a few things did change in styled-components with regards to themes in the 4.3.0 version see https://github.com/styled-components/styled-components/blob/master/CHANGELOG.md v4.3.0 - 2019-06-05

• Fix theme prop for styled native components, also fixes theme in defaultProps for them.

(note: at a quick look there are more things changed not just the one mentioned in the changelog)