错误：解析 with 表达式主体时出错

Question

我现在正在制作一个包含大量 webpack 依赖项、express.js 和 pug.js 的 Web 开发课程。当我安装 pug.js 时，我陷入困境，它没有在浏览器上呈现，并且我在浏览器和终端中都收到此错误：

Error: Error parsing body of the with expression
    at addWith (C:\Users\Name\Desktop\building-an-immersive-creative-website-from-scratch-without-frameworks\floema\node_modules\with\lib\index.js:50:29)
    at Compiler.compile (C:\Users\Name\Desktop\building-an-immersive-creative-website-from-scratch-without-frameworks\floema\node_modules\pug-code-gen\index.js:139:12)
    at generateCode (C:\Users\Name\Desktop\building-an-immersive-creative-website-from-scratch-without-frameworks\floema\node_modules\pug-code-gen\index.js:32:37)
    at compileBody (C:\Users\Name\Desktop\building-an-immersive-creative-website-from-scratch-without-frameworks\floema\node_modules\pug\lib\index.js:199:74)
    at Object.exports.compile (C:\Users\Name\Desktop\building-an-immersive-creative-website-from-scratch-without-frameworks\floema\node_modules\pug\lib\index.js:269:16)
    at handleTemplateCache (C:\Users\Name\Desktop\building-an-immersive-creative-website-from-scratch-without-frameworks\floema\node_modules\pug\lib\index.js:242:25)
    at Object.exports.renderFile (C:\Users\Name\Desktop\building-an-immersive-creative-website-from-scratch-without-frameworks\floema\node_modules\pug\lib\index.js:454:10)
    at Object.exports.renderFile (C:\Users\Name\Desktop\building-an-immersive-creative-website-from-scratch-without-frameworks\floema\node_modules\pug\lib\index.js:444:21)
    at View.exports.__express [as engine] (C:\Users\Name\Desktop\building-an-immersive-creative-website-from-scratch-without-frameworks\floema\node_modules\pug\lib\index.js:493:11)
    at View.render (C:\Users\Name\Desktop\building-an-immersive-creative-website-from-scratch-without-frameworks\floema\node_modules\express\lib\view.js:135:8)

我对此非常坚持，因为课程中没有人有同样的错误，而且我不知道如何解决它。我还添加了 app.js 文件中的代码

const express = require('express')
const app = express()
const path = require('path')
const port = 3000

app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'pug')

app.get('/', (req, res) => {
  res.render('index', {
    meta: {
      data: {
        title: 'Floema',
        description: 'Metadata'
      }
    }
  })
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

pug文件在开头

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport" content="width=device-width, initial-scale=1.0")

    base(href="/")

    title Floema

    meta(name="description" content="Floema beautiful jewlery.")

    link(rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png")
    link(rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png")
    link(rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png")
    link(rel="manifest" href="/site.webmanifest")
    link(rel="mask-icon" href="/safari-pnned-tab.svg" color:"#ff3a00")
    meta(name="msapplication-TileColor" content="#f4d8cc")
    meta(name="theme-color" content="#f4d8cc")

    meta(property="og:type" content="website")
    meta(property="og:title" content=meta.data.title)
    meta(property="og:description" content=meta.data.description)
    meta(property="og:image" content=meta.data.image ? meta.data.image.url : '')

    meta(name="twitter:card" content="summary_large_image")
    meta(name="twitter:title" content=meta.data.title)
    meta(name="twitter:description" content=meta.data.description)
    meta(name="twitter:image" content=meta.data.image ? meta.data.image.url : '')

    link(href="main.css" rel="stylesheet")

  body
    .preloader
      p.preloader__text
        | The surprise of what is possible
        | to make with a simple
        | and thin thread.

      .preloader__number 0%

我需要你需要其他东西，请随时问我，我真的很想继续课程。 谢谢 卡罗

Answer 1

此问题是由不正确的 Pug 语法引起的。我遇到了同样的问题并通过更正语法解决了它。在本例中，颜色属性被错误地写为

color:"#ff3a00"

，但它应该是

color="#ff3a00"

。虽然之前的回复中已经解决了这个问题，但评论中的解释并不是特别清晰或易于理解。