[SOLVED] XML Parsing Error for stache file, used in Tutorial (v2)

XML Parsing Error for stache file, used in Tutorial (v2)

I'm currently stating to learn CanJS with the v2 tutorial.

The of the index.html consists of the following lines

<!-- CanJS application root -->
<div id="can-main"></div>
<script src="libs/jquery-3.1.1.js"></script>
<script src="libs/can.jquery.dev.js"></script>
<script src="libs/can.map.define.js"></script>
<script src="libs/can.stache.js"></script>
<script src="libs/can.fixture.js"></script>
<script src="app.js"></script>
<script src="components/tut-form/base.js"></script>

There is nothing special with app.js. The component JavaScript file (base.js) looks like this

can.Component.extend({
  tag: 'tutorial-form',
  template: can.view('components/tut-form/base.stache'),
  viewModel: {
    hello: 'Hello Input Component'
  }
});

And I've added the tag <tutorial-form></tutorial-form> as the last line in the <body> of the index.html.

Now at least FF gives the following error

XML Parsing Error: junk after document element Location: file:///path/to/tutorial/components/tut-form/base.stache Line Number 2, Column 1:

while this file looks like this

<h3>Hello</h3>
<h3>{{hello}}</h3>

Well, I guess, that I'm just missing a CanJS component (I'm using files from the CanJS .zip, because the custom download page is broken or does not look like it is described in the tutorial at all), like can.Component or can.view. The browser can load the .stache file, but I'm not sure what happens behind the scene.

Does anybody have a hint what I'm doing wrong here?

Solution

A static file server was my solution to this problem. Don't load all the files as file://, probably this does not work in FF, too (in Chrome you get a cross-origin requests not allowed for local files-like message).

I just configured a NGINX in order to serve the files for this little project, now it works perfectly.

Sidenote: Adding a custom tag like <tutorial-form/> to the index.html does not work in this case. Instead you need to append this element (a can.Component) to the body like this:

$( 'body' ).append( can.stache( '<tutorial-form />' )() );