Svelte导入Socket.IO客户端库时报Exports not defined错误如何解决？

Uncaught Reference error: exports not defined 报错的核心原因是Socket.IO客户端默认发布的是CommonJS格式产物，Svelte默认的Rollup打包配置未正确将该CommonJS模块转换为浏览器可识别的ES模块，CommonJS独有的exports语法在浏览器环境中不存在，因此触发报错。

• 方案1：修改Rollup配置适配CommonJS转译
  首先确认已安装@rollup/plugin-commonjs依赖，未安装可执行安装命令：
  npm install @rollup/plugin-commonjs --save-dev
  之后修改项目根目录的rollup.config.js，调整commonjs插件配置：

  import commonjs from '@rollup/plugin-commonjs';
  
  export default {
    // 保留原有其他配置项不变
    plugins: [
      // 原有svelte、@rollup/plugin-node-resolve等插件保持在commonjs之前
      commonjs({
        include: /node_modules/,
        dynamicRequireTargets: [
          'node_modules/socket.io-client/**/*.js',
          'node_modules/engine.io-client/**/*.js'
        ]
      }),
      // 保留原有其他后续插件不变
    ]
  }
  

  配置修改完成后删除项目缓存重新启动即可生效。
• 方案2：直接导入预构建ES模块产物
  无需修改打包配置，直接将导入语句替换为Socket.IO客户端预构建的ES模块路径即可：
  import io from 'socket.io-client/dist/socket.io.esm.min.js'
• 方案3：Vite/SvelteKit项目适配
  如果使用Vite作为打包工具，只需在vite.config.js中添加依赖预构建配置即可：

  import { defineConfig } from 'vite'
  import { svelte } from '@sveltejs/vite-plugin-svelte'
  
  export default defineConfig({
    plugins: [svelte()],
    optimizeDeps: {
      include: ['socket.io-client']
    }
  })
  

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