@vx/text width prop breaks w/ SSR

(I’m not actually sure if this has anything to do with SSR, but the problem presents only on fresh page loads in my nextjs project, so that’s normally the culprit.)

I’m calling the component like so:

 <Text
    scaleToFit
    width={25}
    x={9}
    textAnchor={'middle'}
    y={18}
    angle={-90}
 >
Some label
</Text>

On page load, however, the rendered styles on the <text> element are broken. specifically, the transform value is: matrix(Infinity, 0, 0, Infinity, -Infinity, -Infinity) rotate(-90, 9, 18)

The practical implication of this bad transform in my case is that text I’m trying to render vertically shows up w/ a horizontal orientation.

e.g. instead of this:

it renders this:

When hot reloading updates the bundle, however, the transform prop gets updated to a valid value, and the text renders as it ought to:

matrix(0.7368114063658365, 0, 0, 0.7368114063658365, 2.3686973427074713, 4.737394685414943) rotate(-90, 9, 18)

I thought maybe it was the memoization (i think?) pattern you’ve got going on in componentWillReceiveProps, so I tried shorting that by creating / passing a new style object on render, but no such luck.

[techniq]

@williaster we need to recalculate the word widths any time the children (i.e. text) or styles change so it needs to happen anytime the props change (although this will need to be changed to getDerivedStateFromProps in the future).

[brandonmp]

i was able to reproduce it in the docs by modifying text.js to this:

import React, { Component } from 'react';
import { Text } from '@vx/text';

export default () => (
    <div
        style={{
            display: 'flex',
            width: '90vw',
            height: '90vh',
            justifyContent: 'center',
            alignItems: 'center'
        }}
    >
        <svg width={500} height={200}>
            <Text
                scaleToFit
                width={25}
                x={250}
                textAnchor={'middle'}
                y={18}
                angle={-90}
            >
                This should be vertical
            </Text>
        </svg>
        <svg width={100} height={200}>
            <Text width={25} x={15} textAnchor={'middle'} y={25} angle={-90}>
                This is vertical
            </Text>
        </svg>
    </div>
);

here’s a live demo