Stencil JS中导入第三方库ion-js报错问题排查

问题现象 #

同样的ion-js使用代码在React项目和RunKit中能正常运行，但在Stencil-JS组件里执行时抛出错误：

TypeError: Cannot read properties of undefined (reading 'IonTypes')
at Blob.js:6:36
at createCommonjsModule (utils.ts:3:1)
at Lob.js:58:1 undefined

尝试过两种导入写法：

ES模块写法 #

componentWillLoad() {
  let ionData = `{ ccp_datatype_name:ResponsiblePerson, ccp_datatype_version:"1.0", definition:type::{ name: PriceSchema, major_version:1, minor_version:0, base:VariantBase, fields:[ { name:category, type:symbol, nullable:false, min_occurs:1, max_occurs:1 }, { name:address_identifier, type:string, nullable:false, min_occurs:1, max_occurs:1 } ] }, status:active, table_name:ccp_datatypes}`;
  let value = ion.load(ionData);
  console.log(value.fields())
}

CommonJS require写法 #

require("jsbi/package.json"); // jsbi是peer依赖
var ionJs = require("ion-js")
let ionData = `{ ccp_datatype_name:ResponsiblePerson, ccp_datatype_version:"1.0", definition:type::{ name: PriceSchema, major_version:1, minor_version:0, base:VariantBase, fields:[ { name:category, type:symbol, nullable:false, min_occurs:1, max_occurs:1 }, { name:address_identifier, type:string, nullable:false, min_occurs:1, max_occurs:1 } ] }, status:active, table_name:ccp_datatypes}`;

let value = ionJs.load(ionData);
console.log(value.fields());

解决步骤 #

1. 配置Rollup兼容CommonJS模块 #

ion-js采用CommonJS模块结构，Stencil默认构建配置未处理这类依赖，需添加@rollup/plugin-commonjs插件：

先安装依赖：

npm install @rollup/plugin-commonjs --save-dev

修改stencil.config.ts：

import { Config } from '@stencil/core';
import commonjs from '@rollup/plugin-commonjs';

export const config: Config = {
  namespace: '你的组件命名空间',
  outputTargets: [
    // 你的输出目标配置
  ],
  rollupPlugins: {
    before: [
      commonjs({
        include: ['node_modules/ion-js/**', 'node_modules/jsbi/**']
      })
    ]
  }
};

2. 改用动态导入 #

Stencil同步加载CommonJS模块可能存在兼容性问题，换成异步动态导入：

async componentWillLoad() {
  const ion = await import('ion-js');
  let ionData = `{ ccp_datatype_name:ResponsiblePerson, ccp_datatype_version:"1.0", definition:type::{ name: PriceSchema, major_version:1, minor_version:0, base:VariantBase, fields:[ { name:category, type:symbol, nullable:false, min_occurs:1, max_occurs:1 }, { name:address_identifier, type:string, nullable:false, min_occurs:1, max_occurs:1 } ] }, status:active, table_name:ccp_datatypes}`;
  let value = ion.load(ionData);
  console.log(value.fields())
}

3. 确保peer依赖版本正确 #

安装符合ion-js要求的jsbi版本：

npm install jsbi@latest --save

问题根源 #

Stencil基于Rollup构建，默认对ES模块支持更完善，但ion-js目前以CommonJS形式发布。Rollup未正确转换这类模块时，内部依赖引用会丢失，导致IonTypes未定义错误。通过配置CommonJS插件或动态导入，可解决模块解析的兼容性问题。

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