Uncaught ReferenceError: module is not defined

[berg223]

I'm a newbee for vite. Sorry for that I cannot provide full source code to reproduce the issue. Any ideas about the error when startup package which is built by npm run build ?

Uncaught ReferenceError: module is not defined

[berg223]

I'm using 'export default ' when export vue component. Is this possiable?

[caoxiemeihao]

Maybe god can help you :)

[berg223]

Thanks the god! After many many tries, finally I solved the problem, but I don't know the reason.

Since I have set nodeIntegration to false in electron/main/index.ts for security, to keep it consitent with this setting, I just removed the following code in vite.config.ts

renderer({ nodeIntegration: true, }),

Then the issue solved. I don't know the reason since I'm really fresh. Do you know the reason?

[berg223]

我一个月前下载的模板，里面有这样的代码，renderer里面没有nodeIntegration这个参数，仍然出现了同样的问题，看上去nodeIntegration默认是被设置成了true，这让排查代码问题变得很困难，因为它是默认值，你很难注意到它和electron/main/index.ts中的nodeIntegration不一致。我用了更新后的模板才发现这个问题。 · // Enables use of Node.js API in the Renderer-process // https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#electron-renderervite-serve renderer: {}, ·

[caoxiemeihao]

你更应该先去看发布日志 https://github.com/electron-vite/vite-plugin-electron/blob/main/CHANGELOG.md

[berg223]

你更应该先去看发布日志 https://github.com/electron-vite/vite-plugin-electron/blob/main/CHANGELOG.md

我觉得你应该没明白我的意思，跟你讲述下真实的经历。 一个多月之前我使用electron-vite-vue这个模板开始开发项目，由于安全问题我需要将这个值设置为false，开发环境一直都是okay的，昨天我终于完成了开发阶段开始打包，打完包之后，打开应用出现了module is not defined这个问题，由于我原本是搞后端的，对这块还不熟悉，这个报错信息看上去也不明确（当然这不是模板的问题），打包后的代码是经过混淆的看不出原因，所以一头雾水。就想找找看相关的文档和源码来加深对这个问题的理解，第一时间是想找electron-vite-vue这个模板的文档看看，很不幸项目描述里面没有介绍打包相关的内容也没有wiki，所以就去找electron-builder的文档去看看到底打包了哪些文件，在看完文档之后发现应该不是electron-builder的设置不对，问题应该是vite build这行代码build出来的文件有问题，观察到模板里面使用的是vite-plugin-electron这个插件，现在改名叫vite-electron-plugin了（困惑了一阵才确定确实是改名了），想了解下这个插件做了什么功能，因此就去知乎看了下你的那几篇文章，但是仍然不知道为什么会出现那个问题（由于旧的模板里面 vite.config.ts的代码使用的是renderer: {}而不是renderer({ nodeIntegration: true, })，很难注意到这个不一致，这个地方是真的坑）。没办法就来这里问一下，看看有没有什么思路。然后，同时，通过扒拉模板的代码发现代码似乎有更新，于是把最新的模板git clone下来，然后把我的业务代码放到最新的模板代码里面，发现新模板问题仍然存在，回头检查了下新模板，发现renderer({ nodeIntegration: true, })这行代码不对，于是改成false尝试了下，问题消失了。因此，我是通过尝试才解决这个问题，有很大的运气因素，花了一下午的时间才搞定这个问题。我相信一个月之前使用electron-vite-vue这个模板的人如果设置了nodeIntegration为true肯定会遇到相同的问题，针对这部分用户，如果在electron-vite-vue这个模板的项目描述里面加上有关打包的指引，相信可以节省掉很多排查问题的时间，应该也会节省你很多时间（可以看看关于打包的issue有多少），另外关于功能的详细描述，建议有时间还是提供个文档出来，写在更新日志里面的话，很多人真的不会注意到。打了不少字，希望听得进去吧！

[berg223]

另外，其实我仍然不明白原因是什么，您知道是怎么回事吗？我觉得我是靠运气不断尝试才让这个问题消失。我没法提供复现的代码的原因是因为我的代码真的很多，且我当时也没办法复现这个问题。

[caoxiemeihao]

你讲的有道理，总的来说 vite-plugin-electron 和 vite-electron-plugine 和 vite-plugin-electron-renderer 是完全不同的三个插件。这个 issues 中简要的说明了它们的区别 https://github.com/electron-vite/vite-electron-plugin/issues/17

其次，设计上早期有很多地方很不理想，导致我不断的在重构它们，以找到更好的方式使得插件更加的成熟。 这个一两个月变化是真的很大，作者是个普通商业公司的员工，平时会比较忙。文档不一定会实时跟的上(很多时候因为写完可能就过时了)。

最后，设计上的原则是尽可能的简化用户的思考成本，不用思考无脑使用是设计宗旨，尽量追求避开用户对文档的依赖或通过 Demo 就能轻松使用。