Stencil组件项目中Shoelace未解析导入问题求助

先检查导入路径是否靠谱 #

• 打开src/global/index.ts看看导入语句是不是写对了。Shoelace一般不建议直接导入整个包，通常是按需导入组件或样式，比如import '@shoelace-style/shoelace/dist/components/button/button.js'或者import '@shoelace-style/shoelace/dist/shoelace.css'。要是你直接写import '@shoelace-style/shoelace'，大概率是包的入口配置没做好，导致Stencil找不到要解析的文件。

验证依赖安装是否到位 #

• 打开package.json确认dependencies里确实有@shoelace-style/shoelace，版本也没问题。要是拿不准，直接删了node_modules和package-lock.json（用yarn的话删yarn.lock），重新跑npm install或者yarn install，确保依赖装全了。

给Stencil配置外部依赖规则（可选） #

• 要是你本来就打算把Shoelace作为外部依赖，只是不想看到警告，可以在stencil.config.ts里加个配置：

  import { Config } from '@stencil/core';
  
  export const config: Config = {
    // 其他配置不动
    rollupPlugins: {
      after: [
        require('rollup-plugin-external-globals')({
          '@shoelace-style/shoelace': 'Shoelace'
        })
      ]
    }
  };
  

  记得先装这个插件：npm install rollup-plugin-external-globals --save-dev

检查Shoelace的包配置 #

• 去node_modules/@shoelace-style/shoelace里打开package.json，看看main、module或者exports字段有没有，路径对不对。要是这些字段缺了或者路径错了，Stencil肯定解析不了。遇到这种情况，要么升级Shoelace到最新稳定版，要么直接在导入时写具体的文件路径。

确认Stencil和Shoelace版本兼容 #

• 看看你用的Stencil版本和Shoelace是不是搭。有些新的Stencil版本对依赖解析更严格，旧版本可能不支持Shoelace的新结构。试试把Stencil更到最新：npm install @stencil/core@latest --save-dev

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