有两个具有相同标识符的导入 typescript

Question

From what I read importing both libraries seems to be the solution to a WebGL bug I ran into a bug and it seems like the accepted solution is to import like this:

import PIXI, { Graphics } from 'pixi.js-legacy';
import PIXI from 'pixi.js';

However, doing so causes the following issues:

/x/y/FILE_PATH: Identifier 'PIXI' has already been declared (2:7)

as well as duplicate identifiers:

 declare namespace PIXI {
  ~~~~~~~

  node_modules/pixi.js/pixi.js.d.ts:4:1
    4 declare namespace PIXI {
      ~~~~~~~
    Conflicts are in this file.

node_modules/pixi.js-legacy/pixi.js-legacy.d.ts:14:9 - error TS2323: Cannot redeclare exported variable 'VERSION'.

14     var VERSION: string;
           ~~~~~~~

node_modules/pixi.js-legacy/pixi.js-legacy.d.ts:3408:9 - error TS2323: Cannot redeclare exported variable 'defaultVertex'.

3408     var defaultVertex: string;
             ~~~~~~~~~~~~~

node_modules/pixi.js-legacy/pixi.js-legacy.d.ts:3414:9 - error TS2323: Cannot redeclare exported variable 'defaultFilterVertex'.

3414     var defaultFilterVertex: string;
             ~~~~~~~~~~~~~~~~~~~

node_modules/pixi.js-legacy/pixi.js-legacy.d.ts:11929:9 - error TS2323: Cannot redeclare exported variable 'GRAPHICS_CURVES'.

11929     var GRAPHICS_CURVES: {
              ~~~~~~~~~~~~~~~

node_modules/pixi.js-legacy/pixi.js-legacy.d.ts:13426:9 - error TS2323: Cannot redeclare exported variable 'PI_2'.

13426     var PI_2: number;
              ~~~~

node_modules/pixi.js-legacy/pixi.js-legacy.d.ts:13434:9 - error TS2323: Cannot redeclare exported variable 'RAD_TO_DEG'.

13434     var RAD_TO_DEG: number;
              ~~~~~~~~~~

node_modules/pixi.js-legacy/pixi.js-legacy.d.ts:13442:9 - error TS2323: Cannot redeclare exported variable 'DEG_TO_RAD'.

13442     var DEG_TO_RAD: number;
              ~~~~~~~~~~

node_modules/pixi.js-legacy/pixi.js-legacy.d.ts:24370:9 - error TS2323: Cannot redeclare exported variable 'TEXT_GRADIENT'.

24370     var TEXT_GRADIENT: {
              ~~~~~~~~~~~~~

node_modules/pixi.js-legacy/pixi.js-legacy.d.ts:25823:9 - error TS2323: Cannot redeclare exported variable 'DATA_URI'.

25823     var DATA_URI: RegExp | string;
              ~~~~~~~~

node_modules/pixi.js/pixi.js.d.ts:4:1 - error TS6200: Definitions of the following identifiers conflict with those in another file: AlphaFilter, BlurFilter, BlurFilterPass, ColorMatrixFilter, DisplacementFilter, FXAAFilter, NoiseFilter, AccessibilityManager, WEBGL_LEGACY, WEBGL, WEBGL2, UNKNOWN, CANVAS, COLOR, DEPTH, STENCIL, NORMAL, ADD, MULTIPLY, SCREEN, OVERLAY, DARKEN, LIGHTEN, COLOR_DODGE, COLOR_BURN, HARD_LIGHT, SOFT_LIGHT, DIFFERENCE, EXCLUSION, HUE, SATURATION, LUMINOSITY, NORMAL_NPM, ADD_NPM, SCREEN_NPM, NONE, SRC_IN, SRC_OUT, SRC_ATOP, DST_OVER, DST_IN, DST_OUT, DST_ATOP, SUBTRACT, SRC_OVER, ERASE, XOR, POINTS, LINES, LINE_LOOP, LINE_STRIP, TRIANGLES, TRIANGLE_STRIP, TRIANGLE_FAN, RGBA, RGB, ALPHA, LUMINANCE, LUMINANCE_ALPHA, DEPTH_COMPONENT, DEPTH_STENCIL, TEXTURE_2D, TEXTURE_CUBE_MAP, TEXTURE_2D_ARRAY, TEXTURE_CUBE_MAP_POSITIVE_X, TEXTURE_CUBE_MAP_NEGATIVE_X, TEXTURE_CUBE_MAP_POSITIVE_Y, TEXTURE_CUBE_MAP_NEGATIVE_Y, TEXTURE_CUBE_MAP_POSITIVE_Z, TEXTURE_CUBE_MAP_NEGATIVE_Z, UNSIGNED_BYTE, UNSIGNED_SHORT, UNSIGNED_SHORT_5_6_5, UNSIGNED_SHORT_4_4_4_4, UNSIGNED_SHORT_5_5_5_1, FLOAT, HALF_FLOAT, LINEAR, NEAREST, CLAMP, REPEAT, MIRRORED_REPEAT, OFF, POW2, ON, NO_PREMULTIPLIED_ALPHA, PREMULTIPLY_ON_UPLOAD, PREMULTIPLIED_ALPHA, NPM, UNPACK, PMA, BLEND, CLEAR, BLIT, NO, YES, AUTO, MANUAL, LOW, MEDIUM, HIGH, SCISSOR, SPRITE, AbstractRenderer, Renderer, System, AbstractBatchRenderer, BatchDrawCall, BatchGeometry, BatchPluginFactory, BatchShaderGenerator, BatchTextureArray, ObjectRenderer, Filter, SpriteMaskFilter, Framebuffer, GLFramebuffer, Attribute, Buffer, Geometry, ViewableBuffer, MaskData, BaseRenderTexture, RenderTexture, RenderTexturePool, GLProgram, Program, Shader, UniformGroup, State, BatchSystem, ContextSystem, FilterSystem, FramebufferSystem, GeometrySystem, AbstractMaskSystem, MaskSystem, ScissorSystem, StencilSystem, ProjectionSystem, RenderTextureSystem, ShaderSystem, StateSystem, TextureGCSystem, TextureSystem, BaseTexture, GLTexture, Texture, TextureMatrix, TextureUvs, AbstractMultiResource, ArrayResource, BaseImageResource, BufferResource, CanvasResource, CubeResource, DepthResource, ImageBitmapResource, ImageResource, Resource, SVGResource, VideoResource, Quad, QuadUv, Bounds, Container, DisplayObject, Extract, Graphics, GraphicsData, GraphicsGeometry, MITER, BEVEL, ROUND, BUTT, SQUARE, FillStyle, LineStyle, BatchPart, Star, InteractionData, InteractionEvent, InteractionManager, AppLoaderPlugin, ILoaderPlugin, LoaderResource, TextureLoader, Matrix, ObservablePoint, Point, Transform, POLY, RECT, CIRC, ELIP, RREC, GD8Symmetry, Circle, Ellipse, Polygon, ISize, Rectangle, RoundedRectangle, Mesh, MeshBatchUvs, MeshGeometry, MeshMaterial, NineSlicePlane, SimpleMesh, SimplePlane, SimpleRope, RopeGeometry, ParticleContainer, ParticleRenderer, BasePrepare, CountLimiter, Prepare, TimeLimiter, Runner, Sprite, TilingSprite, TilingSpriteRenderer, Spritesheet, SpritesheetLoader, Text, IFontMetrics, TextMetrics, TextStyle, BitmapFont, IBitmapFontDataInfo, IBitmapFontDataCommon, IBitmapFontDataPage, IBitmapFontDataChar, IBitmapFontDataKerning, BitmapFontData, BitmapFontLoader, BitmapText, Ticker, TickerPlugin, INTERACTION, UTILITY, EventEmitter, CanvasRenderTarget, InteractionPointerEvents, InteractionTouchEvents, InteractionMouseEvents, InteractionPixiEvents, InteractionEventTypes

4 declare namespace PIXI {
  ~~~~~~~

  node_modules/pixi.js-legacy/pixi.js-legacy.d.ts:4:1
    4 declare namespace PIXI {
      ~~~~~~~
    Conflicts are in this file.

node_modules/pixi.js/pixi.js.d.ts:14:9 - error TS2323: Cannot redeclare exported variable 'VERSION'.

14     var VERSION: string;
           ~~~~~~~

node_modules/pixi.js/pixi.js.d.ts:968:11 - error TS2649: Cannot augment module 'Application' with value exports because it resolves to a non-module entity.

968     class Application {
              ~~~~~~~~~~~

node_modules/pixi.js/pixi.js.d.ts:2798:9 - error TS2323: Cannot redeclare exported variable 'defaultVertex'.

2798     var defaultVertex: string;
             ~~~~~~~~~~~~~

node_modules/pixi.js/pixi.js.d.ts:2804:9 - error TS2323: Cannot redeclare exported variable 'defaultFilterVertex'.

2804     var defaultFilterVertex: string;
             ~~~~~~~~~~~~~~~~~~~

node_modules/pixi.js/pixi.js.d.ts:11256:9 - error TS2323: Cannot redeclare exported variable 'GRAPHICS_CURVES'.

11256     var GRAPHICS_CURVES: {
              ~~~~~~~~~~~~~~~

node_modules/pixi.js/pixi.js.d.ts:11987:12 - error TS2649: Cannot augment module 'Loader' with value exports because it resolves to a non-module entity.

11987     module Loader {
                 ~~~~~~

node_modules/pixi.js/pixi.js.d.ts:12753:9 - error TS2323: Cannot redeclare exported variable 'PI_2'.

12753     var PI_2: number;
              ~~~~

node_modules/pixi.js/pixi.js.d.ts:12761:9 - error TS2323: Cannot redeclare exported variable 'RAD_TO_DEG'.

12761     var RAD_TO_DEG: number;
              ~~~~~~~~~~

node_modules/pixi.js/pixi.js.d.ts:12769:9 - error TS2323: Cannot redeclare exported variable 'DEG_TO_RAD'.

12769     var DEG_TO_RAD: number;
              ~~~~~~~~~~

node_modules/pixi.js/pixi.js.d.ts:20197:12 - error TS2649: Cannot augment module 'AnimatedSprite' with value exports because it resolves to a non-module entity.

20197     module AnimatedSprite {
                 ~~~~~~~~~~~~~~

node_modules/pixi.js/pixi.js.d.ts:23479:9 - error TS2323: Cannot redeclare exported variable 'TEXT_GRADIENT'.

23479     var TEXT_GRADIENT: {
              ~~~~~~~~~~~~~

node_modules/pixi.js/pixi.js.d.ts:24917:9 - error TS2323: Cannot redeclare exported variable 'DATA_URI'.

24917     var DATA_URI: RegExp | string;
              ~~~~~~~~

app/services/hud/hud.ts:1:8 - error TS2300: Duplicate identifier 'PIXI'.

1 import PIXI, { Graphics } from 'pixi.js-legacy';
         ~~~~

app/services/hud/hud.ts:2:8 - error TS2300: Duplicate identifier 'PIXI'.

2 import PIXI from 'pixi.js';

Do I have any options to make this work without removing one of the imports?

Answer 1

Use an import alias, like this: import PIXI as PIXIJS from 'pixi.js'

Reference: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/import