在StencilJS应用中使用自定义HTML元素遇404问题求助

问题描述 #

尝试在StencilJS应用中引入第三方自定义HTML元素，已执行以下操作但仍出现404错误（系统在build文件夹中找不到new-component.js）：

• 执行npm install new-component并确认依赖存在于node_modules
• 在app.ts中导入并调用组件加载器：

  import { defineCustomElements as NewComponentLoader} from "new-component/loader";
  export default async () => { NewComponentLoader(window); }
  

• 在app-root.tsx中导入组件并在render函数中使用
• 将"node_modules/new-component"添加到package.json的files数组
• 多次重启服务器、执行npm run build和npm run start
• 发现www/build下的core-js*.js和dom-*.js中存在new-component的引用，但仍报错
• 疑问：初始化时选择Community App是否错误？

解决方案 #

1. 移除package.json中错误的files配置 #

files数组的作用是定义自身包发布时需要包含的文件，不是用来告知Stencil复制第三方依赖的，这行配置无效且可能造成混淆，直接删除。

2. 修正组件加载器的导入路径 #

部分第三方组件的loader文件位于dist/loader目录而非包根目录，检查node_modules/new-component的文件结构，将导入路径改为：

import { defineCustomElements as NewComponentLoader } from "new-component/dist/loader";

3. 配置Stencil复制第三方组件资源 #

Stencil默认不会自动复制node_modules中的第三方组件资源到build目录，需要在stencil.config.ts中添加copy配置，将组件的dist文件复制到输出目录：

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

export const config: Config = {
  // 保留原有配置...
  copy: [
    {
      src: 'node_modules/new-component/dist',
      dest: 'new-component'
    }
  ]
};

此配置会在build时将new-component的dist目录复制到www/build/new-component下，确保加载器能找到对应资源。

4. 优化组件的引用方式 #

在app-root.tsx中，使用自定义元素时无需导入组件类（除非需要类型提示），直接写HTML标签即可：

render() {
  return (
    <div class="app-root">
      <new-component></new-component>
    </div>
  );
}

若需要类型提示，仅导入类型定义避免打包冗余代码：

import type { NewComponent } from "new-component";

5. 指定加载器的资源路径 #

调用加载器时显式指定资源路径，确保加载器从正确位置获取组件文件：

export default async () => {
  NewComponentLoader(window, {
    resourcesUrl: '/build/new-component'
  });
};

关于Community App的疑问 #

初始化时选择Community App完全没问题，该模板仅提供基础项目结构，与第三方组件的加载逻辑无关，不是导致错误的原因。

最后验证 #

执行npm run clean清理旧的build文件，再依次执行npm run build和npm run start，即可解决404错误。

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