bundle.jsはjavascriptの代わりにHTMLコードを表示します

express.jsを使用してreduxサーバー側のレンダリングを設定しようとしています。私はほぼセットアップhpweverでやっている、私はエクスプレスエクスプローラは、ブラウザでページをレンダリングするとき、私は以下のエラーを表示している Uncaught SyntaxError: Unexpected token <bundle.jsファイルです。私はソースタブで、bundle.jsが私のwebpackの代わりにHTMLコードを持っていることを理解しました。私はこれがエラーを引き起こしている問題だと思う。以下はbundle.jsはjavascriptの代わりにHTMLコードを表示します

は私が間違って

サーバーindex.js

renderFullPage.js

'use strict'; 

function renderFullPage(html, preloadedState) { 
    return ` 
    <!doctype html> 
    <html> 
     <head> 
     <title>Redux Universal Example</title> 
     </head> 
     <body> 
     <div id="root">${html}</div> 
     <script> 
      // WARNING: See the following for security issues around embedding JSON in HTML: 
      // http://redux.js.org/docs/recipes/ServerRendering.html#security-considerations 
      window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')} 
     </script> 
     <script type=text/javascript src="../../../build/bundle.js"></script> 
     </body> 
    </html> 
    ` 
} 

export default renderFullPage;

をつもり場所を見つけるために役立つだろうファイルです

handleRender.js

'use strict'; 

import React from 'react'; 
import { renderToString } from 'react-dom/server'; 
import { createStore } from 'redux'; 
import { Provider } from 'react-redux'; 
import renderFullPage from './renderFullPage.js'; 
import App from '../containers/App.js'; 
import rootReducer from '../reducers'; 

const handleRender = (req, res) => { 
    // Create a new Redux store instance 
    const store = createStore(rootReducer); 

    // Render the component to a string 
    const html = renderToString(
    <Provider store={store}> 
     <App /> 
    </Provider> 
); 

    // Grab the initial state from our Redux store 
    const preloadedState = store.getState(); 

    // Send the rendered page back to the client 
    res.send(renderFullPage(html, preloadedState)); 
} 

export default handleRender;

その他の情報が同じで必要な場合は私に知らせてください。前もって感謝します！！！

出典

2017-09-29 Sourav

あなたはバンドルファイルをブラウザに公開していません。あなたのスクリプトsrc ../../../build/bundle.jsは動作しません - そのファイルは、ローカルマシン上のそのパス上にあり、サーバ上にはありません。

app.use(express.static(path.join(__dirname, './build'), { maxAge: 30 * 60 * 60 * 24 * 1000 }));

そしてスクリプトのsrcを更新：サーバーindex.jsで

あなたは急行の静的リソースとしてビルドディレクトリを設定する必要があるファイルを<script type=text/javascript src="/bundle.js"></script>

出典

2017-09-29 07:08:36

それは働きました。ありがとうございました – Sourav

bundle.jsはjavascriptの代わりにHTMLコードを表示します

答えて

関連する問題