(new PIXI.Application).start() and stop() is not a function error, in Typescript

[cyocun]

Expected Behavior

works just fine.

Current Behavior

With TypeScript.

import * as PIXI from 'pixi.js'
const app = new PIXI.Application()
...
app.stop()

Will result in an error. The attached image shows the result of console.log(app).

If I use yarn add pixi.js@6.4.2, there is no problem, but if I use I get the same error in both 6.5.1 and 6.5.2. It works fine with codepen, etc., but Do you know the cause?

Possible Solution

Version down...

Environment

• pixi.js version: 6.5.2
• Browser & Version: Chrome 104
• OS & Version: Mac OS 12.5.1
• Running Example: See attached image.

[bigtimebuddy]

Possibly this: https://github.com/pixijs/pixijs/wiki/Upgrading-PixiJS

Make sure you uninstall pixi.js before installing a new version. See if that helps.

[cyocun]

Thank you for letting me know!

I tried rm -rf node_modules/ rm yarn.lock yarn cache clean yarn add pixi.js

and I changed to npm install pixi.js and tried the same thing again. but, the result did not change.

I understand there is no problem with pixi.js 6.5.2, but it doesn't seem to solve it.

I have no choice but to use 6.4.2, but please let me know if there is anything else I can do.🥺 If there's nothing else I can do, I'll close this question as there seems to be no solution.

[domis86]

@cyocun as you see here https://codesandbox.io/s/simple-pixijs-application-example-ytxhk8?file=/src/index.js there is no error. So most likely it is something in your setup, some other cache etc.

For example: Please double-check where is your yarn cache dir and if is really cleaned - see comment: https://stackoverflow.com/questions/39991508/how-to-clear-cache-in-yarn#comment109010057_40230451

[bigtimebuddy]

Or could you provide a reproduction? That the easiest way to see if it's your setup or an issue with the project.

[cyocun]

@domis86 @bigtimebuddy

The original project is huge, so I made a new sample. One thing I forgot to tell you is that it runs on NuxtJS.

And it still says app.start is not a function and I was able to reproduce it 100%.

https://codesandbox.io/s/fervent-platform-v1vzcz?file=/pages/index.vue

If I just import pixi.js, I get an error (https://github.com/vuejs/pinia/issues/675), so I added the following to nuxt.config.js I am adding a rule to build mjs. https://codesandbox.io/s/fervent-platform-v1vzcz?file=/nuxt.config.js

Is this affecting it? I would be happy to hear a good solution.

[domis86]

Ok - so it seems that you try to run this "server side" (not in browser).

In this case i would suggest to try this: https://github.com/pixijs/pixijs/tree/dev/bundles/pixi.js-node

[btravel]

Got the same problem - seems that pixi plugins are not initialized correctly after migrating from v6.1.1 to v6.5.2.

Environment

• Typescript 4.4.4
• Yarn v1.22.19 (using yarn workspaces monorepo)
• Pixi.js v6.5.2
• Create React App 4
• Craco (to fix MJS problem https://github.com/pixijs/pixijs/issues/8554)

Code

import * as Pixi from 'pixi.js';

const app = new Pixi.Application();
console.log(app.start);
console.log(app.ticker);
console.log(app.renderer.plugins);

Output

undefined undefined {}

I've tried to completely uninstall pixi and install it from scratch - didn't help.

Seems that the Pixi.JS NPM module structure was changed and not compatible with my typescript / webpack setup.

I was trying also to remove all pixi.js folders completely in node_modules/ and install new - still no success.

At the same time it works correctly in a sandbox: https://codesandbox.io/s/headless-cdn-dsoqm7?file=/src/App.js

Any idea what's going on?

[bigtimebuddy]

I think yarn and npm resolve their PeerDependencies differently. Can you try with npm and see if that makes a difference?

[btravel]

think yarn and npm resolve their PeerDependencies differently. Can you try with npm and see if that makes a difference?

@bigtimebuddy Thanks, seems that yarn is the reason. I’ve found another thread with a working solution for yarn: https://github.com/pixijs/pixijs/issues/6530

I’ve tried Npm version in codesandbox and it works like a charm

[cyocun]

@domis86

Ok - so it seems that you try to run this "server side" (not in browser).

In this case i would suggest to try this: https://github.com/pixijs/pixijs/tree/dev/bundles/pixi.js-node

Thank you check for codesandbox But I want to run it in a browser. So "@pixi/node" seems different.

and, I read https://github.com/pixijs/pixijs/issues/8624#issuecomment-1236369497 and tried again with npm.

npm cache clean --force
rm -rf node_modules/
rm -rf ~/.npm
npm i 

But nothing changed in the result... The situation is the same for yarn and npm.

I also think there is a problem with this code in nuxt.config.js.

  build: {
    extend(config, { loaders }) {
      config.module?.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      })
    },
  },

However, if don't write this will get a lot of errors like the following

Can't import the named export 'ALPHA_MODES' from non EcmaScript module (only default export is available)
Can't import the named export 'BUFFER_TYPE' from non EcmaScript module (only default export is available)
.
.
.

[domis86]

@cyocun look at example here: https://codesandbox.io/s/optimistic-dhawan-yvedwt?file=/src/components/HelloWorld.vue <- is working with Vue + PixiJS 6.5.3.

Also please check answers there: https://stackoverflow.com/questions/61780010/how-to-load-a-pixi-instance-in-vuejs

[foolmadao]

Got the same problem in Angular 10 and PIXI 6.5.3.

[dbuzinin]

Try adding in the webpack settings: mainFields: ['browser', 'main', 'module'],

https://webpack.js.org/configuration/resolve/#resolvemainfields

This helped me eliminate all the bugs that appeared after upgrading to 6.5.1 and above

[Thel27]

Hi, I got the same problem with a React app from create react app's module. I tried to upgrade from pixi 6.4.2 to 6.5.4.

Here are my dependency : "webpack": "4.44.2", "react": "^16.13.0",

Also, I had to install react-app-rewired to change my webpack config and resolve the .mjs problem.