Node.js集成Prismic报错Prismic.getApi is not a function修复

• 无框架搭建Node.js站点集成Prismic时，执行代码终端抛出错误：TypeError: Prismic.getApi is not a function
• 站点首页可正常访问，/about路由对应页面加载失败
• 项目基于Express + Pug开发，核心依赖为@prismicio/client、prismic-dom，原核心代码如下：

require('dotenv').config()

console.log(process.env.PRISMIC_ENDPOINT, process.env.PRISMIC_CLIENT_ID)

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

const Prismic = require('@prismicio/client')
const PrismicDOM = require('prismic-dom')

const initApi = req => {
  return Prismic.getApi(process.env.PRISMIC_ENDPOINT, {
    accessToken: process.env.PRISMIC_ACCESS_TOKEN,
    req
  })
}
const handlelinkResolver = doc => {
// Define the url depending on the document type
// if (doc.type === 'page'){
//  return '/page/' + doc.uid;
// } else if (doc.type === 'blog_post'){
//  return '/blog/' + doc.uid;
//  }
// Default to homepage
  return '/'
}

app.use((req, res, next) => {
  res.locals.ctx = {
    endpoint: process.env.PRISMIC_ENDPOINT,
    linkResolver: handlelinkResolver
  }

  res.locals.PrismicDOM = PrismicDOM

  next()
})

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

app.get('/', async (req, res) => {
  res.render('pages/home')
})

app.get('/about', async (req, res) => {
  initApi(req).then((api) => {
    api.query(
      Prismic.Predicates.at('document.type', 'about')
    ).then(response => {
      console.log(response)
      res.render('pages/about')
    })
  })
})

app.get('/personaggi', (req, res) => {
  res.render('pages/personaggi')
})

app.get('/detail/:uid', (req, res) => {
  res.render('pages/detail')
})

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

当前安装的@prismicio/client为v6及以上新版本，该版本存在不兼容API变更：

• 旧版静态方法Prismic.getApi已被移除，统一使用createClient方法初始化客户端实例
• 查询谓词Predicates不再挂载于导入的Prismic对象上，需从包内单独解构引入

修改依赖引入和初始化、查询逻辑，修正后核心代码如下：

require('dotenv').config()

const express = require('express')
const app = express()
const path = require('path')
const port = 3000
// 新版本从包中解构需要的方法
const { createClient, Predicates } = require('@prismicio/client')
const PrismicDOM = require('prismic-dom')

const initApi = req => {
  // 替换旧的getApi调用为createClient
  return createClient(process.env.PRISMIC_ENDPOINT, {
    accessToken: process.env.PRISMIC_ACCESS_TOKEN,
    req
  })
}
const handlelinkResolver = doc => {
  return '/'
}

app.use((req, res, next) => {
  res.locals.ctx = {
    endpoint: process.env.PRISMIC_ENDPOINT,
    linkResolver: handlelinkResolver
  }
  res.locals.PrismicDOM = PrismicDOM
  next()
})

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

app.get('/', (req, res) => {
  res.render('pages/home')
})

app.get('/about', async (req, res) => {
  try {
    const api = await initApi(req)
    // 直接使用解构出来的Predicates，不需要加Prismic前缀
    const response = await api.query(
      Predicates.at('document.type', 'about')
    )
    console.log(response)
    // 渲染页面时可将查询到的内容传入模板使用
    res.render('pages/about')
  } catch (err) {
    console.error('Prismic查询失败：', err)
    res.status(500).send('页面加载失败')
  }
})

app.get('/personaggi', (req, res) => {
  res.render('pages/personaggi')
})

app.get('/detail/:uid', (req, res) => {
  res.render('pages/detail')
})

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

补充说明：如果需要沿用旧版getApi写法，可以将@prismicio/client降级到v5版本，执行npm install @prismicio/client@5即可，更推荐适配新版API。

内容的提问来源于stack exchange，提问作者Niccolo Bianchi