build以后，vit preview 会报Uncaught ReferenceError: require is not defined

[yuanman0109]

安装的最新版本，viteconfig配置：

入口文件：

这个插件打包不支持吗

[flyfishzy]

Please provide a reproduction repo. By the way, it looks like a problem of @rollup/plugin-commonjs.
请提供一个重现的仓库。顺便说一下，这看起来像@rollup/plugin-commonjs插件的问题。

[yuanman0109]

Please provide a reproduction repo. By the way, it looks like a problem of @rollup/plugin-commonjs.
请提供一个重现的仓库。顺便说一下，这看起来像@rollup/plugin-commonjs插件的问题。

在公司电脑没有权限上传github，其实就是一个很简单的demo，vitecli初始化一个vue项目，然后main文件中直接require了一个comm.js文件，这个comm文件中也require了一个test.js,这俩js就是一个通过module.exports导出一个值来测试一下，然后vite配置也如上图所示很简单：


@rollup/plugin-commonjs插件我删除了，build以后，直接预览还是会提示require的问题

[ygj6]

感谢使用@originjs/vite-plugin-commonjs,vite build的时候由@rollup/plugin-commonjs处理commonJS代码，所以@originjs/vite-plugin-commonjs只能作用于vite dev。
你的问题transformMixedEsModules选项可以解决，vite配置如下：

build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  }

---

Thanks for using @originjs/vite-plugin-commonjs,vite build is handled by @rollup/plugin-commonjs for commonJS code, so @originjs/vite-plugin-commonjs can only work on vite dev.

This issue can be solved with the transformMixedEsModules option, vite configured as follows:

build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  }

[yuanman0109]

感谢使用@originjs/vite-plugin-commonjs,vite build的时候由@rollup/plugin-commonjs处理commonJS代码，所以@originjs/vite-plugin-commonjs只能作用于vite dev。
你的问题transformMixedEsModules选项可以解决，vite配置如下：

build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  }

Thanks for using @originjs/vite-plugin-commonjs,vite build is handled by @rollup/plugin-commonjs for commonJS code, so @originjs/vite-plugin-commonjs can only work on vite dev.

This issue can be solved with the transformMixedEsModules option, vite configured as follows:

build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  }

原来如此，那是否应该文档说明一些这属于dev环境的呢？还有一点疑惑的是：rollup的插件配置到plugin中，那么也只是影响build吗，dev是否也会作用呢

[ygj6]

vite默认就启用了@rollup/plugin-commonjs,不需要配置，vite build使用的是roolup打包的，也就是说本身roolup的特有插件也只能在vite build才会运行
https://github.com/vitejs/vite/blob/main/packages/vite/src/node/build.ts#L294

vite dev不需要build，只需要预构建，所以我们这个插件只是补充了vite dev使用commonJS的述求，所以才只需要在vite dev生效即可。

[yuanman0109]

vite默认就启用了@rollup/plugin-commonjs,不需要配置，vite build使用的是roolup打包的，也就是说本身roolup的特有插件也只能在vite build才会运行
https://github.com/vitejs/vite/blob/main/packages/vite/src/node/build.ts#L294

vite dev不需要build，只需要预构建，所以我们这个插件只是补充了vite dev使用commonJS的述求，所以才只需要在vite dev生效即可。

你说vite默认就启用了@rollup/plugin-commonjs,不需要配置，指的是dev环境是吗？其实build的话，还是需要单独对@rollup/plugin-commonjs做一些配置的，比如transformMixedEsModules默认false，如果不改为ture，我试了下就会报require 未定义；

[ygj6]

vite build默认已经使用了@rollup/plugin-commonjs,所以不需要安装和导入，默认就会对纯cjs文件进行处理，而你的例子中是esm和cjs混用，所以需要开启transformMixedEsModules.

[Yanren1225]

我在配置之后出现了 Uncaught ReferenceError: exports is not defined，具体查看 #38

[edwineo]

我在配置之后出现了 Uncaught ReferenceError: exports is not defined，具体查看 #38

I have the same problem, have you already solved it?

[bitsnaps]

getting the same error here, I switching back to use vite-plugin-i18n-resources.

[houyaowei]

transformMixedEsModules配置为true后，问题还是存在 ‘require is not defined’

[whispergong]

if (a) {
require('a.js');
require('b.scss');
}

if (b) {
require(c.js');
}

if (c) {
require('d.js');
}
不知道是不是由于动态require的关系，即使transformMixedEsModules配置为true后，问题还是存在 ‘require is not defined’

[bruceeewong]

感谢使用@originjs/vite-plugin-commonjs,vite build的时候由@rollup/plugin-commonjs处理commonJS代码，所以@originjs/vite-plugin-commonjs只能作用于vite dev。 你的问题transformMixedEsModules选项可以解决，vite配置如下：

build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  }

Thanks for using @originjs/vite-plugin-commonjs,vite build is handled by @rollup/plugin-commonjs for commonJS code, so @originjs/vite-plugin-commonjs can only work on vite dev.

This issue can be solved with the transformMixedEsModules option, vite configured as follows:

build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  }

Awesome, finally sovled my problem!!! Confusing SUI SDK (

[haiting]

if (a) { require('a.js'); require('b.scss'); }

if (b) { require(c.js'); }

if (c) { require('d.js'); } 不知道是不是由于动态require的关系，即使transformMixedEsModules配置为true后，问题还是存在 ‘require is not defined’

我的也是动态引入，也是开启了一样报错，请问最后你的问题解决了么

[haiting]

transformMixedEsModules配置为true后，问题还是存在 ‘require is not defined’

你的问题解决了吗

[Itarn]

vite 可能忽略了这个参数 transformMixedEsModules #648

[wmo123]

为什么我配置上，打包预览还是会报require is not defined？

[q310550690]

transformMixedEsModules:true，打包还是报 require is not defined

[haiting]

transformMixedEsModules:true，打包还是报 require is not defined

已经放弃require的使用。。。