Server side rendering with create-inferno-app

Question

I am attempting to set up a server-side implementation of create-inferno-app. So, i initially run the create-inferno-app to create a sample project and run the npm start run and everything looks fine. This is my index.js

import { render } from 'inferno';
import App from './App';
render(<App />, document.getElementById('root'));

and this is App.js

import { renderToString } from 'inferno-server';
import './App.css';

const App = function({ color = 'red', name }) {
  return (
    <div style={{ color }}>
      Hello
      <span>{name}</span>
    </div>
  );
}
export default renderToString(<App color="blue" name="world" />)

I get an error TypeError: type is not a function

So how should i use the renderToString method in create-inferno-app ?

Answer 1

This import App from './App'; is importing this export default renderToString(<App color="blue" name="world" />) from your app.js.

You want to have your files like this:

index.js

import { render } from 'inferno';
import App from './App';
render(<App />, document.getElementById('root'));

app.js

import './App.css';

App = function({ color = 'red', name }) {
  return (
    <div style={{ color }}>
      Hello
      <span>{name}</span>
    </div>
  );
}
export default App

server.js

import { renderToString } from 'inferno-server';
import App from './App';
cosnt appAsString = renderToString(<App color="blue" name="world" />)