Using globally defined script inside the component

Question

I am using global script declaration inside index.html

<!DOCTYPE html>
<html>
    <head>
    <script src='https://js.espago.com/espago-1.1.js' type='text/javascript'></script>
    ...
    </head>
<body>
    ...
</body>

Now I want to use it inside the component.

import * as React from "react";
import * as $ from "jquery";

//how to import Espago?

export default class EspagoPayment extends React.Component<any, any> {
    componentDidMount() {
        $("#espago_form").submit(function(event){
             var espago = new Espago({public_key: 'xxx', custom: true, live: false, api_version: '3'});
             espago.create_token({
                    ...
             });
        });
    }

    render() {
        return (
                ...
        );
    }
}

Webpack gives an error on build.

error TS2304: Cannot find name 'Espago'

How to get Espago visible inside the component?

Maybe there is other way to link to online js resource?

@YoannM nope error TS2339: Property 'Espago' does not exist on type 'Window'. — Piotr Leniartek
– Piotr Leniartek, Commented Dec 9, 2015 at 22:30

Community · Accepted Answer · 2017-05-23 11:59:18Z

1

You have to tell TypeScript that it's defined somewhere else.

declare var Espago: any;

See https://stackoverflow.com/a/13252853/227299

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Dec 9, 2015 at 22:17

Ruan Mendes

92.7k31 gold badges162 silver badges225 bronze badges

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

1 Comment

Piotr Leniartek Over a year ago

Perfect! Thanks for reference.

Collectives™ on Stack Overflow

Using globally defined script inside the component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related