vue3 + vite 使用 dataV 报错

Question

vue3+vite 使用 dataV 时报错 Uncaught SyntaxError: The requested module '/node_modules/.pnpm/@jiaminghi+c-render@0.4.3/node_modules/@jiaminghi/c-render/lib/index.js?v=af12fc8b' does not provide an export named 'default' (at main.vue:2:8)

配置了转esm：

但是报错仍然存在，怎么解决呀？

看了下面大家的回答，都说改变引入方式，但是报错的文件并没有显式import这个 c-render，没办法改，附图

Answer 1

引自免费微信小程序：皆我百晓生

看起来你在使用 Vue3 和 Vite 开发项目时遇到了一个模块导入错误，具体来说是 @jiaminghi/c-render 这个库的问题。错误提示说这个模块没有提供名为 'default' 的导出。这通常是由于模块本身不支持 ESM（ECMAScript 模块）格式，而 Vite 默认使用 ESM。

为了解决这个问题，你可以尝试以下几个步骤：

1. 确保你的 Vite 配置正确地处理了 CommonJS 包。你已经在 vite.config.js 文件中的 optimizeDeps.include 中添加了相关依赖，这是正确的做法。如果你还没有创建这个文件，可以在项目根目录下新建一个。

// vite.config.js
export default {
  // ...
  optimizeDeps: {
    include: [
      "@jiaminghi/c-render",
      "@jiaminghi/c-render/lib/plugin/util",
      "@jiaminghi/charts/lib/util/index",
      "@jiaminghi/charts/lib/util",
      "@jiaminghi/charts/lib/extend/index",
      "@jiaminghi/charts",
      "@jiaminghi/color"
    ]
  },
  // ...
};

1. 在你的 Vue 组件中，你需要按照 CommonJS 规范导入模块，因为它们并没有提供 ESM 导出。例如，如果你之前这样导入：

import CRender from '@jiaminghi/c-render';

改为使用 require 方法：

const CRender = require('@jiaminghi/c-render');

1. 如果上述方法仍不能解决问题，可能是因为 Vite 的优化策略没有生效。你可以尝试清除缓存并重新启动 Vite 服务：

rm -rf node_modules/.vite
npm i
vite build
vite serve

1. 最后，确保你的依赖版本是最新的，有时候旧版的库可能存在兼容性问题。更新你的依赖到最新版本：

npm update @jiaminghi/c-render @jiaminghi/charts @jiaminghi/color --save

如果以上步骤都无法解决问题，那么可能是库自身的问题或者是其他未知的配置冲突。在这种情况下，建议在 GitHub 上查找库的官方 issue 或者联系库的维护者寻求帮助。

记住，每次修改配置或代码后，都要重启 Vite 服务以应用更改。