Question

我正在尝试使用简单的快递服务器运行SSR React（16.3.0）App。构建并运行babel-node server.js后，有关导入的PNG文件出现错误：

/home/dev/test/src/assets/bg.png:1 （函数（导出，需求，模块，__文件名，__ dirname）{PNG ^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Module._extensions..js (module.js:664:10)
    at Object.newLoader [as .js] (/home/dev/test/node_modules/pirates/lib/index.js:88:7)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)

这是我的server.js：

import express from 'express'
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import path from 'path'

import App from './src/components/App'

const app = express()
const port = 4000

const HTMLShell = (html) => `
  <!DOCTYPE html>
  <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>SSR React App</title>
      </head>
      <body>
          <div id="app">${html}</div>
          <script src="./app.min.js"></script>
      </body>
  </html>`

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

app.get('*', (req, res) => {
  let html = ReactDOMServer.renderToString(
    <App />
  )

  res.send(HTMLShell(html))
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

对于捆绑，我使用的是包裹。如何导入图像而不会出现此错误？

编辑：图片是通过以下方式导入的：

import bgHeader from '../assets/bg.png'

在SSR React App中导入图像时出错：“ SyntaxError：无效或意外的令牌'PNG”

0 个答案: