文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >Next.js -应用程序错误:发生客户端异常

问Next.js -应用程序错误:发生客户端异常
EN

Stack Overflow用户
提问于 2021-12-28 12:34:38
回答 1查看 7.6K关注 0票数 1

我正在实现这个api。

当地的情况很好。但是，当我将它部署到生产/测试环境时，我得到

代码语言：javascript
运行
复制
Application error: a client-side exception has occurred (see the browser console for more information).

在console.log中：

代码语言：javascript
运行
复制
framework-c93ed74a065331c4bd75.js:formatted:4767 ReferenceError: easyPack is not defined
    at a.value (checkout-fb900c0cafcfc3f61693.js:1)
    at a.value (checkout-fb900c0cafcfc3f61693.js:1)
    at hu (framework-c93ed74a065331c4bd75.js:formatted:4977)
    at Li (framework-c93ed74a065331c4bd75.js:formatted:6115)
    at t.unstable_runWithPriority (framework-c93ed74a065331c4bd75.js:formatted:7861)
    at Wl (framework-c93ed74a065331c4bd75.js:formatted:2501)
    at Ti (framework-c93ed74a065331c4bd75.js:formatted:5904)
    at vi (framework-c93ed74a065331c4bd75.js:formatted:5619)
    at fi (framework-c93ed74a065331c4bd75.js:formatted:5411)
    at Gi (framework-c93ed74a065331c4bd75.js:formatted:6518)
uu @ framework-c93ed74a065331c4bd75.js:formatted:4767
a.componentDidCatch.n.callback @ framework-c93ed74a065331c4bd75.js:formatted:4901
fa @ framework-c93ed74a065331c4bd75.js:formatted:2780
hu @ framework-c93ed74a065331c4bd75.js:formatted:4979
Li @ framework-c93ed74a065331c4bd75.js:formatted:6115
t.unstable_runWithPriority @ framework-c93ed74a065331c4bd75.js:formatted:7861
Wl @ framework-c93ed74a065331c4bd75.js:formatted:2501
Ti @ framework-c93ed74a065331c4bd75.js:formatted:5904
vi @ framework-c93ed74a065331c4bd75.js:formatted:5619
(anonymous) @ framework-c93ed74a065331c4bd75.js:formatted:2525
t.unstable_runWithPriority @ framework-c93ed74a065331c4bd75.js:formatted:7861
Wl @ framework-c93ed74a065331c4bd75.js:formatted:2501
Ql @ framework-c93ed74a065331c4bd75.js:formatted:2521
Hl @ framework-c93ed74a065331c4bd75.js:formatted:2513
yi @ framework-c93ed74a065331c4bd75.js:formatted:5641
rs @ framework-c93ed74a065331c4bd75.js:formatted:6590
t.hydrate @ framework-c93ed74a065331c4bd75.js:formatted:7081
f.default.createElement.callbacks @ main-89e612c37cd79392e22d.js:1
ge @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
l @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
k @ main-89e612c37cd79392e22d.js:1
i @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
ce @ main-89e612c37cd79392e22d.js:1
se @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
l @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
k @ main-89e612c37cd79392e22d.js:1
i @ main-89e612c37cd79392e22d.js:1
Promise.then (async)
k @ main-89e612c37cd79392e22d.js:1
i @ main-89e612c37cd79392e22d.js:1
Promise.then (async)
k @ main-89e612c37cd79392e22d.js:1
i @ main-89e612c37cd79392e22d.js:1
Promise.then (async)
k @ main-89e612c37cd79392e22d.js:1
i @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
ue @ main-89e612c37cd79392e22d.js:1
t.initNext @ main-89e612c37cd79392e22d.js:1
457 @ main-89e612c37cd79392e22d.js:1
n @ webpack-adf3ef2afee18f8d2ced.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
n.O @ webpack-adf3ef2afee18f8d2ced.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
t @ webpack-adf3ef2afee18f8d2ced.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
Show 5 more frames


main-89e612c37cd79392e22d.js:1 ReferenceError: easyPack is not defined
    at a.value (checkout-fb900c0cafcfc3f61693.js:1)
    at a.value (checkout-fb900c0cafcfc3f61693.js:1)
    at hu (framework-c93ed74a065331c4bd75.js:formatted:4977)
    at Li (framework-c93ed74a065331c4bd75.js:formatted:6115)
    at t.unstable_runWithPriority (framework-c93ed74a065331c4bd75.js:formatted:7861)
    at Wl (framework-c93ed74a065331c4bd75.js:formatted:2501)
    at Ti (framework-c93ed74a065331c4bd75.js:formatted:5904)
    at vi (framework-c93ed74a065331c4bd75.js:formatted:5619)
    at fi (framework-c93ed74a065331c4bd75.js:formatted:5411)
    at Gi (framework-c93ed74a065331c4bd75.js:formatted:6518)
le @ main-89e612c37cd79392e22d.js:1
fn @ main-89e612c37cd79392e22d.js:1
value @ main-89e612c37cd79392e22d.js:1
a.componentDidCatch.n.callback @ framework-c93ed74a065331c4bd75.js:formatted:4903
fa @ framework-c93ed74a065331c4bd75.js:formatted:2780
hu @ framework-c93ed74a065331c4bd75.js:formatted:4979
Li @ framework-c93ed74a065331c4bd75.js:formatted:6115
t.unstable_runWithPriority @ framework-c93ed74a065331c4bd75.js:formatted:7861
Wl @ framework-c93ed74a065331c4bd75.js:formatted:2501
Ti @ framework-c93ed74a065331c4bd75.js:formatted:5904
vi @ framework-c93ed74a065331c4bd75.js:formatted:5619
(anonymous) @ framework-c93ed74a065331c4bd75.js:formatted:2525
t.unstable_runWithPriority @ framework-c93ed74a065331c4bd75.js:formatted:7861
Wl @ framework-c93ed74a065331c4bd75.js:formatted:2501
Ql @ framework-c93ed74a065331c4bd75.js:formatted:2521
Hl @ framework-c93ed74a065331c4bd75.js:formatted:2513
yi @ framework-c93ed74a065331c4bd75.js:formatted:5641
rs @ framework-c93ed74a065331c4bd75.js:formatted:6590
t.hydrate @ framework-c93ed74a065331c4bd75.js:formatted:7081
f.default.createElement.callbacks @ main-89e612c37cd79392e22d.js:1
ge @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
l @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
k @ main-89e612c37cd79392e22d.js:1
i @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
ce @ main-89e612c37cd79392e22d.js:1
se @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
l @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
k @ main-89e612c37cd79392e22d.js:1
i @ main-89e612c37cd79392e22d.js:1
Promise.then (async)
k @ main-89e612c37cd79392e22d.js:1
i @ main-89e612c37cd79392e22d.js:1
Promise.then (async)
k @ main-89e612c37cd79392e22d.js:1
i @ main-89e612c37cd79392e22d.js:1
Promise.then (async)
k @ main-89e612c37cd79392e22d.js:1
i @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
ue @ main-89e612c37cd79392e22d.js:1
t.initNext @ main-89e612c37cd79392e22d.js:1
457 @ main-89e612c37cd79392e22d.js:1
n @ webpack-adf3ef2afee18f8d2ced.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
n.O @ webpack-adf3ef2afee18f8d2ced.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
t @ webpack-adf3ef2afee18f8d2ced.js:1
(anonymous) @ main-89e612c37cd79392e22d.js:1
Show 7 more frames


main-89e612c37cd79392e22d.js:1 A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred

下面是我实现它的方法:在"Page“组件中，我在<Head>中加载了脚本

代码语言：javascript
运行
复制
import Head from "next/head";
 <Head>
  <script
    async
    src="https://geowidget.easypack24.net/js/sdk-for-javascript.js"
  ></script>
  <link
    rel="stylesheet"
    href="https://geowidget.easypack24.net/css/easypack.css"
  />
</Head>

在构成部分中：

代码语言：javascript
运行
复制
componentDidMount() {
....
    this.addInpostMap();
  }

  componentDidUpdate(prevProps) {
    if (!this.props.shipmentMethod && prevProps.shipmentMethod) {
      return;
    } else {
      if (this.props.shipmentMethod !== prevProps.shipmentMethod) {
        this.addInpostMap();
      }
    }
  }

  addInpostMap() {
    easyPack.init({});
    var map = easyPack.mapWidget("easypack-map", (point) => {
      // console.log(point);
      this.setState((x) => ({ ...x, paczkomat: point }));
    });
  }


render...

在localhost:3006上，一切都很好。脚本加载和逻辑工作。但是，当部署在活动服务器中时，该页面不会加载。

谁能帮助理解和解决这个问题？

reactjs
next.js
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-12-28 12:46:55

我猜easyPack应该通过window.easyPack I来访问

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/70507168

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档