Svelte/Sapper SSR应用使用Font Awesome 5报错的解决方案咨询

我之前在Sapper项目里踩过这个坑，这个错误的核心原因是Sapper默认会把node_modules里的大部分依赖当作预编译模块直接引入，但svelte-awesome或者它依赖的Font Awesome模块并没有做好SSR兼容的预编译处理，导致服务端渲染时识别不了这个组件。下面是几个亲测有效的解决办法：

方法1：让Sapper编译指定依赖（推荐） #

Sapper允许我们配置哪些node_modules里的包需要被编译，步骤如下：

• 打开项目根目录的rollup.config.js（用Rollup构建的话）或者webpack.config.js（Webpack构建的话）
• 在svelte插件的配置项里，添加include字段，把svelte-awesome和Font Awesome相关的包路径加进去，让Sapper把它们当成项目源码的一部分编译：
  以Rollup为例，修改后的配置片段大概是这样：

  export default {
    // ... 其他原有配置
    plugins: [
      svelte({
        // ... 其他svelte相关配置
        include: [
          'src/**/*.svelte',
          'node_modules/svelte-awesome/**/*.svelte',
          'node_modules/@fortawesome/**/*.js'
        ]
      }),
      // ... 其他插件
    ]
  };
  

• 保存配置后重启Sapper开发服务，这个很重要，不重启配置不会生效。

方法2：改用Font Awesome CDN快速解决 #

如果不想折腾配置，也可以用更简单的方式绕开这个问题：

• 打开src/template.html，在<head>里加入Font Awesome的CDN样式链接：

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  

• 然后在组件里直接用原生的Font Awesome类名标签代替svelte-awesome组件：

  <i class="fas fa-times"></i>
  

  这种方式不需要引入任何npm包，直接就能用，适合快速验证或者小型项目。

方法3：更新依赖版本 #

有时候旧版本的svelte-awesome可能存在SSR兼容性问题，试试更新到最新版：

npm update svelte-awesome @fortawesome/free-solid-svg-icons

更新完成后重启开发服务，看看问题是否自动解决。

额外注意 #

如果你用的是Webpack构建，配置逻辑和Rollup类似，需要在svelte-loader的配置里添加include字段，指定要编译的依赖路径。

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