# Encountered issues using the spine plugin in a Typescript project.

**URL:** <https://phaser.discourse.group/t/encountered-issues-using-the-spine-plugin-in-a-typescript-project/13838>\
**Category:** Phaser 3\
**Created:** [December 26, 2023, 10:42am UTC](https://phaser.discourse.group/t/encountered-issues-using-the-spine-plugin-in-a-typescript-project/13838 "2023-12-26T10:42:57Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![readpan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/readpan/32/7939_2.png) [@readpan](https://phaser.discourse.group/u/readpan)\
**Post date:** [December 26, 2023, 10:42am UTC](https://phaser.discourse.group/t/encountered-issues-using-the-spine-plugin-in-a-typescript-project/13838/1 "2023-12-26T10:42:57Z")

</div>

Use this project as a base: [GitHub - photonstorm/phaser3-typescript-project-template: A quick-start project template that uses Phaser 3, TypeScript and Rollup for bundling](https://github.com/photonstorm/phaser3-typescript-project-template.git)

There will be an error at `import {SpinePlugin} from 'phaser/types/SpinePlugin'` (The file ‘/Users/panjianbo/Projects/html5/phaser/phaser3-typescript-project-template/node\_modules/phaser/types/SpinePlugin.d.ts’ is not a module.ts(2306))

Why does this happen? How can it be resolved? Thank you!

```javascript
import * as Phaser from 'phaser';
// import {SpinePlugin} from 'phaser/plugins/spine/dist/SpinePlugin'
// import {SpinePlugin} from 'phaser/types/SpinePlugin'
import {SpinePlugin} from 'phaser/types/SpinePlugin'

export default class Demo extends Phaser.Scene {
    constructor() {
        super('demo');
    }

    preload() {
        this.load.image('logo', 'assets/phaser3-logo.png');
        this.load.image('libs', 'assets/libs.png');
        this.load.glsl('bundle', 'assets/plasma-bundle.glsl.js');
        this.load.glsl('stars', 'assets/starfields.glsl.js');
        this.load.spine('boy', 'assets/goblins/goblins-pro.json', 'assets/goblins/goblins-pma.atlas', true);
    }

    create() {
        this.add.shader('RGB Shift Field', 0, 0, 800, 600).setOrigin(0);

        this.add.shader('Plasma', 0, 412, 800, 172).setOrigin(0);

        this.add.image(400, 300, 'libs');

        const logo = this.add.image(400, 70, 'logo');

        this.tweens.add({
            targets: logo,
            y: 350,
            duration: 1500,
            ease: 'Sine.inOut',
            yoyo: true,
            repeat: -1
        })
        // @ts-ignore
        var spineBoy = this.add.spine(400, 600, 'boy', 'run', true);
        spineBoy.setScale(0.7);
    }
}

const config = {
    type: Phaser.AUTO,
    backgroundColor: '#125555',
    width: 800,
    height: 600,
    scene: Demo,
    plugins: {
        scene: [
            { key: 'SpinePlugin', plugin: SpinePlugin, mapping: 'spine' }
        ]
    },
};

const game = new Phaser.Game(config);

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [December 31, 2023, 4:57pm UTC](https://phaser.discourse.group/t/encountered-issues-using-the-spine-plugin-in-a-typescript-project/13838/2 "2023-12-31T16:57:02Z")

</div>

If you’re not seeing any SpinePlugin types, then you might add `phaser/types/SpinePlugin.d.ts` to `include` in `tsconfig.json`, but I’m not sure.

---

<div class="post-metadata">

**Author:** ![readpan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/readpan/32/7939_2.png) [@readpan](https://phaser.discourse.group/u/readpan)\
**Post date:** [January 1, 2024, 3:50pm UTC](https://phaser.discourse.group/t/encountered-issues-using-the-spine-plugin-in-a-typescript-project/13838/3 "2024-01-01T15:50:45Z")

</div>

Thank you for your reply. I have very limited experience with Phaser and would like to ask if version 3.70.0 of \<[Phaser.js](https://cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser.min.js)\> already includes the Spine plugin by default? Currently, I install Spine myself using npm. Thanks!

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 1, 2024, 5:14pm UTC](https://phaser.discourse.group/t/encountered-issues-using-the-spine-plugin-in-a-typescript-project/13838/4 "2024-01-01T17:14:38Z")

</div>

The Spine plugins are part of the Phaser releases but not in `phaser.js`. I think you’ll have to do

```js
/* global SpinePlugin */

import * as Phaser from 'phaser';
import 'phaser/plugins/spine/dist/SpinePlugin.js';

```