Substrate搭建DApp教程报TypeError：无法读取undefined的query属性

前置运行状态 #

• 本地自定义改造的业务节点可正常启动运行
• 按「构建DApp」教程两步法搭建前端时，复用「搭建自定义节点」教程的旧前端项目，执行yarn start可正常启动访问
• 项目运行于iOS环境，此前完成的系列Substrate入门教程全流程均执行正常
• 为排除操作疏漏，已删除所有项目文件，严格跟随教程步骤重新完整操作，确认未遗漏关键配置环节

异常触发过程 #

按照教程要求修改App.js文件后，页面本该切换为带有PoE UI元素的新交互界面，随即抛出运行报错：

TypeError: Cannot read property 'query' of undefined

报错定位 #

源码层面的报错位置：

142 | export default function TemplateModule (props) {
143 |   const { api } = useSubstrate();
> 144 |   return (api.query.templateModule && api.query.templateModule.proofs
145 |     ? <Main {...props} /> : null);
146 | }

Webpack编译产物中的报错定位：

212 | const {
213 |   api
214 | } = Object(_substrate_lib__WEBPACK_IMPORTED_MODULE_2__["useSubstrate"])();
> 215 | return api.query.templateModule && api.query.templateModule.proofs ? /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_5__["jsxDEV"])(Main, { ...props
      |            ^  216 | }, void 0, false, {
217 |   fileName: _jsxFileName,
218 |   lineNumber: 145,

核心排查诉求 #

当前无法判断该异常是否与templateModule的接口调用方式有关，需要对应的问题排查方向指引。

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