Nativescript(Vue)集成openpgp时的Webpack Fallback异常问题

概述 #

• 目标：在NativeScript(Vue)应用中引入openpgp外部库
• 问题：将库添加到package.json后无法正常使用，原因是fs、path、crypto等Node.js核心模块在当前环境中不可用，尝试nodeify、node-polyfill-webpack-plugin工具均未解决问题
• 错误信息：
  • 未使用polyfill工具时，出现4条类似模块缺失错误：

    Module not found: Error: Can't resolve 'os' in 'PATH'
    
    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
    This is no longer the case. Verify if you need this module and configure a polyfill for it.
    
    If you want to include a polyfill, you need to:
            - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
            - install 'os-browserify'
    If you don't want to include a polyfill, you can use an empty module like this:
            resolve.fallback: { "os": false }
    

    涉及需要polyfill的模块：os-browserify、browserify-zlib、crypto-browserify、stream-browserify
  • 使用node-polyfill-webpack-plugin时，错误变为：

    ERROR in Cannot read property 'fallback' of undefined
    ERROR in Cannot read property 'fallback' of undefined
    ERROR in Cannot read property 'fallback' of undefined
    ERROR in Cannot read property 'fallback' of undefined
    ERROR in Cannot read property 'fallback' of undefined
    

已尝试方案 #

1. 手动配置Webpack resolve fallback
   配置代码：

   const webpack = require("@nativescript/webpack");
   
   module.exports = (env) => {
       webpack.init(env);
   
       webpack.chainWebpack(config => {
           config.resolve.set('fallback', { 
               "os": require.resolve("os-browserify/browser"),
               "zlib": require.resolve("browserify-zlib"),
               "crypto": require.resolve("crypto-browserify"),
               "stream": require.resolve("stream-browserify"),
               "util": require.resolve("util/"),
               "buffer": require.resolve("buffer/")
           });
       });
   
       return webpack.resolveConfig();
   };
   

   结果：解决了构建阶段的错误，但运行时出现以下报错：

   System.err: TypeError: util.inherits is not a function
   .....
   

2. 使用node-polyfill-webpack-plugin
   配置代码：

   const webpack = require("@nativescript/webpack");
   const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
   
   
   module.exports = (env) => {
       webpack.init(env);
   
       webpack.chainWebpack(config => {
           config.resolve.plugin('polyfills').use(NodePolyfillPlugin);
       });
   
   
       return webpack.resolveConfig();
   };
   

   结果：触发Cannot read property 'fallback' of undefined错误

问题复现步骤 #

ns create <project-name> --vue //TypeScript项目同样受影响

npm install openpgp

在脚本中引入库：

import * as openpgp from 'openpgp';

其他尝试 #

尝试降级Webpack至4.1.0，更新package.json后执行./node_modules/.bin/update-ns-webpack --configs，出现错误：

code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/[user]/projects/android/[project]/webpack.config.js',
    '/home/[user]/projects/android/[project]/node_modules/webpack-cli/bin/utils/convert-argv.js',
    '/home/[user]/projects/android/[project]/node_modules/webpack-cli/bin/cli.js',
    '/home/[user]/projects/android/[project]/node_modules/webpack/bin/webpack.js'
  ]

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