Culori.js在Svelte REPL中运行正常但本地项目报错如何解决

Culori 包在 Svelte REPL 中运行正常，但本地运行时返回 undefined。尝试过下载该 REPL 代码包、通过 degit 初始化全新项目并安装 Culori，均无法解决问题。

复现步骤 #

• 下载对应 REPL 的 zip 压缩包
• 解压文件内容
• 执行 npm install 安装依赖
• 执行 npm run dev 启动项目
  控制台输出报错信息如下：

[rollup-plugin-svelte] The following packages did not export their `package.json` file so we could not check the "svelte" field. If you had difficulties importing svelte components from a package, then please contact the author and ask them to export the package.json file.

- culori

目前找到的唯一 workaround 是通过 CDN 引入 Culori，但不想采用该方案。请问是否有方法可以让 Culori 像在 REPL 中一样，在本地 Svelte 项目中正常运行？

解决方案 #

该问题由旧版 rollup-plugin-svelte 依赖的 package.json 导出校验逻辑触发：Culori 官方包的导出字段未包含自身的 package.json 文件，插件校验失败后会中断正常的模块解析流程，最终导致导入返回 undefined。

方案一：修改 Rollup 配置（适用于 REPL 下载的默认 Rollup 模板项目） #

打开项目根目录的 rollup.config.js，找到 svelte 插件配置项，新增 resolvePackageJsonExports: false 参数关闭校验即可：

import svelte from 'rollup-plugin-svelte';

export default {
  // 其余原有配置保持不变
  plugins: [
    svelte({
      // 其余原有svelte配置保持不变
      resolvePackageJsonExports: false
    }),
    // 其余原有插件保持不变
  ]
}

方案二：修改 Vite 配置（适用于 Vite 驱动的 Svelte 项目） #

如果使用 Vite 构建项目，打开 vite.config.js，将 culori 加入预构建依赖列表即可：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()],
  optimizeDeps: {
    include: ['culori']
  }
})

备用兜底方案 #

如果上述配置不生效，可直接指定 culori 完整的 ES 模块路径导入：

import * as culori from 'culori/dist/culori.esm.js'

配置修改完成后，删除项目缓存目录（默认是 node_modules/.cache），重新执行依赖安装和启动命令即可正常使用 culori，不会再触发相关报错。 #

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