Ошибка при запуске babel-узла

Question

Ошибка при запуске babel-узла

3

Мой server.js:

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 использует 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;

Когда я пытаюсь запустить его с помощью babel-node server.js, я получаю:

/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 |

Что я делаю неправильно?

Shamoon 03 май 2016, в 23:14

Источник

Теги:

javascript

ecmascript-6

reactjs

node.js

babel

1 ответ

Ещё вопросы

Taylor Glaeser · Accepted Answer · 2016-05-03T21-40-00.000Z

Вы пытаетесь загрузить файл facebook.png, который не понимает node (и babel). Когда вы выполняете require('someFile'), JavaScript оценивается в файле. Итак, babel/node пытается оценить изображение PNG как файл JavaScript.

У вас есть два варианта: вы можете сделать либо const companyHero = '../assets/images/facebook.png', либо вы можете прочитать файл fs.readFileSync('../assets/images/facebook.png'), а затем установить свойство backgroundImage для данных base64 данных изображения.

Первый, вероятно, лучший вариант, поскольку вы создаете файловую серверную часть и не хотите загружать логотип компании до загрузки страницы.

Я не думаю , либо будет работать, я использую webpack для своих активов, так что я думаю , что нужно require его. Во-вторых, я не думаю, что я должен fs.readFile это, так как я в webpack
У вас есть загрузчик, настроенный для файлов *.png ? Это моя вторая забота. Я заметил, что вы используете веб-пакет. Можете ли вы опубликовать свой webpack.config.js ?
У меня есть url-loader для png . Но так как я работаю на стороне сервера, node / babel читает это?
Это моя забота. Я не использовал webpack на стороне сервера. Я сделаю некоторые исследования, хотя.
Спасибо @Taylor. Тейлор. Я терпеливо жду вашего ответа. xkcd.com/303