Error when running babel-node

Question

My server.js is:

var path = require('path');
var express = require('express');
var app = express();
var PORT = process.env.PORT || 8080;
var React = require('react');
var ReactDOMServer = require('react-dom/server');
var companyComponent = require('./src/components/company');

// using webpack-dev-server and middleware in development environment
if(process.env.NODE_ENV !== 'production') {
  var webpackDevMiddleware = require('webpack-dev-middleware');
  var webpackHotMiddleware = require('webpack-hot-middleware');
  var webpack = require('webpack');
  var config = require('./webpack.config');
  var compiler = webpack(config);

  app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
  app.use(webpackHotMiddleware(compiler));
}

app.use(express.static(path.join(__dirname, 'dist')));

app.use(handleRender);

function handleRender(req, res) {
  res.send(renderFullPage());
}

function renderFullPage() {
  var html = ReactDOMServer.renderToString(companyComponent());
  console.log(html);
  return `
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Run The Call</title>
      <link href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
    </head>
    <body>
      <div id='root'/>
    </body>
    <script src="/bundle.js"></script>
  </html>
`
}

app.listen(PORT, function(error) {
  if (error) {
    console.error(error);
  } else {
    console.info("Listening on port %s", PORT);
  }
});

My companyComponent uses ES6:

import React, { Component } from 'react';
const companyHero = require('../assets/images/company.jpg');
import Footer from './footerComponent'
import Navbar from './navbarComponent';

class Company extends React.Component {
  render() {
    let heroStyle = {backgroundImage: 'url(' + companyHero + ')'};
    return (
      <div className="wrapper company-page">
        <Navbar type={"transparent"}/>
        <div className="jumbotron" style={heroStyle}>
          <div className="container-fluid">
            <div className="row">
              <div className="col-md-6 col-md-offset-3 text-center">
                <h1>ABOUT THE COMPANY</h1>
              </div>
            </div>
          </div>
        </div>

      <Footer />
      </div>
    )
  }
}
export default Company;

When I try to run it with babel-node server.js , I get:

/Users/myuser/n/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:614
      throw err;
      ^

SyntaxError: /Users/myuser/rtc/src/assets/images/icons/facebook.png: Unexpected characte
r '�' (1:0)
> 1 | �PNG
    | ^
  2 |
  3 |

What am I doing wrong?

Answer 1

You're attempting to load a file facebook.png that node (and babel) don't understand. When you execute require('someFile') , the JavaScript in the file is evaluated. So babel/node is attempting to evaluate a PNG image as a JavaScript file.

You have two options, you can do either const companyHero = '../assets/images/facebook.png' or you can read the file fs.readFileSync('../assets/images/facebook.png') and then set the backgroundImage property to the base64 data of the image data.

The former is probably the better option as you're rendering a file server-side and don't want to have to load the company logo before the page loads.

Error when running babel-node

Question

1 answers

solution1
3 ACCPTED 2016-05-03 20:42:34

Error when running babel-node

Question

1 answers

solution1 3 ACCPTED 2016-05-03 20:42:34

solution1
3 ACCPTED 2016-05-03 20:42:34