Rendering Blank - Githubissues

JPWallhorn commented 6 years ago

Hey guys,

I might be just doing something wrong but when I implemented the hypernova setup, all I see is a blank screen. This is the current source code that is getting rendered. I'm using Ruby on Rails & React.

`

My index.erb.html has the following code: <%= render_react_component('index.js', :name => 'Hypernova The Renderer') %>

The react app is leveraging Webpack and the React app is fully in the 'public' folder of my Rails app. I've tried it with the index.js and AppProvider.js file in the rails configuration.

Here's my index.js source code:


import React from 'react';
import ReactDOM from 'react-dom';
import AppProvider from './app_provider';

ReactDOM.render(<AppProvider />, document.querySelector('#app'));

and this is my app_provider.js


import {renderReact} from 'hypernova-react';
import { persistStore } from 'redux-persist';
import { Provider } from 'react-redux';
import Routes from './routing/routes';
import styles from './index.scss';
import globalStyles from './styles/font-face.css';
import { store } from './util/store.js';

import LoadingSpinner from './components/Loading/loading';

class AppProvider extends Component {
    constructor(){
        super();
        this.state = {
            rehydrated: false
        };
    }
    componentDidMount(){
        persistStore(store, { blacklist: ['pagination', 'notification', 'properties', 'blog', 'navigation', 'position', 'landing', 'tagbar', 'auction', 'rainworx'] }, () => {
            this.setState({rehydrated: true});
        })
    }
    render(){
        if(!this.state.rehydrated){
            return <LoadingSpinner />
        }
        return (
            <Provider store={store}>
                <Routes />
            </Provider>
        );
    }
}

export default renderReact('AppProvider.js', AppProvider);```

magicmark commented 6 years ago

@JPWallhorn do you get any errors/messages in the console at all?

JPWallhorn commented 6 years ago

No, this is what I see when I look at the page source


  | <div data-hypernova-key="indexjs" data-hypernova-id="942ebcf7-b85e-4df6-906b-7c13d5f212fc"></div>
-- | --
  | <script type="application/json" data-hypernova-key="indexjs" data-hypernova-id="942ebcf7-b85e-4df6-906b-7c13d5f212fc"><!--{"name":"Hypernova The Renderer"}--></script>
  |

The console is blank.

magicmark commented 6 years ago

I notice that you're directly calling ReactDOM.render - I believe this is unnecessary as per the docs here https://github.com/airbnb/hypernova-react#usage. (Calling renderReact will call ReactDOM.render underneath the hood.)

Side note: I also notice you refer to index.js in your index.erb.html, but you export your component as AppProvider.js. Should these be the same?

codecringebinge commented 6 years ago

@JPWallhorn

I just had this exact issue (at least in terms of the symptoms/output) and the solution was moving the <%= javascript_include_tag 'application' %> tag below the </body> tag in the views/layout/index.html.erb file (it was originally in the <head> tag, but I noticed that the "Simple" Hypernova example app has it just below the </body> tag, and once I changed the order, it worked as expected).

I hope that helps and good luck!

airbnb / hypernova

Rendering Blank #99