背景

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

打包时出现的错误

config.js配置遇到的问题

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

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

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

于是我尝试解决...

在 package.json 中设置字段报错

Error $ERR_REQUIRE_ESM$ : require() of ES Module

意思是不支持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

可以看出来是路径问题，少一层 /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 部署后是否可行。

node版本过高问题

error:0308010C:digital envelope routines::unsupported

解决：

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

修改为config.ts问题

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

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

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

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

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

TypeError: Cannot read properties of undefined (reading 'replace')

依赖信息：

js 复制代码

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

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

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

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

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

后续更新...

vuepress@2.x 使用时报错问题分享

背景