在Stencil JS组件中导入Swiper JS遇错，求解决方案

数据老陈

2026-7-11

解决Stencil JS中导入Swiper JS的裸模块解析错误

方案1：配置Stencil路径映射

在项目根目录的stencil.config.ts中添加路径别名配置，将Swiper的裸模块路径映射到实际文件：

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: '你的组件命名空间',
  outputTargets: [
    // 保留你原有的输出目标配置
  ],
  resolve: {
    alias: {
      'swiper/element/bundle': './node_modules/swiper/element/bundle.mjs'
    }
  }
};

保持原导入语句不变：

import { register } from 'swiper/element/bundle';
register();

方案2：使用相对路径直接导入

根据你的组件文件层级，直接用相对路径指向node_modules中的Swiper文件，例如：

// 路径需根据组件实际位置调整
import { register } from '../../node_modules/swiper/element/bundle.mjs';
register();

方案3：配置ESBuild解析规则（Stencil v4默认使用ESBuild）

在stencil.config.ts中添加ESBuild的别名配置：

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: '你的组件命名空间',
  outputTargets: [
    // 保留你原有的输出目标配置
  ],
  esbuild: {
    alias: {
      'swiper/element/bundle': 'swiper/element/bundle.mjs'
    }
  }
};