Fatal编程技术网
  • javascript/
  • Javascript &引用；意外标记<&引用；执行react redux服务器端渲染时

Javascript &引用；意外标记<&引用；执行react redux服务器端渲染时

javascript reactjs redux

Javascript &引用；意外标记<&引用；执行react redux服务器端渲染时,javascript,reactjs,redux,Javascript,Reactjs,Redux,我最近尝试使用express+react+redux 以下是对我的问题的简要描述： 我已经成功地将react组件呈现到HTML，并通过express的res.send（renderFullPage（HTML，initialState））将其发送回客户端。html在浏览器端正确呈现。但是，我在浏览器控制台中不断遇到此错误： 未捕获的语法错误：意外标记

我最近尝试使用
express
+
react
+
redux

以下是对我的问题的简要描述：

我已经成功地将react组件呈现到HTML，并通过express的
res.send（renderFullPage（HTML，initialState））
将其发送回客户端。html在浏览器端正确呈现。但是，我在浏览器控制台中不断遇到此错误：


未捕获的语法错误：意外标记<。。。bundle.js:1`在此处输入代码`

当我点击bundle.js:1进一步深入问题时，我看到：


（十）

我通过在package.json中运行
npm run devServer
命令来启动节点服务器：

```

```

server/bin/server.js：

```

```

server/server.js

```

```

我是否做了任何导致此问题的错误操作？

为脚本标记“
code goes here”添加一个空的src属性。

参考：-

我有完全相同的问题。不知道发生了什么事情通常是404发生的，对吧？那么，您是否正在将404响应页面流式传输到bundle.js中？？还有，
在这里输入code
实际上是什么？啊，我想你是对的。谢谢！我同意。检查bundle.js是否在build目录中。@Bryan Huang，你能谈谈如何解决这个问题吗？ 
{
  "name": "universal",
  "version": "1.0.0",
  "author": "Bryan Huang",
  "description": "nodejs isomorphic package",
  "main": "index.js",
  "scripts": {
    "test": "mocha --compilers js:babel-core/register --recursive",
    "devServer": "nodemon server/bin/server.js",
    "buildServer": "babel server/server.js -d build",
    "startServer": "node build/server/server.js",
    "lint": "eslint . --ext .js --ext .jsx",
    "build": "webpack",
    "dev": "webpack-dev-server"
  }
  ...
}

const fs =  require('fs')
const path = require('path')
const config =  JSON.parse(fs.readFileSync(path.resolve(__dirname, '../..', '.babelrc'), 'utf-8'))
require('babel-register')(config)
require(path.resolve(__dirname, '../server.js'))

import 'babel-polyfill'
import path from 'path'
import React from 'react'
import { renderToString } from 'react-dom/server'
import renderFullPage from './utils/render'
import { createStore } from 'redux'
import { Provider }  from 'react-redux'
import App from '../src/containers/App'
import reducers from '../src/reducers'
import express from 'express'

const app = express()

const staticPath = path.resolve(__dirname, '../..', 'static')

// serve static files.
app.use('/static', express.static(staticPath))

// Fired everytime the server side receives a request.
app.use(handleRender)
app.use(renderFullPage)

function handleRender (req, res) {
  // Create store.
  const store = createStore(reducers)

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

  // Get the initial state.
  const initialState = store.getState()

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


app.listen(3004, () => {
  console.log('listening in port 3004')
})

export default function renderFullPage (html, initialState) {
  return `<!doctype html>
    <html>
      <head>
        <title>Universal App</title>
      </head>
      <body>
        <div id='app'>${html}</div>
        <script>
          window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}
        </script>
        <script src='build/bundle.js'></script>
      </body>
    </html>
  `
}