记录一些报错记录

HelloWorldZ

发布于 2024-03-20 18:36:25

1430

发布于 2024-03-20 18:36:25

文章被收录于专栏：前端开发前端开发

前言

记录啥都记的那种 ~

2023.12.31

ERROR in ./src/icons/index.js 2:0-43
Module not found: Error: Can't resolve '@/components/SvgIcon' in 'C:\Users\86151\Desktop\Git本地仓库\mini-wyy\src\icons'
 @ ./src/main.js 7:0-23
webpack compiled with 1 error

在我的 ./src/icons/index.js 文件中，我试图从 ‘@/components/SvgIcon’ 导入一些内容，但是Webpack没能在我给出的路径找到该模块。

果然，是我拼写错了，看来不是 webpack 的配置问题。

2023.12.31

main.js:14 [Vue warn]: Unknown custom element: <CommonHeader> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <MainPanel> at src/views/MainPanel.vue
<App> at src/App.vue
<Root>

报错信息 Unknown custom element: <CommonHeader> 表示我在 MainPanel 组件中使用了一个名为 CommonHeader 的组件，但是并没有在 MainPanel 组件中进行注册。

基于组件化的 Vue.js，每个 Vue 组件需要在使用之前注册。Vue 提供了全局注册和局部注册两种方式：

全局注册

在入口文件（例如 main.js 或 main.ts）中，可以通过Vue.component(tagName, options) 来进行全局注册，之后就可以在项目的任何位置使用这个组件。例如全局注册 CommonHeader 组件：

import Vue from 'vue'
import CommonHeader from './components/CommonHeader.vue'

Vue.component('CommonHeader', CommonHeader)

局部注册

在每个 Vue 组件的 components 对象中注册其他组件，然后在该组件中使用。例如在 MainPanel 组件中注册 CommonHeader 组件：

import CommonHeader from './components/CommonHeader.vue'

export default {
  components: {
    CommonHeader
  }
}

我的 CommonHeader 不是异步组件，原来是我忘记了了给它注册了，悲痛了，又解决了一个无聊的 bug，嘻嘻。

2023.1.6

C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev>npm run serve

> onediv@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
10% building 2/2 modules 0 active(node:16592) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
10% building 2/4 modules 2 active ...ui-dev\node_modules\webpack\hot\dev-server.jsError: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:138:10)
    at module.exports (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\NormalModule.js:471:10)
    at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\NormalModule.js:503:5
    at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\NormalModule.js:358:12
    at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at runSyncOrAsync (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at Array.<anonymous> (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
10% building 2/5 modules 3 active ...组件库\vue-div-ui-dev\vue-div-ui-dev\src\main.jsnode:internal/crypto/hash:69
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:138:10)
    at module.exports (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\NormalModule.js:471:10)
    at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\NormalModule.js:503:5
    at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\NormalModule.js:358:12
    at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at Array.<anonymous> (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
    at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\graceful-fs\graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read/context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v20.5.0

哎哟喂，在运行Vue项目时出现了一些麻烦，报错信息怪怪的：“Error: error:0308010C:digital envelope routines::unsupported”，这是什么鬼？咋看都像是跳梁小丑在捣乱。不过别怕，瞧！这个报错信息，可能是因为我i把 Node.js 更新到了最新版，对吧？给自己点个赞，保持软件版本更新真是个好习惯！

但是，话又说回来，这个错误消息看起来像是来自 Node.js 的底层加密库：OpenSSL。原来是这个家伙搞的鬼啊。新版本的 Node.js 使用了最新版本的 OpenSSL，然后这个OpenSSL可能不支持我项目中使用到的某种加密算法。哎哟嘿，可真是让人头痛。

不过别急，首先，我先试试将 Node.js 降级到稍早一点的版本，嘿嘿，nvm 派上用场了

nvm install 14.17.0

nvm use 14.17.0

又继续报错了

PS C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev> npm run serve
ERROR: npm v10.2.5 is known not to run on Node.js v14.17.0. This version of npm supports the following node versions: `^18.17.0 || >=20.5.0`. You can find the latest version at https://nodejs.org/.

ERROR:
C:\Program Files\nodejs\node_global\node_modules\npm\node_modules\@npmcli\agent\lib\agents.js:105
options.lookup ??= this.#options.lookup
^^^

SyntaxError: Unexpected token '??='
at wrapSafe (internal/modules/cjs/loader.js:984:16)
at Module._compile (internal/modules/cjs/loader.js:1032:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
at Module.load (internal/modules/cjs/loader.js:933:32)
at Function.Module._load (internal/modules/cjs/loader.js:774:14)
at Module.require (internal/modules/cjs/loader.js:957:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:\Program Files\nodejs\node_global\node_modules\npm\node_modules\@npmcli\agent\lib\index.js:7:15)
at Module._compile (internal/modules/cjs/loader.js:1068:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
PS C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev>

似乎俺的操作还是让 Node.js 和 npm 之间出现了一些不和谐的情况。

这个报错主要告诉我，“你用的 npm 版本（v10.2.5）和 Node.js 版本（v14.17.0）不太配，他们俩在一起不能很好地工作。这个 npm 版本支持的 Node.js 版本要么是18.17.0以上，要么是20.5.0及以上版本。” 所以俺得升级一下npm，让 Node.js 和 npm 之间和谐相处。

升级 npm 的方法也很简单：

npm install -g npm@latest

这个命令会全局安装最新的 npm 版本。安装完成后，你可以运行 npm -v 来检查下新的 npm 版本。

困难再大，轮不到咱放弃，不就是个小bug嘛，让bug去头皮发麻！加油！

又继续报错了，太好了

C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev>npm install -g npm@latest
ERROR: npm v10.2.5 is known not to run on Node.js v14.17.0. This version of npm supports the following node versions: `^18.17.0 || >=20.5.0`. You can find the latest version at https://nodejs.org/.

ERROR:
C:\Program Files\nodejs\node_global\node_modules\npm\node_modules\@npmcli\agent\lib\agents.js:105
options.lookup ??= this.#options.lookup
^^^

SyntaxError: Unexpected token '??='
at wrapSafe (internal/modules/cjs/loader.js:984:16)
at Module._compile (internal/modules/cjs/loader.js:1032:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
at Module.load (internal/modules/cjs/loader.js:933:32)
at Function.Module._load (internal/modules/cjs/loader.js:774:14)
at Module.require (internal/modules/cjs/loader.js:957:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:\Program Files\nodejs\node_global\node_modules\npm\node_modules\@npmcli\agent\lib\index.js:7:15)
at Module._compile (internal/modules/cjs/loader.js:1068:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)

Node.js和npm这两家伙怎么又在闹别扭了？咱们可不可以好好相处，跳出这个无尽的误解循环呢？

这报错还是说现在的npm版本（v10.2.5）与Node.js的版本（v14.17.0）不太般配，这就涉及到一个问题呢，它们都是互相有依赖的，对方的版本发生变化，自身也得跟着调整。当你在降级 Node.js 的同时，可能还需要把 npm 也往回调一调。

最简单粗暴的方法，彻底卸载 Node.js 和 npm 后再重装。一般情况下装回来 Node.js 的时候，npm 也就装回来了，版本上也都会比较匹配。下面是在 windows 环境下的卸载步骤：

首先，打开你的“控制面板”，找到“安装/卸载程序”。
在列表里找到 Node.js，点击卸载。
然后我们还得确认一下，Node.js 是否从你的系统 PATH 中删除了。你可以打开一个命令行窗口，输入 ‘node’ 看看，如果它说找不到命令的话，那就对了。
到这 node 应该已经被你的电脑忘记了，然后我们还要记得把 npm 的缓存清理掉，打开命令行，输入 ‘npm cache clean -f’
最后，删除你电脑里存放全局包的地方，一般来说路径类似于 ‘C:\Users\你的用户名\AppData\Roaming\npm’ 和 ‘C:\Users\你的用户名\AppData\Roaming\npm-cache’

不不不，我不要这样，我和我的Node.js关系真是好到不能再好，都不舍得和它分开了，那就先试试看升级npm到最新版。

首先，打开PowerShell（命令提示符），以管理员身份运行。

接着运行以下命令安装"npm-windows-upgrade"模块。

npm install --global --production npm-windows-upgrade

然后，使用刚刚安装好的"npm-windows-upgrade"工具来升级npm。

npm-windows-upgrade

就选最新的版本就好了，然后静静等待它执行完。

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除

loader

组件库

npm

desktop

本文分享自作者个人站点/博客?前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

记录一些报错记录

记录一些报错记录

前言

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐