背景
在使用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
部署后是否可行。
版本已更新:
vuepress-theme-reco@2.0.0-beta.68
,使用该版本跑 cicd也成功了。
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’)
依赖信息:
"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 自动部署,只能等该主题作者后续更新版本后测试了。
后续更新…
后续更新
经过提交 issues, vuepress-theme-reco
目前已经更新版本到 2.0.0-beta.68
版本,本文中问题已解决。
目前使用以下依赖正常:
"devDependencies": {
"vuepress": "2.0.0-beta.67",
"vuepress-theme-reco": "^2.0.0-beta.68"
}