javascript - Getting template was precompiled with a newer version of Handlebars error with my Node.JS app?

I am trying to create a Node.JS app that uses the open source Alpaca Forms package:

I'm using Node version: v0.10.25

When I run the test page from the tutorial:

.html

Using the second sample page found in that tutorial:

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn/bootstrap/3.3.2/css/bootstrap.min.css" />
        <link type="text/css" href="//code.cloudcms/alpaca/1.5.17/bootstrap/alpaca.min.css" rel="stylesheet" />
        <script type="text/javascript" src="//code.jquery/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="//maxcdn.bootstrapcdn/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
        <script type="text/javascript" src="//code.cloudcms/alpaca/1.5.17/bootstrap/alpaca.min.js"></script>
    </head>
    <body>
        <div id="form"></div>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#form").alpaca({
                    "schema": {
                        "title":"User Feedback",
                        "description":"What do you think about Alpaca?",
                        "type":"object",
                        "properties": {
                            "name": {
                                "type":"string",
                                "title":"Name"
                            },
                            "feedback": {
                                "type":"string",
                                "title":"Feedback"
                            },
                            "ranking": {
                                "type":"string",
                                "title":"Ranking",
                                "enum":['excellent','ok','so so']
                            }
                        }
                    }
                });
            });
        </script>
    </body>
</html>

I get the following two errors in the Chrome Debugger console, plaining that the templates I am using were piled with a newer version of Handlebars than the current run-time, not older like most of the reported problems on SO specify. Here is the error dump from the Chrome Debugger console:

Uncaught Error: Template was prepiled with a newer version of Handlebars than the current runtime. 
Please update your runtime to a newer version (>= 4.0.0).
    Exception @ handlebars.js:2520
    checkRevision @ handlebars.js:2693
    template @ handlebars.js:2709
    hb.template @ handlebars.js:196
    (anonymous function) @ alpaca.min.js:1
    (anonymous function) @ alpaca.min.js:1
    (anonymous function) @ alpaca.min.js:1

Uncaught TypeError: $(...).alpaca is not a function
    (anonymous function) @ (index):14
    j @ jquery-1.11.1.min.js:2
    k.fireWith @ jquery-1.11.1.min.js:2
    m.extend.ready @ jquery-1.11.1.min.js:2
    J @ jquery-1.11.1.min.js:2

I checked with NPM and I am using a version of Handlebars that is newer than 4.0.0:

$ npm ls | grep handlebars
└─┬ [email protected]

So it appears the error message is wrong?

I found these two related SO posts:

Template was prepiled with an older version of Handlebars than the current runtime

Uncaught Error: Template was prepiled with an older version of Handlebars

But I am not using Gulp or Ember.JS so I don't know if the remedies given apply to my situation.

Here is a list of the packages I have installed according to NPM:

npm ls
/home/roschler
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └─┬ [email protected]
│ │   └── [email protected]
│ ├── [email protected]
│ └── [email protected]
└─┬ [email protected]
  ├── [email protected]
  ├─┬ [email protected]
  │ ├── [email protected]
  │ └── [email protected]
  ├─┬ [email protected]
  │ └── [email protected]
  └─┬ [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    └─┬ [email protected]
      ├── [email protected]
      ├─┬ [email protected]
      │ ├─┬ [email protected]
      │ │ ├─┬ [email protected]
      │ │ │ ├─┬ [email protected]
      │ │ │ │ └── [email protected]
      │ │ │ ├── [email protected]
      │ │ │ └── [email protected]
      │ │ └── [email protected]
      │ ├─┬ [email protected]
      │ │ └─┬ [email protected]
      │ │   ├─┬ [email protected]
      │ │   │ └── [email protected]
      │ │   ├── [email protected]
      │ │   └── [email protected]
      │ └── [email protected]
      ├── [email protected]
      └── [email protected]

How can I fix these errors?

I am trying to create a Node.JS app that uses the open source Alpaca Forms package:

http://www.alpacajs/

I'm using Node version: v0.10.25

When I run the test page from the tutorial:

http://www.alpacajs/tutorial.html

Using the second sample page found in that tutorial:

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn./bootstrap/3.3.2/css/bootstrap.min.css" />
        <link type="text/css" href="//code.cloudcms./alpaca/1.5.17/bootstrap/alpaca.min.css" rel="stylesheet" />
        <script type="text/javascript" src="//code.jquery./jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="//maxcdn.bootstrapcdn./bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare./ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
        <script type="text/javascript" src="//code.cloudcms./alpaca/1.5.17/bootstrap/alpaca.min.js"></script>
    </head>
    <body>
        <div id="form"></div>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#form").alpaca({
                    "schema": {
                        "title":"User Feedback",
                        "description":"What do you think about Alpaca?",
                        "type":"object",
                        "properties": {
                            "name": {
                                "type":"string",
                                "title":"Name"
                            },
                            "feedback": {
                                "type":"string",
                                "title":"Feedback"
                            },
                            "ranking": {
                                "type":"string",
                                "title":"Ranking",
                                "enum":['excellent','ok','so so']
                            }
                        }
                    }
                });
            });
        </script>
    </body>
</html>

Uncaught Error: Template was prepiled with a newer version of Handlebars than the current runtime. 
Please update your runtime to a newer version (>= 4.0.0).
    Exception @ handlebars.js:2520
    checkRevision @ handlebars.js:2693
    template @ handlebars.js:2709
    hb.template @ handlebars.js:196
    (anonymous function) @ alpaca.min.js:1
    (anonymous function) @ alpaca.min.js:1
    (anonymous function) @ alpaca.min.js:1

Uncaught TypeError: $(...).alpaca is not a function
    (anonymous function) @ (index):14
    j @ jquery-1.11.1.min.js:2
    k.fireWith @ jquery-1.11.1.min.js:2
    m.extend.ready @ jquery-1.11.1.min.js:2
    J @ jquery-1.11.1.min.js:2

I checked with NPM and I am using a version of Handlebars that is newer than 4.0.0:

$ npm ls | grep handlebars
└─┬ [email protected]

So it appears the error message is wrong?

I found these two related SO posts:

Template was prepiled with an older version of Handlebars than the current runtime

Uncaught Error: Template was prepiled with an older version of Handlebars

But I am not using Gulp or Ember.JS so I don't know if the remedies given apply to my situation.

Here is a list of the packages I have installed according to NPM:

npm ls
/home/roschler
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └─┬ [email protected]
│ │   └── [email protected]
│ ├── [email protected]
│ └── [email protected]
└─┬ [email protected]
  ├── [email protected]
  ├─┬ [email protected]
  │ ├── [email protected]
  │ └── [email protected]
  ├─┬ [email protected]
  │ └── [email protected]
  └─┬ [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    └─┬ [email protected]
      ├── [email protected]
      ├─┬ [email protected]
      │ ├─┬ [email protected]
      │ │ ├─┬ [email protected]
      │ │ │ ├─┬ [email protected]
      │ │ │ │ └── [email protected]
      │ │ │ ├── [email protected]
      │ │ │ └── [email protected]
      │ │ └── [email protected]
      │ ├─┬ [email protected]
      │ │ └─┬ [email protected]
      │ │   ├─┬ [email protected]
      │ │   │ └── [email protected]
      │ │   ├── [email protected]
      │ │   └── [email protected]
      │ └── [email protected]
      ├── [email protected]
      └── [email protected]

How can I fix these errors?

Share Improve this question edited May 23, 2017 at 10:30 CommunityBot 11 silver badge asked Apr 3, 2016 at 18:53 Robert Oschler 14.4k19 gold badges103 silver badges241 bronze badges

@Omarjmh I'm using v0.10.25 – Robert Oschler Commented Apr 3, 2016 at 19:01
@Omarjmh Drop down? The error message is saying I need a newer version of handlebars, not older. – Robert Oschler Commented Apr 3, 2016 at 19:05
@Omarjmh Just added my package list. – Robert Oschler Commented Apr 3, 2016 at 19:08
1 you need to either update your runtime, or lower handlebars – omarjmh Commented Apr 3, 2016 at 19:15
@Omarjmh Which runtime and to what version? Also, what version of handlebars would get things working? – Robert Oschler Commented Apr 3, 2016 at 19:20

| Show 2 more ments

1 Answer 1

Sorted by: Reset to default 5

In the example HTML, the Handlebars library being included via a script tag needs to be updated. When it refers to the runtime one, you need to update the JS library you are explictly including and not the NPM package (usually).

<script type="text/javascript" src="//cdnjs.cloudflare./ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>

Should actually include one with version 4.0.0+. For example

<script type="text/javascript" src="//cdnjs.cloudflare./ajax/libs/handlebars.js/4.0.0/handlebars.js"></script>

Programmer puzzle solving

javascript - Getting template was precompiled with a newer version of Handlebars error with my Node.JS app? - Stack Overflow

1 Answer 1

Articles related to this article

comment list (0)