✅已解决 | 尝试在 nuxt3 中使用失败

问题描述

反正就是 nuxt3 esm 问题。
nuxt3 要求要么 .mjs + .cjs
要么 “type”: “module” + .js
然后提供一些 transpile 或者 alias
我反复尝试各种方案都不行
发现 build/module/lib 目录下居然又是 cjs,不知道为什么要这么搞

重现步骤

用了就会重现。

附加信息

  • Version:
    4.23.27

  • Platform:
    node 16.14

请提供一个示例项目的链接我们来帮你查看一下原因

事实上我在另一个 vite 项目里再次尝试,dev 没问题 build 后运行时报错
Uncaught ReferenceError: require is not defined
找到如下语句,正是使用 module/lib 目录下的内容
require("./jsencrypt").JSEncrypt,v7=require(“sm-crypto”).sm2

这是我写的示例

如果你要从中找出问题,你必须下载并 build 然后 preview
这是我部署在 vercel 上的另一个项目

你能在控制台看到上述错误

我尝试使用 vite 的 resolve.alias 选项改变 authing 的入口文件,但不起作用

收到。立即处理。请稍等

不好意思,目前版本的 authing-js-sdk 中同时使用了 import 和 require。vite 的构建是基于 rollup 的,默认情况下对 require 不太友好,并且 vite 在 dev 和 build 时对 commonjs 的处理也不一致这个问题我们会在接下来的版本中修复。

针对您在 build 时出现的 require is not defined 的问题暂时可以通过以下方式解决:

1、安装 @originjs/vite-plugin-commonjs

2、在 vite.config.js 中使用:

import { esbuildCommonjs, viteCommonjs } from ‘@originjs/vite-plugin-commonjs’

export default defineConfig({
build: {
commonjsOptions: {
transformMixedEsModules: true,
}
},
plugins: [viteCommonjs(), esbuildCommonjs()]
})

我在本地测试 build 了下,也是提示 require is not defined,通过以上方式解决并重新打包后没有再提示报错了

我用 vite 本地 build 复现了您的问题,解决方案可以参考上面的回复。

这样修改又提示exports is not defined

用以上方法,在 vite vue3 的 spa 环境下是否还有问题?

nuxt ssr 的场景一会儿我去 debugger 下。

commonjsOptions: {
transformMixedEsModules: true,
},

设置了这个倒不会出现require问题


提示 exports is not defined 是 nuxt 项目?还是 vite + vue3 的 web 项目?

如果是 vite + vue 3 的 web 项目,可以在这个 demo 中添加下复现代码吗?这边暂时只复现了 require is not defined,没有发现 exports is not defined 的情况。

demo: https://github.com/zhaoyiming0803/test-vite-vue3

辛苦更新下以上 demo,然后 push,这边 debugger 下。

不好意思,目前还找不到是哪里的问题,所以复现不出来了

next 3 可以在下面这个最简 demo 基础上提供下复现 bug 吗?我正好对这个也挺感兴趣,去研究下。

提供一个 PR 就行,我去看看。

这个是vue项目。你稍微等我一下,我排查是哪里的问题,然后提供demo给你

你好,提供了一个demo,麻烦了

你好,你这个 demo build 后复现了 exports is not defined 的问题。目测是 lodash-es 的问题,上面的配置不能全部 transfrom。rollup.config.js 相关位置需要额外加以下配置:

commonjsOptions: {
transformMixedEsModules: true,
exclude: [
‘node_modules/lodash-es/’,
'node_modules/@types/lodash-es/
’,
],
}

你的 git 仓库我这边没有 push 权限,所以没法给你提 pr,你先按照这个配置试下,我这边没有再提示 exports is not defined 了,有问题再解决。

同样在今天遭遇了这个问题,请问何时可以在之后版本修复捏?同样是vite+vue3+ts的项目

TakaSoap/vite-vue3-ts-authing-test (github.com)

同样做了个demo

我 fork 了你的项目之后,

修改了 App.vue 中一行代码:

authenticationClient.isUserExists({ phone: '13800138000' }).then(console.log).catch(console.error)

执行:

npm run build
npx http-server ./dist

然后访问: http://127.0.0.1:8081/

打包和运行都是正常的。

你遇到了什么样的问题?

这边试了下确实正常,可能是之前调试的时候端口映射出了问题。
我的正式项目里面倒是确实会出现require is not defined(transformMixedEsModules: false)或者exports is not defined(transformMixedEsModules: true)
现在正在尝试在demo里复现,辛苦你们了

初步分析应该是我用的某些库不能使用 transformMixedEsModules: true 这条配置,导致整个 web app 都没法加载出来,报 exports is not defined,现在还不清楚具体是哪个库不乐意了。
接下来版本的 authing-js-sdk 会修复这个问题吗?这样我们就不需要配置 transformMixedEsModules 了。