首页 > 其他分享 >油猴插件对next.js 开发的影响

油猴插件对next.js 开发的影响

时间:2022-11-30 20:25:30浏览次数:40  
标签:插件 错误 dom next react js 页面

Unhandled Runtime Error

TypeError: Cannot read properties of null (reading '1')

错误再现

# 1. 安装 next
yarn add next
# 2. 配置页面 pages

# 3. 启动项目
##  当启动项目的时候,发现 next 是依赖 react 和 react-dom 来运行的

# 4. 安装 react react-dom

# 5. 安装完成后,运行页面发现错误
## Unhandled Runtime Error
## TypeError: Cannot read properties of null (reading '1')

错误页面:

image-20221130190347738

错误猜想

1、next 依赖错误

添加 next 包的时候,没有安装 reactreact-dom 所以没有配置好依赖关系

修复:

  • 删除 node_moudles 文件夹,重新安装

    rm -rf node_moudles
    yarn 
    

    不可行

  • 重新创建一个项目,严格依照创建步骤

    rm -rf ./* 
    rm -rf ./.next
    npm init
    yarn add next react react-dom
    

    不可行

2、查看错误

image-20221130191350205

错误:

# 获取sign失败 获取gtk失败

经过排查,不属于本项目错误,属于插件错误,关闭掉翻译插件即可。

image-20221130193256000

拓展:

该错误属于外部错误,在开发的过程中要尽量避免外部程序对项目的干扰。

但是翻译插件属于浏览英文网站必不可少的工具,每次在浏览项目页面的时候都要手动关闭它,实在是太麻烦。

所以,要对油猴插件进行设置网站匹配规则,排除翻译插件在特定的网站生效。

配置如下:

在插件设置界面找到如下界面,把排除的网站添加上去

image-20221130194849422

标签:插件,错误,dom,next,react,js,页面
From: https://www.cnblogs.com/dlpmmk/p/16939603.html

相关文章

  • 记录--用JS轻松实现一个录音、录像、录屏的工具库
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言最近项目遇到一个要在网页上录音的需求,在一波搜索后,发现了react-media-recorder这个库。今天就跟......
  • Eclipse加入Maven Integration for Eclipse插件后创建Maven工程
    将更改为:进入此页面此时目录结构为:加入依赖错误消失最后的目录结构为:......
  • vue08首页导航和左侧菜单+mockjs介绍以及使用+登陆注册跳转
    目录​​1.mockjs​​​​1.1mockjs介绍​​​​1.2mockjs使用步骤​​​​1.2.1安装mockjs依赖​​​​1.2.2在项目中引入mockjs​​​​1.2.3创建目录和文件​​​......
  • 数据库编程——MongoDB json
    在学习数据库编程总结了笔记,并分享出来。有问题请及时联系博主:​​Alliswell_WP​​,转载请注明出处。09-数据库编程day05(mongodbjson)目录:一、学习目标二、复习三、作业四......
  • nodejs 服务器监听的主机名称导致的本地前端代理错误
    问题前端本地开发服务器一直是正常的,直到某一天启动时出现这个错误:代理服务的配置如下:(http://localhost:8000跑着一个本地启动的nodejs服务器。)const{createProxyMid......
  • IDEA使用EasyCode插件
    1、目的快速生成controller、mapper、service、serviceImpl、mappers.xml文件2、安装EasyCode插件File|Settings|Plugins搜索EasyCode,点击安装即可。3、配置模板......
  • 通过js将RGB888转RGB565
    什么是RGB565通常我们前端接触的图片,R,G,B三个通道,每个通道占8位,一个字节,用数字表示是0-255。比如我们常写的CSS:rgb(255,255,255),这样一个像素需要3个字节来表示。但是在......
  • jsp文件分片上传,断点续传
    ​ javaweb上传文件上传文件的jsp中的部分上传文件同样可以使用form表单向后端发请求,也可以使用ajax向后端发请求    1. 通过form表单向后端发送请求    ......
  • Next.js dynamic router path bug All In One
    Next.jsdynamicrouterpathbugAllInOnemarkdowndaynamicrouterbugwhybelowcodenotworkatall?dynamicrouterpathscreenshot//[title].jsexpor......
  • js检测页面性能指标
    检测获取fp、fcp、lcp、cls性能指标:window.monitor={isWinLoad:false,observer:null,sessionValue:0,sessionEntries:[],data:{fp:0,f......