Import Javascript Library Into TypeScript For StencilJs

Question

I have included the following js library in my project: Particles.js. Now in my component I import it and load it like this:

import { Component, h } from '@stencil/core';
import * as particlesJS from 'particles.js';

@Component({
    tag: 'app-home',
    styleUrl: 'app-home.css'
})
export class AppHome {

    componentDidLoad() {
        particlesJS.load('particles-js', 'assets/particlesjs-config.json', function() {
            console.log('callback - particles.js config loaded');
        });
    }

    render() {
        return (
            <div id="particles" class='app-home w-full h-full fixed bg-blue-200'>

            </div>
        );
    }
}

Now the problem is when I build and run my code I get the following error:

TypeError: "undefined is not a function"

particlesJS always seems to be undefined for some reason even though I have imported it at the top.

Thomas · Accepted Answer · 2019-10-31 12:30:43Z

1

particles.js does not export any variables but instead sets a variable on the global window object, so you can't import it like this. Instead try

import 'particles.js';

Then you can access it directly from the window object:

window.particlesJS.load(...)

Related issue: https://github.com/VincentGarreau/particles.js/issues/265

answered Oct 31, 2019 at 12:30

Thomas

8,8592 gold badges28 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3718908x100 Over a year ago

Thank you soo much! This really helped. Had to use window["particlesJS"].load(...) coz typescript kept underlining .particleJS. :)

noam621 · Accepted Answer · 2019-10-28 19:10:42Z

0

You can importing js functions to the ts file with require helping

const particlesJS = require('./particles');

But all functions should be exported like module.exports in the particles.js

edited Oct 28, 2019 at 19:10

noam621

2,8561 gold badge19 silver badges28 bronze badges

answered Oct 28, 2019 at 15:44

Aleksey Belan

1

Collectives™ on Stack Overflow

Import Javascript Library Into TypeScript For StencilJs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related