question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

renderTarget not getting rendered on server in SSR

See original GitHub issue

Hello, I’m using TetherComponent in an SSR environment and I noticed, when I turned JS off to see my server rendered page, that the renderTarget prop and the items its taking are not rendered on the server. Is there a reason for this? I looked at the source and can’t seem to figure out why it wouldn’t be, but maybe I’m missing something. Here is my code, in case it helps, but I imagine that you’d be able to duplicate this without my code since there isn’t anything special about it (plus my code is obviously tailored to the project, but maybe you can spot something in it that I’m missing):

<TetherComponent
    key={tetherKey}
    className={tetherClasses}
    attachment="top left"
    targetAttachment="bottom left"
    constraints={[
        {
            to: 'window',
            pin: true
        }
    ]}
    renderTarget={ref => {
        return (
            <span ref={ref}>
                <TextInput
                    ref={node => { this._textInput = node; }}
                    name={name}
                    disabled={disabled}
                    defaultValue={selectedDate}
                    onFocus={this._onInputFocus}
                    icon={(useIcon)
                        ? <Icon name="calendar" />
                        : null
                    }
                    iconPosition="right"
                    autoFocus={autoFocus}
                    focus={focus}
                    placeholder={placeholder}
                    readOnly
                />
            </span>
        );
    }}
    renderElement={ref => {
        return showCalendar && (
            <DatePickerCalendar
                ref={ref}
                className={calendarClassName}
                onChange={this._onDateChange}
                selectedDate={this.state.selectedDate}
                disablePast={disablePast}
                disableBefore={disableBefore}
                disableAfter={disableAfter}
                overrideInitialMonthWithSelected={overrideInitialMonthWithSelected}
            />
        );
    }}
/>

This all works fine in the browser, by the way, and there is nothing special about TextInput, its just a wrapper for input to add some additional styling for our core UI components look and feel.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:15 (13 by maintainers)

github_iconTop GitHub Comments

1reaction
reintroducingcommented, May 6, 2019

Unit tests for the win. I got my question answered as to what would be broken by doing this and was able to circumvent it with the fixes in the PR. It’s now updated and the tests pass as they should.

1reaction
reintroducingcommented, May 6, 2019

FYI i’m looking into the test errors right now on that PR.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Server Side Rendering in React not being invoked
I have a simple React class that I want to convert to using Server Side Rendering but I can't get the initial component...
Read more >
Using Direct2D for Server-Side Rendering - Win32 apps
Describes using Direct2D for server-side rendering.
Read more >
How to Enable Server-Side Rendering for a React App
In this tutorial, you will initialize a React app using Create React App and then modify the project to enable server-side rendering.
Read more >
Using window in React SSR: The Complete Guide
You add Server-Side Rendering (SSR) to your React app and a terrifying “uncaught reference error” greets you: window is not defined.
Read more >
Tag: Server-side Rendering - somewhat abstract
Combining React Client and Render Server for SSR · ⚡️ ... Console output showing warning that says "Prop 'src' did not match" along ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found