试用import 引入 pixi.js 的问题

[BenchWidth]

我创建了一个新的vue-cli（vue2）项目。 我按照文档使用import 引入pixi.js时

import * as PIXI from "pixi.js";

在浏览器中运行时报错

Uncaught TypeError: Cannot read properties of undefined (reading '1')
    at InteractionManager.processPointerOverOut (interaction.js?7418:1602:1)
    at InteractionManager.processPointerMove (interaction.js?7418:1552:1)
    at TreeSearch.recursiveFindHit (interaction.js?7418:419:1)
    at TreeSearch.recursiveFindHit (interaction.js?7418:377:1)
    at TreeSearch.findHit (interaction.js?7418:440:1)
    at InteractionManager.processInteractive (interaction.js?7418:1286:1)
    at InteractionManager.onPointerMove (interaction.js?7418:1529:1)

当我使用require引入pixi.js时一切正常

const PIXI = require('pixi.js')

[guansss]

pixi v6 加入了 conditional exports，如果混用 import 和 require 的话，会导致 pixi 分别以 esm 和 commonjs 的格式被打包两次，产生冲突

而这个插件的打包格式是 commonjs，在内部会以 require 的方式引入相关 pixi 模块，所以在项目里使用 import 引入 pixi 的话就会产生混用

下个版本的插件也会加入 conditional exports 来解决这个问题

[BenchWidth]

pixi v6 加入了 conditional exports，如果混用 import 和 require 的话，会导致 pixi 分别以 esm 和 commonjs 的格式被打包两次，产生冲突

而这个插件的打包格式是 commonjs，在内部会以 require 的方式引入相关 pixi 模块，所以在项目里使用 import 引入 pixi 的话就会产生混用

下个版本的插件也会加入 conditional exports 来解决这个问题

好的谢谢啦

[kokoro-ele]

楼主好，我在用react时跟你出现了一样的问题，我这样写的

import React, { useEffect, useRef, useState } from 'react'
import { Live2DModel } from 'pixi-live2d-display/cubism4';
const PIXI = require('pixi.js');

还是会出现

Uncaught TypeError: Cannot read properties of undefined (reading '1')
at InteractionManager.processPointerOverOut (InteractionManager.ts:1528:1)
at InteractionManager.processPointerMove (InteractionManager.ts:1461:1)
at TreeSearch.recursiveFindHit (TreeSearch.ts:169:1)
at TreeSearch.recursiveFindHit (TreeSearch.ts:109:1)
at TreeSearch.findHit (TreeSearch.ts:195:1)
at InteractionManager.processInteractive (InteractionManager.ts:1082:1)
at InteractionManager.onPointerMove (InteractionManager.ts:1430:1)

请教一下你当时是怎么修改的，谢谢 @BenchWidth

[lookdczar]

pixi v6 加入了 conditional exports，如果混用 import 和 require 的话，会导致 pixi 分别以 esm 和 commonjs 的格式被打包两次，产生冲突 而这个插件的打包格式是 commonjs，在内部会以 require 的方式引入相关 pixi 模块，所以在项目里使用 import 引入 pixi 的话就会产生混用 下个版本的插件也会加入 conditional exports 来解决这个问题

好的谢谢啦

文档里又是用import * as PIXI from "pixi.js"; 这个问题卡了我好长时间。。幸好这里搜了下 跪求大佬加入 conditional exports

[lookdczar]

楼主好，我在用react时跟你出现了一样的问题，我这样写的

import React, { useEffect, useRef, useState } from 'react'
import { Live2DModel } from 'pixi-live2d-display/cubism4';
const PIXI = require('pixi.js');

还是会出现

Uncaught TypeError: Cannot read properties of undefined (reading '1')
at InteractionManager.processPointerOverOut (InteractionManager.ts:1528:1)
at InteractionManager.processPointerMove (InteractionManager.ts:1461:1)
at TreeSearch.recursiveFindHit (TreeSearch.ts:169:1)
at TreeSearch.recursiveFindHit (TreeSearch.ts:109:1)
at TreeSearch.findHit (TreeSearch.ts:195:1)
at InteractionManager.processInteractive (InteractionManager.ts:1082:1)
at InteractionManager.onPointerMove (InteractionManager.ts:1430:1)

请教一下你当时是怎么修改的，谢谢 @BenchWidth

const PIXI = require('pixi.js'); const { Live2DModel } = require("pixi-live2d-display/cubism4"); 这两句都要改

[guansss]

@lookdczar 已经加入了啊，文档里面也是写的 import

[guansss]

@selmalee 什么问题，是混用 import 和 require 吗，如果是的话就不要混用，如果不是的话请提供最小复现