ParticleHelper.CreateFromSnippetAsync is not a function in React App

Hello guys, this is the first time I am using the particle system in React.js. I am using BABYLON.ParticleHelper.CreateFromSnippetAsync("2MRQQF", scene, ""); in my function and calling it inside useEffect(). Taken the code from this playground “https://www.babylonjs-playground.com/#7JA4KL#1” but getting this error.

TypeError: babylonjs__WEBPACK_IMPORTED_MODULE_1__.ParticleHelper.CreateFromSnippetAsync is not a function

I wonder react master can help :smiley: @brianzinn

what’s at the top of your imports? you would need to use the legacy import * as BABYLON from ... for ParticleHelper to be available like that.

I did import it, using this import * as BABYLON from 'babylonjs';
In my code when I hover over the ParticleHelper it’s available but CreateFromSnippetAsync says any which means it’s not importing.
Like this

Are you using 4.2?
I can see this function was recently added, so older versions will of course result in “is not a function”

2 Likes

if you are using babylonjs NPM then you should also be on an old react-babylonjs <= 1.0.3? I switched over to @babyonjs/* in v2.x a year ago, which was why the major version was bumped.

Right now I am using 2.2.1 version, should I upgrade it to use CreateFromSnippetAsync function?

Since you are onreact-babylonjs v2+, I would switch over to @babylonjs/core entirely. You would then not have any import ... from 'babylonjs', but you can still use this default import from @babylonjs/core, which is backwards compatible and exports everything. I haven’t used that static function specifically, but it does appear to have been around for a while. If it’s still not working then just share what you brought into your package.json for babylonjs and your imports. I imagine we can sort it out from there :slight_smile:

Sure here is my package.json
@babylonjs/core”: “^4.1.0”,
@babylonjs/gui”: “^4.1.0”,
@babylonjs/inspector”: “^4.1.0”,
@babylonjs/loaders”: “^4.1.0”,
@babylonjs/materials”: “^4.1.0”,
“babylonjs-loaders”: “^4.1.0”,
“react-babylonjs”: “^2.2.7”,
And here is my import section

remove babylonjs-loaders - it’s the same as @babylonjs/loaders. I suspect you have babylonjs in your node_modules folder or it wouldn’t resolve at all. Make sure it’s out of your package.json at any rate and then you can fix the import to:

import * as BABYLON from '@babylonjs/core/Legacy/legacy';

The other thing is it looks like that static method was added after 4.1. So, you need to go up to 4.2 - it’s out of alpha, so it’s usually pretty safe :slight_smile:

Finally, haha changing Babylon-core to version 4.2.0-beta.5 worked. Thank you @brianzinn and @aWeirdo for your help. :blush:

1 Like