Encountering 'Unexpected token in JSON at position 0' Error When Using next-pwa with Next.js(将Next-pwa与Next.js一起使用时，在JSON中位置0遇到意外令牌错误)

转载作者：bug小助手更新时间：2023-10-27 20:45:01

26

4

Summary

I am encountering an 'Unexpected token ` in JSON at position 0' error when trying to run my Next.js project with next-pwa. The issue only occurs when I attempt to use next-pwa; without it, my project runs as expected.

在尝试使用Next-pwa运行我的Next.js项目时，我在JSON中的位置0遇到了‘意外标记’错误。只有当我尝试使用Next-pwa时才会出现该问题；如果没有它，我的项目将按预期运行。

Versions

next-pwa: "5.6.0"

next: "13.4.7"

How To Reproduce

Steps to reproduce the behavior:

重现行为的步骤：

Create a new Next.js project or use an existing one.

创建新的Next.js项目或使用现有项目。

Install dependencies: "next": "13.4.7" and "next-pwa": "5.6.0".

安装依赖项：“Next”：“13.4.7”和“Next-pwa”：“5.6.0”。

Add the following next.config.js:

添加以下next.config.js：

/** @type {import('next').NextConfig} */

// eslint-disable-next-line @typescript-eslint/no-var-requires
const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
})

module.exports = withPWA({
  reactStrictMode: true,
})

Run npm run dev.

运行npm run dev。

See the error in the console:

查看控制台中的错误：

> [PWA] Compile client (static)
> [PWA] Auto register service worker with: C:\project\node_modules\next-pwa\register.js    
> [PWA] Service worker: C:\project\public\sw.js   
> [PWA]   url: /sw.js
> [PWA]   scope: /
> [PWA] Build in develop mode, cache and 
precache are mostly disabled. This means 
offline support is disabled, but you can 
continue developing other functions in service worker.
> [PWA] Compile server
> [PWA] Compile server
- error Unexpected token ` in JSON at position 0
- wait compiling...
- error Unexpected token ` in JSON at position 0

Expected Behaviors

I expected the project to run smoothly with next-pwa enabled for PWA capabilities. However, I encounter an 'Unexpected token in JSON at position 0' error when runningnpm run dev`.

我预计该项目将顺利运行与下一个PWA启用PWA的能力。然而，当我运行npm run dev`时，我在JSON中的位置0遇到了意外的令牌错误。

Additional Context

In this project, both server-side and client-side fetch requests are being made with caching enabled. The issue seems to persist regardless of these operations, but it's worth noting as it might be related to the problem at hand.

在这个项目中，服务器端和客户端的FETCH请求都是在启用缓存的情况下发出的。不管这些操作如何，这个问题似乎仍然存在，但它值得注意，因为它可能与手头的问题有关。

Minimum repository to reproduce the error

https://github.com/LivioAlvarenga/pwa-next

https://github.com/LivioAlvarenga/pwa-next

I attempted to integrate the next-pwa library into my Next.js project to add PWA capabilities. I followed the documentation and set up my next.config.js as recommended. I expected the project to run smoothly with PWA support enabled. However, upon running npm run dev, I encountered an 'Unexpected token in JSON at position 0' error. This error only occurs when thenext-pwa` configuration is enabled. I tried debugging the code and checking all JSON files, but the issue persists.

我尝试将Next-pwa库集成到我的Next.js项目中，以添加PWA功能。我遵循文档并按照建议设置了我的next.config.js。我希望项目在启用PWA支持的情况下顺利运行。然而，在运行NPM run dev时，我遇到了一个错误：“位置0处的JSON中出现意外令牌”。仅当启用了ext-pwa`配置时，才会出现此错误。我尝试调试代码并检查所有JSON文件，但问题仍然存在。

更多回答

优秀答案推荐