pixijs: Unable to compile Angular 11.2 project using PIXI v6.0.0

I just upgraded PIXI to v6 from 5.3.8 in an Angular and TypeScript project I have. When I compile my angular project I’m seeing a whole bunch of errors related to mini-signals. I’m wondering if it is related to this https://github.com/pixijs/pixi.js/issues/7011 and might be an easy fix.

Here are the errors:

Error: node_modules/mini-signals/typings/mini-signals.d.ts:19:2 - error TS2309: An export assignment cannot be used in a module with other exported elements.

19  export = MiniSignal;
    ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/resource-loader/typings/resource-loader.d.ts:102:17 - error TS2304: Cannot find name 'Signal'.

102     onComplete: Signal<Loader.OnCompleteSignal>;
                    ~~~~~~


Error: node_modules/resource-loader/typings/resource-loader.d.ts:476:14 - error TS2304: Cannot find name 'Signal'.

476     onStart: Signal<Resource.OnStartSignal>;
                 ~~~~~~


Error: node_modules/resource-loader/typings/resource-loader.d.ts:488:17 - error TS2304: Cannot find name 'Signal'.

488     onProgress: Signal<Resource.OnProgressSignal>;
                    ~~~~~~


Error: node_modules/resource-loader/typings/resource-loader.d.ts:497:17 - error TS2304: Cannot find name 'Signal'.

497     onComplete: Signal<Resource.OnCompleteSignal>;
                    ~~~~~~


Error: node_modules/resource-loader/typings/resource-loader.d.ts:505:24 - error TS2304: Cannot find name 'Signal'.

505     onAfterMiddleware: Signal<Resource.OnCompleteSignal>;
                           ~~~~~~


Error: node_modules/resource-loader/typings/resource-loader.d.ts:70:17 - error TS2304: Cannot find name 'Signal'.

70     onProgress: Signal<Loader.OnProgressSignal>;
                   ~~~~~~


Error: node_modules/resource-loader/typings/resource-loader.d.ts:78:14 - error TS2304: Cannot find name 'Signal'.

78     onError: Signal<Loader.OnErrorSignal>;
                ~~~~~~


Error: node_modules/resource-loader/typings/resource-loader.d.ts:86:13 - error TS2304: Cannot find name 'Signal'.

86     onLoad: Signal<Loader.OnLoadSignal>;
               ~~~~~~


Error: node_modules/resource-loader/typings/resource-loader.d.ts:94:14 - error0m TS2304: Cannot find name 'Signal'.

94     onStart: Signal<Loader.OnStartSignal>;
                ~~~~~~

Below is my tsconfig, updated to match https://github.com/pixijs/pixi.js/releases/tag/v6.0.0, and the packages that I have installed from my package.json. If this isn’t enough information, I can get a starter project together for Angular to see if I can get an easy reproduce case to help troubleshoot.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "downlevelIteration": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "esModuleInterop": true,
    "paths": {
      "mini-signals": ["node_modules/resource-loader/typings/mini-signals.d.ts"]
    }
  },
  "angularCompilerOptions": {
    "strictTemplates": true
  },
  "exclude": ["./server/"]
}

  "dependencies": {
    "@angular/animations": "^11.2.5",
    "@angular/cdk": "^11.2.4",
    "@angular/common": "^11.2.5",
    "@angular/compiler": "^11.2.5",
    "@angular/core": "^11.2.5",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "^11.2.5",
    "@angular/material": "^11.2.4",
    "@angular/platform-browser": "^11.2.5",
    "@angular/platform-browser-dynamic": "^11.2.5",
    "@angular/router": "^11.2.5",
    "@angular/service-worker": "^11.2.5",
    "@ngxs/devtools-plugin": "^3.7.1",
    "@ngxs/storage-plugin": "^3.7.1",
    "@ngxs/store": "^3.7.1",
    "@turf/buffer": "^6.3.0",
    "@turf/union": "^6.3.0",
    "@types/chart.js": "^2.9.31",
    "@types/d3-contour": "^2.0.0",
    "chart.js": "^2.9.4",
    "core-js": "^3.9.1",
    "d3-contour": "^2.0.0",
    "email-validator": "^2.0.4",
    "material-design-icons": "^3.0.1",
    "moment": "^2.29.1",
    "ngx-color-picker": "^11.0.0",
    "ngx-markdown": "^11.1.2",
    "ngx-perfect-scrollbar": "^10.1.0",
    "ngxs-reset-plugin": "^1.3.1",
    "pixi.js": "^6.0.0",
    "project-name-generator": "^2.1.9",
    "query-string": "^6.14.1",
    "rgb-hex": "^3.0.0",
    "run-script-os": "^1.1.5",
    "rxjs": "^6.6.6",
    "simplify-ts": "^1.0.2",
    "socket.io-client": "^4.0.0",
    "tslib": "^2.1.0",
    "uuid": "^8.3.2",
    "zone.js": "^0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1102.4",
    "@angular/cli": "^11.2.4",
    "@angular/compiler-cli": "^11.2.5",
    "@angular/language-service": "^11.2.5",
    "@types/jasmine": "^3.6.6",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^14.14.35",
    "@types/socket.io-client": "^1.4.36",
    "@types/uuid": "^8.3.0",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "^6.0.0",
    "karma": "^5.2.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "rimraf": "^3.0.2",
    "ts-node": "^9.1.1",
    "tslint": "^6.1.3",
    "typescript": "^4.0.7"
  }

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 12
Comments: 17 (4 by maintainers)

Most upvoted comments

I have a larger fix that I want to implement that will address this and a bunch of other issues related to resource-loader and mini-signals. The types for these packages are not ideal at the moment. Here’s the summary of changes I’d like to see:

hard fork v3 resource-loader into the @pixi/loaders package
remove mini-signals and use events instead (Loader is the only code that uses mini-signals)
cleanup ILoaderResource and other Loader interfaces to use GlobalMixins

Here are the advantages:

simplifies the dependencies
removes the path tsconfig for mini-signals
overall better more consistent dev experience
improved types for Loader

bigtimebuddy on Apr 2, 2021

same issue here, not building with angular

razaqq on Apr 19, 2021

just add this to tsconfig.json

    "paths": {
      "mini-signals": [
        "node_modules/mini-signals/index.js"
      ]
    }

it will resolve the errors and all works in runtime too

if you dont mind the warning:

resource-loader.esm.js depends on 'mini-signals'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Prozi on Apr 2, 2021

So, if like myself, you really want to use the latest version of pixi.js, here is what I did to fix this issue as a temporary fix using patch-package:

Run npm i -D patch-package
Remove export = MiniSignal from node_modules\mini-signals\typings\mini-signals.d.ts
Run npx patch-package mini-signals
Add “patch-package” to your “postInstall” in your package.json file. For example, I put it at the end of mine:

"postinstall": "npm run ivy-entries && cd server && npm install && cd .. && patch-package"

Remove the “paths” section in your tsconfig.json file because we changed the typings file in mini-signals and not the one provided by resource-loader.

Then, every time you reinstall your packages, it will apply the patch to mini-signals.d.ts directly in the mini-signals package.

I was then able to use ng serve and ng build without any issues and pixi.js still worked as expected.

I’ll admit, its a little hacky, but lets me use the latest version of pixi.js, so I’m OK with it as a temporary workaround.

znorman-harris on Mar 20, 2021

adding this to tsconfig.json fix the issue for me with Angular 12:

  "allowSyntheticDefaultImports": true,
    "paths": {
      "mini-signals": [
        "node_modules/mini-signals/index.js"
      ]
    }

maitrungduc1410 on Jun 7, 2021

@bigtimebuddy Thanks for the response! I put together a minimal reproduce case using Angular which is located here:

https://github.com/znorman-harris/pixi-v6

I have it working with v5 and broken with v6 and there are steps to show both (along with screenshots) in the repo. The error I get is slightly different from a brand new Angular project (my other one has been migrated from older versions), but it still does not work and is related to mini-signals.

The code that initializes the pixi application is in src/app/app.component.ts in the ngOnInit method.

Edit: Here is the new error I get after the application builds correctly. Forgot to include this.

ERROR TypeError: mini_signals__WEBPACK_IMPORTED_MODULE_1___default.a is not a constructor
    at Loader (resource-loader.esm.js:1735)
    at new Loader (loaders.js:137)
    at Application.push.XXeg.AppLoaderPlugin.init (loaders.js:320)
    at app.js:77
    at Array.forEach (<anonymous>)
    at new Application (app.js:76)
    at AppComponent.ngOnInit (app.component.ts:23)
    at callHook (core.js:2535)
    at callHooks (core.js:2506)
    at executeInitAndCheckHooks (core.js:2457)

znorman-harris on Mar 22, 2021

For others who had this problem, I ended up migrating my monorepo (where I first encountered this problem) to NX and I no longer have any issues with PIXI compiling! Also, you get the goodness of eslint out-of-the-box with NX and it got me using some of the latest angular features like strict templates.

Might not be an option for everyone, and there is a little learning curve to using NX, but figured it couldn’t help to share!

Edit: Just to clarify, I didn’t switch to NX to fix this problem. It just happened to not be an issue anymore after switching to NX and I didn’t need to do anything besides adding "allowSyntheticDefaultImports": true to my tsconfig.base.json file.

znorman-harris on Jun 8, 2021

I am seeing a similar issue with Angular 13.0.4 and PixiJS 6.2.2

None of the above workarounds have worked for me.

EDIT: disregard, my issue wasn’t similar enough to this issue.

klsmith on Mar 13, 2022

Just wanted to add that I’m experiencing this bug with a non-Angular project and none of the previous workarounds work for me (except removing the offending line).

btmorex on Jun 9, 2021

after modifying tsconfig.json, I got this error

core.js:6162 ERROR TypeError: mini_signals__WEBPACK_IMPORTED_MODULE_1___default.a is not a constructor at Loader (resource-loader.esm.js:1735) at new Loader (loaders.js:137) at Application.push.XXeg.AppLoaderPlugin.init (loaders.js:320) at app.js:77 at Array.forEach (<anonymous>) at new Application (app.js:76) …

I am temporarily using this method

go node_modules/resource-loader/dist/resource-loader.esm.js

import Signal from ‘mini-signals’; -> import Signal from ‘…/…/mini-signals’;

PreNa on Mar 20, 2021