hypernova
hypernova copied to clipboard
airbnb
Rendering Blank
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"><!--{"name":"Hypernova The Renderer"}--></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);```
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.
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?
@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!
