vuepress@2.x 报错问题分享


背景

在使用vuepress@2.x 搭建博客项目时,使用 github actions部署时失败了很多次,踩过的坑汇总记录一下自己的学习过程,也希望可以帮助到其他同学。

打包时出现的错误

config.js配置遇到的问题

配置文件使用config.js正常配置后报错:
SyntaxError: Cannot use import statement outside a module
不能在模块外使用import语句

image.png

对于这个错误网上大多数解决方案都是这两种:

  • package.json 中设置字段 “type”:“module”
  • 使用 .mjs 的扩展名

于是我尝试解决…

在 package.json 中设置字段 报错

Error [ERR_REQUIRE_ESM]: require() of ES Module

image.png

意思是不支持require,如果你想用这个,那么变成import的写法,但是我的配置文件里用的就是 import 啊,于是删除 “type”:“module”

修改为 .mjs 问题

从 Node.js v13.2 版本开始,Node.js 已经默认打开了 ES6 模块支持。Node.js 要求 ES6 模块采用 .mjs 后缀文件名。
JavaScript 的两种模块:ES6 模块(ESM)、 CommonJS 模块(CJS)
CommonJS 模块使用 require() 和 module.exports
ES6 模块使用 import 和 export

直接修改 .js 为 .mjs 此时打包竟然没问题成功了,但是发现部署后的文件 404

image.png

image.png

可以看出来是路径问题,少一层 /docs/,但是我 config 配置文件里已经配置了 base: "/docs/"

我猜测是打包后(本地这么配置启动是没什么问题的)无法读取 .mjs 的文件,所以配置的 docs没生效。只能暂时放弃这个方案了。

todo…

在下面更换为.ts配置实践时,发现注释 yml文件中对 install缓存后,.mjs格式也可以正常打包,只不过源码报错 TypeError: Cannot read properties of undefined (reading 'replace'),导致不能继续测试部署后404问题。

等后续 vuepress-theme-reco@2.x作者更新版本后,再回来CICD测试这里修改为 .mjs部署后是否可行。

版本已更新:
vuepress-theme-reco@2.0.0-beta.68,使用该版本跑 cicd也成功了。

image.png

node版本过高问题

error:0308010C:digital envelope routines::unsupported

image.png

解决:
降低 node版本 18.X 改为 16.x后成功

修改为config.ts问题

配置文件修改为 config.ts尝试结果还是报错:
image.png

找不到从 xxx.mjs 导入的包 vuepress-theme-reco 主题

这个问题我也卡了很久,由于我一直是使用githun actions测试的,于是我关注到了yml文件,注意到了其中配置的 node_modulesinstall 的缓存。 果断注释,重新提交测试。

已经不报上图这个错误了,但是会报下面错误,别急继续往下看。

vuepress-theme-reco@2.x相关报错

TypeError: Cannot read properties of undefined (reading ‘replace’)

依赖信息:

    "vuepress": "2.0.0-beta.66",
    "vuepress-theme-reco": "^2.0.0-beta.67"

image.png

这里我使用最新 vuepress-theme-reco2.0.0-beta.67 版本打包时报错,由于先开始没有仔细看错误信息,一直认为是版本问题导致,所以就频繁切换版本尝试未果,浪费了大把时间。

仔细阅读报错信息 TypeError: formatISODate(...).split is not a function 最后在 node_modules下找到对于源码位置,发现是源码中这个方法在一个 timeline文件中调用时传参 undefined 导致了这个错误(已提 issues

所以只能本地修改源码后打包测试成功:

image.png

而想使用 github actions 自动部署,只能等该主题作者后续更新版本后测试了。

后续更新…

后续更新

经过提交 issues, vuepress-theme-reco目前已经更新版本到 2.0.0-beta.68 版本,本文中问题已解决。

目前使用以下依赖正常:

  "devDependencies": {
    "vuepress": "2.0.0-beta.67",
    "vuepress-theme-reco": "^2.0.0-beta.68"
  }

文章作者: 尖椒土豆sss
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 尖椒土豆sss !
 上一篇
用ts重构基于rollup的npm包踩坑记录 用ts重构基于rollup的npm包踩坑记录
前言在之前实现了一个npm包 我的第一个npm包:plugin-zip-pack - 掘金 (juejin.cn) 但源码是js编写的,最近想的使用ts进行重构一下。 最开始直接将源码中原来文件都修改为 .ts后缀后遇到了一系列报错问题、以
2024-04-17 尖椒土豆sss
下一篇 
GitHub Actions 体验CICD GitHub Actions 体验CICD
背景工作后,经常听闻同行提到自动化部署、CICD等关键词。出于好奇也去网上看了一些相关资料得以了解。由于我还没接触到有相关配置的项目,但自己也一直想尝试体验一下这个东西。但奈何自己相关知识匮乏,水平有限,之前尝试过几次最终以失败告终。 再加
2023-09-07
  目录
L
O
A
D
I
N
G