NativeScript扩展应用Webpack构建崩溃：require.context未定义求助

问题描述 #

我按照NativeScript文档扩展了应用，执行tns build android时能正常构建，但用Webpack构建后应用启动就崩溃，具体错误如下：

主线程发生未捕获异常：java.lang.RuntimeException: 无法实例化活动ComponentInfo{org.nativescript.StudentAssistant/com.tns.NativeScriptActivity}: com.tns.NativeScriptException:
调用模块函数出错
TypeError: require.context is not a function
文件："file:///data/data/org.nativescript.StudentAssistant/files/app/vendor.js, 行：4，列：28

堆栈跟踪：
Frame: function:'', file:'file:///data/data/org.nativescript.StudentAssistant/files/app/vendor.js', line: 4, column: 29
Frame: function:'require', file:'', line: 1, column: 266

TypeError: require.context is not a function
文件：", 行：1，列：265

堆栈跟踪：
Frame: function:'', file:'file:///data/data/org.nativescript.StudentAssistant/files/app/vendor.js', line: 4, column: 29
Frame: function:'require', file:'', line: 1, column: 266

at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2626)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2789)
at android.app.ActivityThread.-wrap12(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1527)
at android.os.Handler.dispatchMessage(Handler.java:110)
at android.os.Looper.loop(Looper.java:203)
at android.app.ActivityThread.main(ActivityThread.java:6251)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1073)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:934)

Caused by: com.tns.NativeScriptException:
调用模块函数出错
TypeError: require.context is not a function
文件："file:///data/data/org.nativescript.StudentAssistant/files/app/vendor.js, 行：4，列：28

堆栈跟踪：
Frame: function:'', file:'file:///data/data/org.nativescript.StudentAssistant/files/app/vendor.js', line: 4, column: 29
Frame: function:'require', file:'', line: 1, column: 266

TypeError: require.context is not a function
文件：", 行：1，列：265

堆栈跟踪：
Frame: function:'', file:'file:///data/data/org.nativescript.StudentAssistant/files/app/vendor.js', line: 4, column: 29
Frame: function:'require', file:'', line: 1, column: 266

at com.tns.Runtime.runModule(Native Method)
at com.tns.Runtime.runModule(Runtime.java:530)
at com.tns.Runtime.createJSInstance(Runtime.java:624)
at com.tns.Runtime.initInstance(Runtime.java:606)
at com.tns.NativeScriptActivity.<init>(NativeScriptActivity.java:7)
at java.lang.Class.newInstance(Native Method)
at android.app.Instrumentation.newActivity(Instrumentation.java:1078)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2616)
... 9 more

解决方案 #

这个问题我之前处理过，本质是require.context是Webpack提供的专属API，但NativeScript的默认Webpack配置没有对它做适配，或者你的代码/依赖库直接使用了这个API却没做兼容处理。给你几个可行的解决方向：

1. 替换自定义的require.context写法 #

如果是你自己的代码里用了require.context，可以改成NativeScript兼容的手动导入方式。比如原本的代码：

const components = require.context('./components', false, /\.vue$/);
components.keys().forEach(key => {
  const componentName = key.replace(/^\.\/(.*)\.\w+$/, '$1');
  Vue.component(componentName, components(key).default);
});

可以替换成手动导入所有组件：

import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';

Vue.component('ComponentA', ComponentA);
Vue.component('ComponentB', ComponentB);

2. 给Webpack添加require.context支持（针对第三方依赖） #

如果是你引入的第三方库用到了require.context，可以通过Babel插件来转译这个API：

• 先安装依赖：

  npm install babel-plugin-transform-require-context --save-dev
  

• 在项目根目录的.babelrc或babel.config.js中添加这个插件：

  {
    "presets": ["@nativescript/babel-preset"],
    "plugins": ["transform-require-context"]
  }
  

3. 更新NativeScript Webpack插件到兼容版本 #

有时候版本不兼容也会导致这个问题，执行命令更新Webpack插件：

npm update @nativescript/webpack --save-dev

然后重新执行带Webpack的构建命令：

tns build android --bundle

4. 清理缓存后重新构建 #

缓存偶尔会引发奇怪的问题，先彻底清理再重新构建：

# 清理NativeScript缓存
tns clean
# 删除依赖和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 重新构建
tns build android --bundle

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