next.js 中引入vconsole，报错 ReferenceError: XMLHttpRequest is not defined

最新推荐文章于 2024-06-11 15:55:47 发布
最新推荐文章于 2024-06-11 15:55:47 发布
阅读量829 收藏 8
点赞数 7
文章标签： javascript 前端 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34403164/article/details/136014029
版权
文章讨论了在服务端渲染环境中，由于缺少XMLHttpRequest对象导致的问题。作者提供了在_app.tsx文件中直接引入vconsole库的解决方案，并附上了相关脚本代码。
摘要由CSDN通过智能技术生成

原因好像是服务端渲染没有没有XMLHttpRequest 对象，

解决办法：

_app.tsx中直接引入，不用import

<Script
          src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"
          onLoad={() => {
            new VConsole();
          }}
        ></Script>
风花一世月
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ReferenceError: XMLHttpRequest is not defined(解决)
qq_52317104的博客
09-25 1万+
ReferenceError: XMLHttpRequest is not defined 在JS 脚本中，运行 var xhttp = new XMLHttpRequest；报错，提示：ReferenceError: XMLHttpRequest is not defined； 原因：xmlhttprequest 不是Node 内置的，需要单独安装： 安装命令：npm install xmlhttprequest var xhr=new XMLHttpRequest() 改成 var XMLHttpReq
移动端调试神器——vconsole.js
08-07
我们在开发手机版网页的时候，常常会出现下面的情景： (1) 开发时，在自己电脑上运行得好好的，在手机上打开就挂了，但是手机上又看...vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板。 你值得拥有~
[next.js]移动端调试vconsole
ZhuAiQuan的博客
06-11 564
直接在这个layout的useEffect里加载vconsole (这里只会在开发环境里启用vconsole，基于webpack/turbopack的tree shake功能，在正式环境是不会把vconsole打包进来的) 然后使用import导入三方库并初始化。新建一个tsx文件，在这个tsx组件的useEffect里复制上面的代码（这里也是为了防止正式环境把vconsole打包进去），然后在入口的layouts里使用dynamic动态导入这个组件并挂载到页面上；先安装vconsole。
ReferenceError: XMLHttpRequest is not defined （解决方案）
weixin_45836027的博客
04-24 4224
首先查看有没有安装xmlhttprequest ,如果没有，先安装 npm install xmlhttprequest (xmlhttprequest小写) 然后，需要引入，不引入的话同样报错 在创建对象之前引入 ： var XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest; 这时候，在创建对象 const xhr = new XMLHttpRequest() 运行的时候就不会报这个错啦 ...
涉及到部署到测试环境 不好调试的 应该引入vConsole工具方便定位
hzxOnlineOk的博客
08-25 575
博主最近在做一个H5静态定位签到功能，提供给APP混合调用，作为其子应用。 由于出现bug的现象繁多（收到其他bug的影响以及部分JS是在APP外壳注入的），导致我迟迟无法定位到问题所在 引入vConsole后，多点console.log，再在vConsole上执行一些变量，看是否因为异步注入导致没有接收到值 再次强调，真机调试移动端H5，强烈建议引入vConsole！！！ ...
如何在前端项目中引入vconsole
rememberyf的博客
12-25 1224
介绍：vconsole是腾讯公司针对移动端开发为前端开发人员设计的一款轻量、可扩展的调试面板，为手机web页面量身设计，帮助开发者更为便捷的开发调试工作。 具体引入的步骤如下： 1、cnpm install vconsole --save 安装vconsole插件 2、import VConsole from ‘vconsole’ 在项目的入口文件进行插件的引用 3、new VConsole 或者 let vconsole = new VConsole(); export default vconso
【Vue项目】安装引入使用vconsole（生产环境不显示）
Allen_Sushi首页
09-17 7190
vue2中安装引入使用vconsole（生产环境不显示）
ReferenceError: webpack is not defined
xiaoxiamimm的博客
11-27 6523
刚才引入 new webpack.BannerPlugin('版权归牛XX公司所有') 报错： [webpack-cli] ReferenceError: webpack is not defined at Object.<anonymous> (E:\workplace\vuework\webpack\04-webpack配置vue\webpack.config.js:76:13) at Module._compile (E:\workplace\vuework\webpa
ReferenceError: VConsole is not defined
最新发布
08-02
ReferenceError: VConsole is not defined 这是一个JavaScript错误，它通常发生在尝试使用一个未在当前作用域或模块中声明或导入的对象或变量"VConsole"时。VConsole一般是指Vue.js中的一个调试工具，如果你在代码中...
vconsole.js
06-06
移动端调试神器，调试工具，vconsole.js，下载既用，简单方便， 平时在web应用开发过程中，我们可以console.log去输出一些信息，但是在移动端，也就是在手机上，console.log的信息我们是看不到的。 这种情况下，可以...
node：ReferenceError: XMLHttpRequest is not defined
a232884c的博客
03-31 1294
1 前言node执行如下代码： 报错提示：ReferenceError: XMLHttpRequest is not defined2 解决2.1 可能原因是没有安装xmlhttprequest 使用淘宝镜像源安装成功： package-lock.json：2.2 安装xmlhttprequest后需要引入上述直接定义方式为如下： 安装后node执行依然报错提示：ReferenceError: XMLHttpRequest is not defined，是因为还需要引入使用。使用node命令，那么需要使用C
vconsole.min.js，移动端控制台插件
佳人与北的博客
07-17 5349
/*! * vConsole v3.0.0 (https://github.com/Tencent/vConsole) * * Tencent is pleased to support the open source community by making vConsole available. * Copyright (C) 2017 THL A29 Limited, a Tencen...
nodejs报ReferenceError: XMLHttpRequest is not defined解决
07-26 1205
报错ReferenceErrorXMLHttpRequestisnotdefined。安装包sudonpminstall-gxmlhttprequest。
vconsole调试工具报错及解决方案
一呀一转转圈
04-27 1771
第一次遇见调试工具报错，无法正常使用，后来经过真机调试，发现是服务端开启了安全模式openSecurity=true, vconsole无法写入style,导致js报错。vue h5项目，想在手机上调试，装了vconsole调试工具，打包部署后发现在苹果手机上显示正常，在安卓手机上显示异常：底部显示了。2. 将npm install vconsole 改为 通过cdn方式引入vconsole, 样式通过style src 引入。1. 关闭openSecurity。
JS——使用VConsole
qq812457115的博客
05-20 3038
【npm】 //安装 npm install vconsole //使用 import VConsole from 'vconsole'; const vConsole = new VConsole(); 【cdn】 <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
JS · 工具：vConsole.js移动端调试
weixin_42091247的博客
10-28 1709
在做微信公众号开发的时候，时常要调微信接口。在电脑浏览器上无法模拟，出现问题很难排查。只能通过电脑连接手机去查看log，这儿介绍一个快捷的方法，在手机前端页面直接查看打印信息。 vConsole前端调试面板 vConsole是一款由微信公众平台前端团队打造的前端调试面板，专治手机端看log难题。 方法一： 安装vConsole npm install vconsole 引入 import VConsole from 'vconsole'; const vConsole = new VConsole();
h5 手机端真机调试引用vconsole
weixin_43453916的博客
03-02 480
yarn add vconsole 在 vue的main的文件夹 下面 if (process.env.NODE_ENV === 'development') { const VConsole = require('vconsole') // eslint-disable-next-line const my_console = new VConsole() } ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值