Add script tag and functions to next js?

Question

I'm fairly new to react and next.js, I have a custom script I want to integrate in my next.js project. I added the link in the <head> tag

<script src="https://www.mews.li/distributor/distributor.min.js"></script>

This is the example that was give on the website :

Mews.Distributor({
    configurationIds: ['myId'],
}, function (distributor) {
    $('.booking-button').click(function () {
        distributor.open();
    });
});

when I used this in a normal html page that has jquery it works fine. I can't understand how do I reach the function (distributor) part from my react component.

My components is this:

export default class roomDetails2 extends React.Component<{}, {}>{
    constructor(props) {
        super(props);
        this.state = {
            someVar: '',
        };
    }
    openMews(){
     // somehow to access the script function here
    }
    render() {
        return (
            <>
                <Head>
                    <script src="https://www.mews.li/distributor/distributor.min.js"></script>
                </Head>
                <div className="main_body">
                  <button onClick={() => this.openMews()}>click here to open</button>
                </div>
            </>
        );
    }
}

juliomalves · Accepted Answer · 2021-03-24 16:33:07Z

2

After you inject your script, you can access Mews.Distributor from the window object in your component's componentDidMount lifecycle method.

export default class roomDetails2 extends React.Component<{}, {}>{
    constructor(props) {
        // Your `constructor` code
    }
    componentDidMount() {
        window.Mews.Distributor({ 
            configurationIds: ['myId'] 
        }, function (distributor) {
            // Add your own logic here
        });
    }
    render() {
        // Your `render` code
    }
}

answered Mar 24, 2021 at 16:33

juliomalves

51.1k23 gold badges181 silver badges170 bronze badges

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

2 Comments

Guram Over a year ago

I tried that but I get an error: TypeError: Cannot read property 'Distributor' of undefined.

Guram Over a year ago

Huh, apparently window['Mews'] works but window.Mews does not. Have no idea why but now it's working. thank you very much

Collectives™ on Stack Overflow

Add script tag and functions to next js?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related