油猴插件对next.js 开发的影响
<h1 id="unhandled-runtime-error">Unhandled Runtime Error</h1><h1 id="typeerror-cannot-read-properties-of-null-reading-1">TypeError: Cannot read properties of null (reading '1')</h1>
<h3 id="错误再现">错误再现</h3>
<pre><code class="language-sh"># 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')
</code></pre>
<p>错误页面：</p>
<p><img src="https://gitee.com/dlpmmk/my-picture/raw/md-picture/images/2022/image-20221130190347738.png" alt="image-20221130190347738" loading="lazy"></p>
<h3 id="错误猜想">错误猜想</h3>
<h4 id="1next-依赖错误">1、next 依赖错误</h4>
<p>添加 next 包的时候，没有安装 <code>react</code> 和 <code>react-dom</code> 所以没有配置好依赖关系</p>
<p><strong>修复：</strong></p>
<ul>
<li>
<p>删除 <code>node_moudles</code> 文件夹，重新安装</p>
<pre><code class="language-sh">rm -rf node_moudles
yarn
</code></pre>
<p><strong>不可行</strong></p>
</li>
<li>
<p>重新创建一个项目，严格依照创建步骤</p>
<pre><code class="language-sh">rm -rf ./*
rm -rf ./.next
npm init
yarn add next react react-dom
</code></pre>
<p><strong>不可行</strong></p>
</li>
</ul>
<h4 id="2查看错误">2、查看错误</h4>
<p><img src="https://gitee.com/dlpmmk/my-picture/raw/md-picture/images/2022/image-20221130191350205.png" alt="image-20221130191350205" loading="lazy"></p>
<p><strong>错误：</strong></p>
<pre><code class="language-sh"># 获取sign失败 获取gtk失败
</code></pre>
<p>经过排查，不属于本项目错误，属于插件错误，关闭掉翻译插件即可。</p>
<p><img src="https://gitee.com/dlpmmk/my-picture/raw/md-picture/images/2022/image-20221130193256000.png" alt="image-20221130193256000" loading="lazy"></p>
<p><strong>拓展：</strong></p>
<p>该错误属于外部错误，在开发的过程中要尽量避免外部程序对项目的干扰。</p>
<p>但是翻译插件属于浏览英文网站必不可少的工具，每次在浏览项目页面的时候都要手动关闭它，实在是太麻烦。</p>
<p>所以，要对油猴插件进行设置网站匹配规则，排除翻译插件在特定的网站生效。</p>
<p>配置如下：</p>
<p>在插件设置界面找到如下界面，把排除的网站添加上去</p>
<p><img src="https://gitee.com/dlpmmk/my-picture/raw/md-picture/images/2022/image-20221130194849422.png" alt="image-20221130194849422" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/dlpmmk/p/16939603.html
頁:
[1]