New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Latest Pixi not compatible with Angular 7 #5367

Open
krojew opened this Issue Jan 15, 2019 · 15 comments

Comments

Projects
None yet
6 participants
@krojew
Copy link

krojew commented Jan 15, 2019

Continuation of #4921 since it's not resolved for v7.

Expected Behavior

Angular 7 with Pixi should build.

Current Behavior

Build fails with multiple instances of:

Module not found: Error: Can't resolve 'path' in ...

Steps to Reproduce

Install Pixi with Angular 7, using official npm packages. Run ng build or ng serve.

Environment

  • pixi.js version: 4.8.5
  • OS & Version: Ubuntu 18.10
  • Angular version: 7.1.2
@bigtimebuddy

This comment has been minimized.

Copy link
Member

bigtimebuddy commented Jan 15, 2019

Could you please provide a repo the reproduces? We are not Angular folks here and need some help figuring out this integration. Thanks.

@ivanpopelyshev

This comment has been minimized.

@krojew

This comment has been minimized.

Copy link
Author

krojew commented Jan 16, 2019

This is a simple project based on the previous bug, but updated to the latest versions: https://github.com/krojew/test-pixi

After cloning, run npm install and ng build. You should see a lot of errors from pixi relating to 'path'.

@Galiza

This comment has been minimized.

Copy link

Galiza commented Jan 16, 2019

Yep, the issue does happen to me as well.
This was the solution for me: #4921 (comment)

@clark-stevenson

This comment has been minimized.

Copy link
Member

clark-stevenson commented Jan 16, 2019

My Stackblitz seems fine: App

I just updated dependencies, added pixi.js and @types/pixi.js

Then pasted this into app.component.ts

import { Component } from '@angular/core';
import { Application } from 'pixi.js';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private app = new Application();
}

It works fine, it asks for a url dependency but I presume that is just Stackblitz?

Anyway, locally, the exact same project fails to build with the same errors above. 😕 How can that be?

@ivanpopelyshev

This comment has been minimized.

Copy link
Member

ivanpopelyshev commented Jan 18, 2019

I take it , link that I sent is not related to the issue? It cant find path module, is that right?

@clark-stevenson

This comment has been minimized.

Copy link
Member

clark-stevenson commented Jan 19, 2019

@ivanpopelyshev

Ahh sorry! I missed your link somehow.

On the link you sent us above. I looked at just the first "annoying example".

This file

node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js

By default is node: false but when when it is changed to node: { path: true }. Then the following commands work.

  • ng serve
  • ng build
  • ng build --prod

Soon as I flip that back to node: false. We return to this Issue.

We can I guess assume the article is correct, this is a webpack or angular issue. Pixi just has the symptoms. None the less, for the people experiencing this with pixi, nothing in that article is ideal, I am not sure where we can go to shake a collective fist.

@krojew

This comment has been minimized.

Copy link
Author

krojew commented Jan 25, 2019

Maybe there's a way to gracefully handle node dependencies? At the moment, pixi is the only package I've encountered with this issue, so I suspect there is a way to do it.

@bigtimebuddy

This comment has been minimized.

Copy link
Member

bigtimebuddy commented Jan 25, 2019

With other bundlers, they have builtins polyfills for node.js modules like path. I assume maybe there’s something similar in Angular?

@krojew

This comment has been minimized.

Copy link
Author

krojew commented Jan 25, 2019

Given that other packages build with Angular, I suspect it's up to the package to handle it.

@bigtimebuddy

This comment has been minimized.

Copy link
Member

bigtimebuddy commented Jan 25, 2019

I don't think path is used in many places, so I can switch over to use https://www.npmjs.com/package/path instead, which should solve this.

@axelvaindal axelvaindal referenced this issue Feb 7, 2019

Closed

Update pixi dependency to version 4.7.2 #5

2 of 2 tasks complete
@axelvaindal

This comment has been minimized.

Copy link

axelvaindal commented Feb 7, 2019

@bigtimebuddy Any plan to release your proposal in a new fix anytime soon ?
We are heavily relying on pixi in a Meteor.js environment using webpack, and this bug pretty much breaks all our application 😕

@bigtimebuddy

This comment has been minimized.

Copy link
Member

bigtimebuddy commented Feb 7, 2019

PR welcome to v4.x branch to fix this. I have a release I need to do for v4 so we should be able to get this out quickly.

@axelvaindal

This comment has been minimized.

Copy link

axelvaindal commented Feb 8, 2019

I've managed to make my project work by running npm install --save path so it would be bundled along pixi client side.
@bigtimebuddy
I'll propose a PR that just add path as a dependency to pixi.js, I assume it's the only thing I have to do so the require looks for bundled module instead of the native one right ?

@ivanpopelyshev

This comment has been minimized.

Copy link
Member

ivanpopelyshev commented Feb 9, 2019

Is there module version of pixi-v4? I thought we have that only in v5.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment