include block extends not working

[ScorpioCoding]

Hi I'm using Atom and I can't use the functions "include , block, etc"

if I use "include" and compile both files

I compile and then in firefox I get the following

And if I insert the code direct into the base. pug it works

**Can anybody give me an idea where to look. I've even uninstalled pug and reinstalled it. And using "block and extends" does absolute nothing**

[qm3ster]

1) What version of pug are you using? 2) You only need to compile base.pug, no reason to compile baseHeader.pug separately as well. 3) What does baseHeader.pug look like?

[ScorpioCoding]

What does baseHeader.pug look like ...

[ScorpioCoding]

And the current version of pug installed

[ScorpioCoding]

So I had a look at the output base.html file and this is the issue the baseHeader.pug didn't compile to HTML So it found the baseHeader include file, inserted it and then didn't compile/convert it to html. Doeas anybody know why and has a solution

[qm3ster]

1. Is this base.html?
2. Does it contain anything from base.pug? (All I see in the screenshot is what was in baseHeader.pug)
3. Please post text and not screenshots in the future, it is very hard to navigate without search.

   Solution:

   You have a circular 'dependence' even when you try to compile just base.pug. This is because you use both include syntax and extends block syntax. extends block is for versions of the same page. You can only extend one template (with block slots) per compile. For example your some_page.pug could extend layout.pug which would contain a head, a header, a "block content" and a footer. include is for literally including the text of one file within another. This is what you want to be using in your case, since you are including a partial into the page. Remove extends and block from baseHeader.pug and it should work. Remember, only compile the page you want to get, not partials.

[qm3ster]

Example

//- mothership.pug
head
    include head
body
    <nojs google tag manager>
    block body

//- head.pug
meta ...
script ...
link ...

//- layout.pug
extends mothership
block body
    include header
    article.post
        block content
    include footer

//- header.pug
header
    include logo
    nav
        ul
            for val in nav
                li
                    a

//- post.pug
extends layout
block content
    :remarkable
        # Hello
        Dis is post.
    include:remarkable signature.md

[//]: # (signature.md)

Pls **like** and **subscribe**.

et cetera.

[ScorpioCoding]

So After playing around with it I got the stupid idea to rename the files to ".jade" extention. And it works. if I rename my includes to whatever.jade it works...stupid no ? Is this a know issue ?

[qm3ster]

If changing it back and forth really recreates the effect, it must have something to do with another program mangling your files, perhaps based on extension. I would look at your task runner, whoever is grabbing the supporting files for your pug. Might be a frontent/**.jade in there somewhere. Me, I run pug-cli's pug -w at the moment and I am on

$ npm list pug
secretpackage@0.0.0 /secret/directory
└─┬ pug-cli@1.0.0-alpha6
  └── pug@2.0.0-beta11 
$ npm-exec pug --version
pug version: 2.0.0-beta11
pug-cli version: 1.0.0-alpha6
$ npm ScorpioCoding -v
3.10.10

The last one actually gives you npm version as you can see. You should globally install npm-exec if you like locally installing bins against their request. (I know I do :smile: ) Anyway, my testing has shown the following behavior:

include header.pug looks for header.pug include header.jade looks for header.jade include header looks for header.pug, does not look for header.jade afterwards include header.jeff (random extension) looks for header.jeff then includes it as plain text without parsing. Which is what happened to you? So, jade was not in any way special for file matching (I thought it looks for it when there is no extension, but I was unable to reproduce it right now. The behavior of that when it was happening was quite hilarious - it would go from jade to pug when a pug file was added in the directory, but it wouldn't go back to jade in the same -w run. It is special in the way that it satisfies the parsed include rather than plain text include rule. I have no idea how you could have knocked out .pug as an acceptable pug extension in pug. Perhaps it gets mangled by whatever is passing it to pug. Perhaps you (consistently?) spelled it with a letter other than English p, u and g. Please see your real pug version and then reinstall it.

If you can really reproduce this issue, I suggest you look at where pug is plugged in/specified in your pipeline rather than use the depreciated filename.

[ScorpioCoding]

dit a npm list pug and got the following error

[ScorpioCoding]

so I whent and installed everything localy for my project and a screenshot of my package.json file

[qm3ster]

You have gulp-pug installed in your globals, you should get rid of that. At most you should have pug-cli there. But the real question: does your project currently work or is there a problem?

[ForbesLindesay]

This is almost certainly an issue caused by having incorrect versions of packages installed.

[ForbesLindesay]

@ScorpioCoding please use GitHub Flavoured Markdown to include code in issues/comments in future. Do not post screen shots of code.

[ScorpioCoding]

Sorry been of the grid for a day... OK So you're say I should install -pug-cli globaly and localy gulp-pug or what ??? Sorry what is GitHub Flavoured Markdown ?? I'm going nuts with all these technologies, keeping up is the hardest. I'm trying my utmost best to keep up

[ScorpioCoding]

Sorry forgot to answer your question ... No it stil doesn't work I can only include JADE files and PUG get included but don't compile. No.. The base PUG file compiles but the extended PUG file gets included but not compiled to html

[ForbesLindesay]

http://lmgtfy.com/?q=GitHub+Flavoured+Markdown

If you are using gulp-pug, you should install gulp-pug locally, and install nothing globally. If you are using gulp-pug and struggling to get it set up correctly, you should post your questions on https://github.com/pugjs/gulp-pug

[ScorpioCoding]

So pug-cli globaly and gulp-pug localy