Electron app打包后启动报错:Cannot find module 'reflect-metadata'

1,652 阅读2分钟

前言

这是一系列Electron app开发过程中的踩坑之旅,特此记录下来,分享给大家,每一篇都是一个坑和填坑解决方案!

问题

执行打包命令后,打出来的app启动就报错,错误信息如下:

A JavaScript error occurred in the main process 
Uncaught Exception: 
Error: Cannot find module 'reflect-metadata' 
Require stack: 
-/Applications/aDemo.app/Contents/Resources/app.asar/node_modules/@nestjs/core/index.js 
- /Applications/aDemo.app/Contents/Resources/app.asar/background.js 
- at Module._resolveFilename (internal/modules/cjs/loader.js:887:15) 
at Function.n._resolveFilename (electron/js2c/browser_init.js:257:1128) 
at Module._load (internal/modules/cjs/loader.js:732:27) 
at Function.f._load (electron/js2c/asar_bundle.js:5:12913) 
at Module.require (internal/modules/cjs/loader.js:959:19) at require (internal/modules/cjs/helpers.js:88:18) 
at Object.(/Applications/aDemo.app/Contents/Resources/app.asar/node_modules/@nestjs/core/index.js:11:1) at Module._compile (internal/modules/cjs/loader.js:1078:30) 
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10) 
at Module.load (internal/modules/cjs/loader.js:935:32)

分析

按照错误提示,是表达在打包后的app.asar/node_modules中没有找到reflect-metadata这个模块,但是我在开发的node_modules目录中找到了这个,但是在app.asar/node_modules中确实没有找到reflect-metadata,所以我怀疑是打包时没有将reflect-metadata打包进app.asar/node_modules

所以猜测如果需要将这个依赖打包进去是不是需要一些额外的配置?按照这个方向在网上找了一圈都没有找到相关配置的说明,于是我在Github上提交了一个issue,然后只能一点点啃官网的英文文档了!

GIthub issue链接:github.com/nklayman/vu…

官方文档链接:nklayman.github.io/vue-cli-plu…

解决方案

在官方文档中找到了类似的说明,并且按照说明测试通过,官方文档说明片段如下:

Native modules are supported and should work without any configuration, assuming nodeIntegration is enabled. If you get errors, you may need to set the native dependency as an webpack external (opens new window). It should get found automatically, but it might not. To do this, use the externals option:

// vue.config.js 
module.exports = { 
    pluginOptions: { 
        electronBuilder: { 
            // List native deps here if they don't work 
            externals: ['my-native-dep'], 
            // If you are using Yarn Workspaces, you may have multiple node_modules folders 
            // List them all here so that VCP Electron Builder can find them 
            nodeModulesPath: ['../../node_modules', './node_modules'] 
        } 
    } 
}

大意就是告诉开发者,如果发现打包后某些模块不工作,需要你在electronBuilder中配置一下!

参考资料

1、Vue CLI Plugin Electron Builder:nklayman.github.io/vue-cli-plu…