Ionic v3生产构建后Electron报错Cannot find module "."如何解决

故障背景 #

现有仍需维护的Ionic v3存量应用，正在推进升级至Ionic 5+Angular版本，新版本上线前需保障旧版本正常可用。此前两台设备均可正常完成应用构建打包，删除node_modules重装依赖后，生产环境构建的包无法在Electron中正常运行。 #

复现情况 #

正常非生产构建流程 #

• 执行ionic-app-scripts build
• 执行electron .
  执行后Electron可正常打开并加载应用，非生产构建产物使用electron-builder打包后也可正常运行。

异常生产构建流程 #

• 执行ionic-app-scripts build --prod
• 执行electron .
  执行后Electron可正常启动，但控制台抛出如下错误：

Uncaught Error: Cannot find module "."
at vendor.js:1
at vendor.js:1
at Object. (vendor.js:1)
at e (vendor.js:1)
at Object. (main.js:1)
at e (vendor.js:1)
at window.webpackJsonp (vendor.js:1)
at main.js:1
生产构建产物使用electron-builder打包后，安装包运行也会出现相同错误。

已尝试无效排查方案 #

• 更换电脑安装的npm/Node版本
• 重新编译node-sass
• 更换不同版本的electron-builder
• 注释@ionic/app-scripts/config/webpack.config.js中的return optimizedProdLoaders;代码行，对齐生产与开发构建配置，故障依旧

可落地解决方案 #

临时过渡方案 #

直接使用非生产构建产物进行electron-builder打包即可正常交付，仅会损失生产构建的代码压缩、Tree Shaking带来的包体积优化收益，不影响业务功能正常运行。

根因修复方案 #

该报错由Ionic v3配套的旧版@ionic/app-scripts内置webpack3的生产构建动态依赖解析规则异常导致，按如下步骤操作即可修复：

1. 排查项目内所有使用require()动态引入依赖的代码，检查是否存在require('.' + 变量)、require(变量)这类无固定上下文的模糊动态路径写法，给所有动态require补充固定路径前缀，比如改为require(./pages/${pageName})的明确路径写法。
2. 在项目根目录新增自定义webpack配置文件custom.webpack.config.js，覆盖生产构建的模块解析规则：

const defaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

module.exports = {
  ...defaultConfig,
  production: {
    ...defaultConfig.production,
    module: {
      ...defaultConfig.production.module,
      exprContextCritical: false,
      unknownContextCritical: false
    }
  }
}

3. 修改package.json中的生产构建命令，指定自定义webpack配置路径：

{
  "scripts": {
    "build:prod": "ionic-app-scripts build --prod --webpackConfig ./custom.webpack.config.js"
  }
}

4. 若上述配置仍不生效，可直接将@ionic/app-scripts的版本锁定为重装依赖前的历史可用版本，避免跨版本构建脚本的兼容性问题。

内容的提问来源于stack exchange，提问作者ScottN