react app not rendering after transpiling with webpack (BabelJS)

问题

I am trying to deploy my react app to heroku, but when using heroku local, only my html renders:

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>TimeStamp Microservice</title>
   <style>
     .App {
        text-align: center;
        position: relative;
        max-width: 900px;
        margin: 0 auto;
        margin-top: 16%;
     }

     .button {
        margin-top: 1%;
     }

     input {
        text-align: center;
     }  
   </style>
 </head>
 <body>
   <div id="root"></div>
   <script src="app.js"></script>
 </body>
</html>

I am confused since I believe I am using the correct rendering statement at the bottom of my react code:

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
const isTimeStamp = require('./isTimeStamp.js')

class App extends Component {
  constructor() {
      super()
      this.state = {input: undefined, output: ""}
  }

  printToScreen(json) {
      //Check that input was valid
      if (json.natural === null) {
          //Print error message
          const errorMsg = "Please enter valid timestamp or date (p.s. don't forget to add a comma in your dates)"
          this.setState({output: errorMsg})
      }
      //If input is a timestamp, return number
      else if (isTimeStamp(this.state.input)) {
          this.setState({output: json.natural})
      }
      else {this.setState({output: json.unix})}
  }

  handleSubmit() {   
    //Create correct url
    const url = "https://dry-river-67944.herokuapp.com/" + this.state.input
    fetch(url)
      .then(response => response.json())
      .then(json => this.printToScreen(json))
      .catch(error => console.log(error))
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <h2>Timestamp Microservice</h2>
        </div>
        <p className="App-intro">
          Converts a Unix timestamp (2365145258) to a natural language date (December 16, 2016) and vice versa.
        </p>
        <input type="text" onChange={(event) => this.setState({input: event.target.value})}/> <br/>
        <button className="button" onClick={() => this.handleSubmit()}> Submit </button>
        <p> {this.state.output} </p>
      </div>
    );
  }
}

function run() {
    ReactDOM.render(<App/>, document.getElementById('root'));
}

if (window.addEventListener) {
    window.addEventListener('DOMContentLoaded', run);
} 
else {
    window.attachEvent('onload', run);
}

(The conditional statments are to check that the html is fully loaded before the component is rendered)

Also, I am using webpack with BabelJS to transpile my code:

module.exports = {
  context: __dirname,
  entry: "./src/App.js",

  output: {
    filename: "app.js",
    path: __dirname + '/assets'
  },
  module: {
    loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel',
          query: {
            presets: ['react']
          }
        }
      ]
  }
}

And am using express.js for my server:

var timestampMicroServ = require('./src/integration.js')
var express = require("express")
var path = require("path")

var app = express()

app.get("/:input", (req, res) => {
    //Assign headerVal to Access-Control-Allow-Origin response header
    res.set('Access-Control-Allow-Origin', "*")

    //Send response data
    var convertedData = timestampMicroServ(req.params.input)
    res.end(convertedData)
})

//Serve react app when requested the index page
app.get("/", express.static(path.join(__dirname, '/TMS-Front-End/assets')))

//Find out what port will be listened on
app.listen(process.env.PORT)

Does anyone know of a solution???

Thanks!

来源：https://stackoverflow.com/questions/41368147/react-app-not-rendering-after-transpiling-with-webpack-babeljs

标签

javascript

reactjs

heroku

Webpack