Templates in Ractive.js

I am new to Ractive.js and just playing around with it. I am trying to build a simple app, but strangely, it's not working on my pc and I am getting an error in console "Could not find template element with id #template", where #template refers to the id assigned to script tag. Nothing gets rendered on my browser. However, the same code is running fine in JSFiddle. Can someone explain what is happening here?

Here is the fiddle.

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">

<title>Get Weather Details</title>
<meta name="description" content="Get weather for your city">

<link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
<link rel="stylesheet" href="weather.css">
<script src='https://cdn.ractivejs.org/latest/ractive.js'></script>
<script src="weather.js"></script>
</head>

<body>
<div id="main" class="page-container">
    <script id='template' type='text/ractive'>
        <div class="weather-widget">
            <div class="input-group">
                <label>City Name</label>
                <input type="text" class="form-control" placeholder="Enter City Name" />
            </div>
            <div class="input-group">
                <label>Recent Searches</label>
                <select>
                    <option>Select from recent searches</option>
                </select>
            </div>

            <div class="weather-details">
                <table>
                    <tbody>
                        <tr>
                            <th>Wind</th>
                            <td>{{country}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </script>
</div>
</body>
</html>

Code in weather.js:

var ractive = new Ractive({
el: '#main',
template: '#template',
data: {
    country: 'London'
    }
});

Solution

At the time weather.js executes, the element hasn't yet been created. You could either move the <script src='weather.js'></script> tag to the bottom of the page (inside <body>, after the topmost <div> containing the template element the script refers to), or add a defer attribute: <script defer src='weather.js'></script>.