IIS中ASP.NET Core托管Svelte SPA报错：生命周期方法调用异常

问题症状 #

在IIS中通过ASP.NET Core应用托管Svelte 5（搭配SvelteKit）单页应用时，控制台抛出错误：Uncaught (in promise) Error: https://svelte.dev/e/lifecycle_outside_component。

使用adapter-static构建应用并将index.html设为fallback文件后：

• index.html能正常加载，+page.ts中的load函数可正常调用数据
• 页面无内容渲染
• 动态路由（如/my-route）会出现相同错误
• 无效路由（如/fake-route）先提示gn: Not found: /fake-route，随后触发相同的生命周期错误
• 应用在Vite开发模式下运行完全正常，仅在ASP.NET托管时出现问题

1月17日更新：问题已解决 #

应用目前可正常运行，但无法明确具体是哪一步操作直接解决了问题。排查过程中发现：

• 在Visual Studio外部通过命令行执行npm run build，将生成文件复制到宿主环境后应用正常
• 通过MSBuild在发布过程中执行npm run build会触发上述错误
  对比两种构建生成的文件：命令行构建生成entry.XXX.js，而VS项目构建生成operations.XXX.js

最终通过调整项目文件配置、更换JavaScript SDK版本、清理项目旧文件等操作后问题解决，当前有效配置文件如下：

Client.esproj #

<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/1.0.1184077">
<!--<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/0.5.513252-alpha">-->
  <PropertyGroup>
    <StartupCommand>npm run dev</StartupCommand>
    <!--<JavaScriptTestRoot>src\</JavaScriptTestRoot>
    <JavaScriptTestFramework>Jest</JavaScriptTestFramework>-->
    <ShouldRunNpmInstall>false</ShouldRunNpmInstall>
    <ShouldRunBuildScript>false</ShouldRunBuildScript>
    <BuildOutputFolder>$(MSBuildProjectDirectory)\build</BuildOutputFolder>
    <!--The build command is called from Server upon publish actions-->
    <BuildCommand>npm run build</BuildCommand>
    <!--<StartupCommand>npm run serve</StartupCommand>-->
    <!--<TestCommand>ng test</TestCommand>-->
    <!--<CleanCommand>npm run clean</CleanCommand>-->
    <!--<PublishCommand>npm run publish</PublishCommand>-->
  </PropertyGroup>
</Project>

Server.csproj #

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <IsPackable>false</IsPackable>
    <ImplicitUsings>enable</ImplicitUsings>
    <SpaRoot>..\client</SpaRoot>
    <SpaProxyLaunchCommand>npm run dev</SpaProxyLaunchCommand>
    <SpaProxyServerUrl>https://localhost:5173</SpaProxyServerUrl>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="DocumentFormat.OpenXml" Version="3.0.2" />
    <PackageReference Include="Microsoft.AspNetCore.Authentication.Negotiate" Version="8.0.10" />
    <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="8.0.12" />
    <PackageReference Include="Microsoft.Data.SqlClient" Version="5.2.1" />
    <PackageReference Include="NLog.Web.AspNetCore" Version="5.3.11" />
    <PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\client\Client.esproj">
      <!--If set to false, doesn't include the output of the referenced project as a 
      Reference of this project, but still ensures that the other project builds before this one-->
      <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
    </ProjectReference>
  </ItemGroup>

</Project>

svelte.config.js #

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: vitePreprocess(),

    kit: {
        adapter: adapter({
            pages: 'build',
            assets: 'build',
            fallback: 'index.html',
        })
    }
};

export default config;

tsconfig.json #

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "moduleResolution": "bundler"
    }
}

vite.config.ts #

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [sveltekit()],
    server: {
    proxy: {
        '/api': 'http://localhost:5185'
    }
}
});

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