エラーが

マイ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); 
    } 
});

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

私は間違って何をしていますか？

出典

2016-05-03 Shamoon

facebook.pngノード（およびベルベル）が理解できないファイルをロードしようとしています。 require('someFile')を実行すると、ファイル内のJavaScriptが評価されます。したがって、babel/nodeはPNG画像をJavaScriptファイルとして評価しようとしています。

const companyHero = '../assets/images/facebook.png'のいずれかを実行するか、ファイルfs.readFileSync('../assets/images/facebook.png')を読み取り、画像データのbase64データにbackgroundImageプロパティを設定します。

ファイルがサーバー側でレンダリングされ、ページが読み込まれる前に会社のロゴを読み込む必要がないため、前者の方が優れている可能性があります。

出典

2016-05-03 20:42:34

どちらもうまくいかないと思っています。自分の資産に 'webpack'を使っているので、' require 'する必要があると思います。第二に、私は 'webpack'ingしてから' fs.readFile'するべきではないと思います。 – Shamoon

'* .png'ファイル用にローダーが設定されていますか？それが私の第二の関心事です。私はあなたがwebpackを使用していることに気づいた。 'webpack.config.js'を投稿できますか？ –

私は 'png'の' url-loader'を持っています。しかし、私がサーバサイドを走っているので、 'node' /' babel'はそれを読んでいますか？ – Shamoon

答えて

関連する問題