Riot.js compiler / 404 tag not found

Question

I'm trying to include riot.js tags into my project so that I can reuse components. The app runs on Node+Express and uses Pug for templating.

I have a route that renders the following page:

include includes/header.pug
link(rel="stylesheet" href="/styles/kaljasakot.css" type="text/css")
body(id='bootstrap-override')
    div(class='container-fluid')
        div(class='header')
            img(class='okklogo' src='img/okkimg.jpeg' height='80' width='130')
            h1 Kaljasakot
    kaljasakot
    script(type="riot/tag" src="kaljasakot.tag")
    script(src="https://cdn.jsdelivr.net/riot/2.6/riot+compiler.min.js")
    script riot.mount('kaljasakot')
    include includes/footer.pug
    script(src='/js/kaljasakot.js') 

Ie I'm trying to mount the riot tag kaljasakot in the Pug template. However the browser gives a 404 error in the console on page render:

GET http://localhost:3001/kaljasakot.tag 404 (Not Found) riot+compiler.min.js:2

I'm a little stumped on where the tag file should be located for the compiler to find it, and I can't find any tips on this from Google. Has anyone come across this case?

The whole project can be found here Github link , if needed.

Answer 1

The tag files are not fetched when the Pug template is compiled but from the browser when the app is running. Currently you haven't told Express where to find the tag files.

To fix this problem, you can for example create a folder public/tags , move the tag files in there and use them like script(type="riot/tag" src="tags/kaljasakot.tag") . Express will find the files from there because you have configured the public folder as a source for static files.

Now the request won't give 404 anymore, but the tag file won't quite work either. Since you are using Pug in the tag files, you need to precompile them before the app can use them. If you just drop the kaljasakot.tag to public folder as suggested above, you'll see an error Uncaught SyntaxError: Unexpected token = because Riot doesn't understand the Pug syntax.

So you'll probably want to just keep the tag files in the views folder after all and set up a build step where you compile the tags and move them to the public/tags folder. See Riot's documentation on server compilation and gulp-riot for example.