1***@qq.com
1***@qq.com
  • 发布:2023-02-19 10:53
  • 更新:2023-05-24 10:00
  • 阅读:1330

【报Bug】在uniapp项目中引入pixi.js时报错:“exports is not defined”

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 22000.1574

HBuilderX类型: 正式

HBuilderX版本号: 3.6.5

浏览器平台: Chrome

浏览器版本: 105.0.5195.127

项目创建方式: HBuilderX

操作步骤:

使用HBuilderX创建的vue2项目,接着npm init -y 初始化,然后npm install pixi.js,下载后import引入就报错了,在其他vue项目中引入正常,但在uniapp项目中就报错

预期结果:

应该可以正常引入

实际结果:

报错信息:
index.js:978 ReferenceError: exports is not defined
at Module.AZqD (pages-index-index.js:161:23)
at webpack_require (index.js:854:30)
at fn (index.js:151:20)
at eval (index.vue:8:1)
at 5iPK (pages-index-index.js:76:1)
at
webpack_require
(index.js:854:30)
at fn (index.js:151:20)
at eval (null:1:1)
at f9w/ (pages-index-index.js:447:1)
at webpack_require (index.js:854:30)
webpack_require
.oe @ index.js:978
Promise.catch (async)
(anonymous) @ index.js:1053
resolveAsyncComponent @ chunk-vendors.js:5142
createComponent @ chunk-vendors.js:4659
_createElement @ chunk-vendors.js:4881
createElement @ chunk-vendors.js:4812
vm.$createElement @ chunk-vendors.js:4953
render @ index.js:1093
Vue._render @ chunk-vendors.js:5004
updateComponent @ chunk-vendors.js:5522
get @ chunk-vendors.js:5941
Watcher @ chunk-vendors.js:5930
mountComponent @ chunk-vendors.js:5529
push.4UNb.Vue.$mount @ chunk-vendors.js:10039
init @ chunk-vendors.js:4575
createComponent @ chunk-vendors.js:7436
createElm @ chunk-vendors.js:7383
patch @ chunk-vendors.js:7938
Vue._update @ chunk-vendors.js:5401
updateComponent @ chunk-vendors.js:5522
get @ chunk-vendors.js:5941
Watcher @ chunk-vendors.js:5930
mountComponent @ chunk-vendors.js:5529
push.4UNb.Vue.$mount @ chunk-vendors.js:10039
init @ chunk-vendors.js:4575
createComponent @ chunk-vendors.js:7436
createElm @ chunk-vendors.js:7383
patch @ chunk-vendors.js:7938
Vue._update @ chunk-vendors.js:5401
updateComponent @ chunk-vendors.js:5522
get @ chunk-vendors.js:5941
Watcher @ chunk-vendors.js:5930
mountComponent @ chunk-vendors.js:5529
push.4UNb.Vue.$mount @ chunk-vendors.js:10039
init @ chunk-vendors.js:4575
createComponent @ chunk-vendors.js:7436
createElm @ chunk-vendors.js:7383
createChildren @ chunk-vendors.js:7511
createElm @ chunk-vendors.js:7412
patch @ chunk-vendors.js:7938
Vue._update @ chunk-vendors.js:5401
updateComponent @ chunk-vendors.js:5522
get @ chunk-vendors.js:5941
Watcher @ chunk-vendors.js:5930
mountComponent @ chunk-vendors.js:5529
push.4UNb.Vue.$mount @ chunk-vendors.js:10039
init @ chunk-vendors.js:4575
createComponent @ chunk-vendors.js:7436
createElm @ chunk-vendors.js:7383
patch @ chunk-vendors.js:7977
Vue._update @ chunk-vendors.js:5401
updateComponent @ chunk-vendors.js:5522
get @ chunk-vendors.js:5941
Watcher @ chunk-vendors.js:5930
mountComponent @ chunk-vendors.js:5529
push.4UNb.Vue.$mount @ chunk-vendors.js:10039
eval @ main.js:10
kLVn @ index.js:1321
webpack_require @ index.js:854
fn @ index.js:151
1 @ index.js:1009
webpack_require
@ index.js:854
checkDeferredModules @ index.js:46
(anonymous) @ index.js:994
(anonymous) @ index.js:997
Show 35 more frames
chunk-vendors.js:2032 [Vue warn]: Failed to resolve async component: function (resolve) {
var component = {
component: webpack_require.e(/! require.ensure | pages-index-index / "pages-index-index").then((function () {return resolve(webpack_require(/! D:/work/demo/pixi-game/pages/index/index.vue / "xrcg"));}).bind(null, webpack_require)).catch(webpack_require.oe),
delay: uniConfig['async'].delay,
timeout:
uniConfig['async'].timeout };

if (uniConfig['async']['loading']) {
component.loading = {
name: 'SystemAsyncLoading',
render: function render(createElement) {
return createElement(
uniConfig['async']['loading']);
} };

}
if (uniConfig['async']['error']) {
component.error = {
name: 'SystemAsyncError',
render: function render(createElement) {
return createElement(
uniConfig['async']['error']);
} };

}
return component;
}
Reason: ReferenceError: exports is not defined

bug描述:

搞一天了,求求帮忙看看是哪里的问题

——————————————————

在把HBuilderX升级为最新版后报错变成了:“ require is not defined”,另外在uniapp vue3中可以正常引入

2023-02-19 10:53 负责人:无 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

uniapp vue2 项目采用 commonjs 规范,vue3 项目采用 es module 规范,vue2 改用 require 引入即可

const pixi = require('pixi.js')
6***@qq.com

6***@qq.com

请问解决了吗 我报的文件查找失败:“pxix.js”

  • 1***@qq.com (作者)

    用yarn下载或者使用require 引入试一下

    2023-06-07 10:01

要回复问题请先登录注册