用Vite起的react项目引入truffle，在部署的时候报以下错误信息_instead rename message.js to end in .cjs, change t-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46061574/article/details/129723738

文章讲述了在使用Vite和Webpack构建项目时遇到的模块导入问题，特别是涉及到truffle-config.js文件。当从Webpack切换到Vite时，报错提示需要将truffle-config.js重命名为.cjs格式或改变模块类型。解决方案包括修改Vite的type字段或调整模块导入导出方式以适应CommonJS。文章还比较了CommonJS和ESModule的差异，以及AMD和CMD两种模块加载规范的特点和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错信息：Instead rename truffle-config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs"

用webpack起的项目引入智能合约代码之后，并不会报如上所示的错误，在用vite起时就报错了，错误提示给出了两种解决方法。

1、rename truffle-config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules

2、 change "type": "module" to "type": "commonjs"

对比一下这两个项目的package文件：

1、vite

2、webpack

显而易见，在webpack项目中并没有type这个字段，

解决方法：1、将vite项目中的type字段去掉

2、将type:"module"改为type:''commonJS'’，同时你后面文件的写法都要变成common.js的写法规范。

问题解决了，讨论一下两者的相同点和区别：

相同点：两者都是解决js模块化问题，同时存在的还有AMD、CMD（这两种目前不常用）

区别：

1、两者的模块导入导出语法不同，CommonJs是通过module.exports，exports导出，require导入；ESModule则是export导出，import导入。
2、CommonJs是运行时加载模块，ESModule是在静态编译期间就确定模块的依赖。ESModule在编译期间会将所有import提升到顶部，CommonJs不会提升require。
3、CommonJs导出的是一个值拷贝，会对加载结果进行缓存，一旦内部再修改这个值，则不会同步到外部。ESModule是导出的一个引用，内部修改可以同步到外部。
4、CommonJs中顶层的this指向这个模块本身，而ESModule中顶层this指向undefined。
5、CommonJS加载的是整个模块，将所有的接口全部加载进来，ESModule可以单独加载其中的某个接口；

简单看一下AMD和CMD

AMD（针对CommonJs同步加载方式）
AMD规范介绍

AMD规范采用异步加载模块，允许指定回调函数
Node模块加载速度快，所以适用于同步加载
浏览器环境下，模块需要请求获取，所以适用于异步加载
requireJs是AMD的一个具体实现库
CMD
CMD规范介绍

CMD整合了CommonJs和AMD的优点，模块加载是异步的
CMD专门用于浏览器端，seaJS是CMD规范的一个实现
AMD和CMD最大的问题是没有通过语法升级解决模块化