Building from HTML source

[kristofferh]

Hey there!

I can't seem to generate static pages when I have an HTML page in the hierarchy -- it's completely possible that I'm doing something wrong.

In /pages if I create a new file (or folder with an index.html file), say test.html with the contents:

---
title: Hello

---
<p>hi</p>

When I run gatsby build it fails and throws.

Error: TypeError: Cannot read property 'data' of undefined

[KyleAMathews]

So this is not a very obvious at all error but since I just ran into it when playing around with the default starter, I'm pretty sure the reason is you're missing a react.js wrapper for HTML content.

Try creating a file at wrappers/html.js with the following in it and see what happens.

import React from 'react'

module.exports = React.createClass({
  propTypes () {
    return {
      router: React.PropTypes.object,
    }
  },
  render () {
    console.log(this.props.route.page)
    const post = this.props.route.page.data
    return (
      <div className="markdown">
        <h1>{post.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.body }}/>
      </div>
    )
  },
})

[KyleAMathews]

An action item here would be to add a check in Gatsby if the necessary wrapper exists and if not, throw a very clear error.

[kristofferh]

Ah, yeah, that works (minus the {data.title} part in your example). Thanks! It's not totally clear that you have to add your own wrapper, perhaps updating the examples would be a good idea? Either way, I'm closing this :)

[KyleAMathews]

Oops on the data.title (fixed that above).

Yeah, I removed wrappers from core a while ago but it is super confusing when they're missing. I might add them back and improve documentation around what wrappers are and how to override them (which most projects will want to.

That or ensure all the official starters have included "starter" wrappers for each supported content type e.g. md, html, and soon toml, yaml, and json.