Question

1。情况

我通过引用以下URL来实现“预览模式”。

Advanced Features: Preview Mode | Next.js

这行代码可以在构建时执行，而不会出现任何错误。

import markdownItPrism from "markdown-it-prism";

niconico25/hello-nihao - /pages/[slug].js#L3

但是，当我在Vercel的预览模式下访问以下URL时，在上面的行"Cannot find module 'prismjs/components/'中遇到错误。

http://hello-nihao.vercel.app/api/preview?slug=2020-06-03_relative-ref-to-img&draftKey=LyxfC_wVaj

完整的错误日志在这里。

[GET] /2020-06-03_relative-ref-to-img
16:17:47:12
2020-07-31T07:17:47.729Z    fe2e7192-9410-4ce9-a01c-36bf0884ec8a    ERROR   Unhandled error during request: Error: Cannot find module 'prismjs/components/'
Require stack:
- /var/task/node_modules/markdown-it-prism/build/index.js
- /var/task/.next/serverless/pages/[slug].js
- /var/task/now__launcher.js
- /var/runtime/UserFunction.js
- /var/runtime/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:957:15)
    at Function.Module._load (internal/modules/cjs/loader.js:840:27)
    at Module.require (internal/modules/cjs/loader.js:1019:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/var/task/node_modules/markdown-it-prism/build/index.js:10:42)
    at Module._compile (internal/modules/cjs/loader.js:1133:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Module.require (internal/modules/cjs/loader.js:1019:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/var/task/node_modules/markdown-it-prism/build/index.js',
    '/var/task/.next/serverless/pages/[slug].js',
    '/var/task/now__launcher.js',
    '/var/runtime/UserFunction.js',
    '/var/runtime/index.js'
  ]
}
2020-07-31T07:17:47.730Z    fe2e7192-9410-4ce9-a01c-36bf0884ec8a    ERROR   Uncaught Exception  {"errorType":"Error","errorMessage":"Cannot find module 'prismjs/components/'\nRequire stack:\n- /var/task/node_modules/markdown-it-prism/build/index.js\n- /var/task/.next/serverless/pages/[slug].js\n- /var/task/now__launcher.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js","code":"MODULE_NOT_FOUND","requireStack":["/var/task/node_modules/markdown-it-prism/build/index.js","/var/task/.next/serverless/pages/[slug].js","/var/task/now__launcher.js","/var/runtime/UserFunction.js","/var/runtime/index.js"],"stack":["Error: Cannot find module 'prismjs/components/'","Require stack:","- /var/task/node_modules/markdown-it-prism/build/index.js","- /var/task/.next/serverless/pages/[slug].js","- /var/task/now__launcher.js","- /var/runtime/UserFunction.js","- /var/runtime/index.js","    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:957:15)","    at Function.Module._load (internal/modules/cjs/loader.js:840:27)","    at Module.require (internal/modules/cjs/loader.js:1019:19)","    at require (internal/modules/cjs/helpers.js:77:18)","    at Object.<anonymous> (/var/task/node_modules/markdown-it-prism/build/index.js:10:42)","    at Module._compile (internal/modules/cjs/loader.js:1133:30)","    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)","    at Module.load (internal/modules/cjs/loader.js:977:32)","    at Function.Module._load (internal/modules/cjs/loader.js:877:14)","    at Module.require (internal/modules/cjs/loader.js:1019:19)"]}
Unknown application error occurred

2。复制（用于没有错误的本地环境）

git clone https://github.com/niconico25/hello-nihao
cd hello-nihao
yarn install
echo X_API_KEY=dcda770e-85dc-43eb-9308-49961ea0e6ea > .env.local
open http://127.0.0.1:3000/api/preview?slug=2020-06-03_relative-ref-to-img&draftKey=LyxfC_wVaj
yarn dev
# X_API_KEY is for free account and it has read permissions only.

3。复制（用于有错误的公共环境）

第1步。

git clone https://github.com/niconico25/hello-nihao
cd hello-nihao
vercel --build-env X_API_KEY=dcda770e-85dc-43eb-9308-49961ea0e6ea

步骤2。打开以下路径。

/2020-06-03_relative-ref-to-img

您可以毫无问题地看到页面。

步骤3。打开以下路径。

/api/preview?slug=2020-06-03_relative-ref-to-img&draftKey=LyxfC_wVaj

然后，您将被重定向到/ 2020-06-03_relative-ref-to-img，和“ 502：BAD_GATEWAY”可以选中。

步骤4。重新打开以下路径。

/2020-06-03_relative-ref-to-img

您再也看不到该页面，可以检查“ 502：BAD_GATEWAY”。

Vercel预览模式-错误：找不到模块'prismjs / components /'