Rendering Blank #99

JPWallhorn · 2017-11-29T20:31:54Z

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.

<div data-hypernova-key="indexjs" data-hypernova-id="4d2cf94b-7e2b-4bea-8cf7-24f94af855ef"></div> <script type="application/json" data-hypernova-key="indexjs" data-hypernova-id="4d2cf94b-7e2b-4bea-8cf7-24f94af855ef"></script>

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);```

The text was updated successfully, but these errors were encountered:

magicmark · 2017-11-30T00:49:27Z

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

JPWallhorn · 2017-11-30T01:33:17Z

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 · 2017-12-03T02:22:04Z

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 · 2017-12-19T10:10:15Z

@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!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rendering Blank #99

Rendering Blank #99

JPWallhorn commented Nov 29, 2017 •

edited

Loading

magicmark commented Nov 30, 2017

JPWallhorn commented Nov 30, 2017

magicmark commented Dec 3, 2017 •

edited

Loading

codecringebinge commented Dec 19, 2017

Rendering Blank #99

Rendering Blank #99

Comments

JPWallhorn commented Nov 29, 2017 • edited Loading

magicmark commented Nov 30, 2017

JPWallhorn commented Nov 30, 2017

magicmark commented Dec 3, 2017 • edited Loading

codecringebinge commented Dec 19, 2017

JPWallhorn commented Nov 29, 2017 •

edited

Loading

magicmark commented Dec 3, 2017 •

edited

Loading