Can't use partials or layouts unless they have .html extension

[hungsu]

Hi all,

When I use this config

var layouts           = require('metalsmith-layouts')
Metalsmith(__dirname)
    .source('./src')
    .destination('./build')
    .use(permalinks())
    .use(inPlace({
        engine: 'handlebars',
        partials: './partials'
    }))
    .use(layouts({
        engine: 'handlebars',
        rename: true
    }))

I can happily use layout files in my layouts folder with .html extension. As soon as I rename those files to .hbs, I get this error Error: ENOENT: no such file or directory, open 'C:\Users\hi\Git\style-guide\layouts\datapoint.html' at Error (native)

I can continute to use the .html file extension for now, but any idea what I can do to use .hbs?

[doodzik]

Weird.... Unfortunately I can't reproduce this. Do you have any update on this issue?

[brianfryer]

@doodzik: I am also experiencing (what I believe to be) this issue (although, I'm on a Mac and am using gulpsmith) and set up a repo that reproduces the error: https://github.com/brianfryer/gulpsmith-layouts

git clone https://github.com/brianfryer/gulpsmith-layouts.git
cd gulpsmith-layouts
npm install
gulp

[11:34:52] Using gulpfile ~/development/testing/gulpsmith-layouts/gulpfile.js
[11:34:52] Starting 'clean:dist'...
[11:34:52] Finished 'clean:dist' after 7.95 ms
[11:34:52] Starting 'build:styles'...
[11:34:52] Starting 'build:pages'...
events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: ENOENT: no such file or directory, open '/Users/brains/development/testing/gulpsmith-layouts/source/partials/_footer.hbs'
    at Error (native)

[ismay]

The error's correct, /Users/brains/development/testing/gulpsmith-layouts/source/partials/_footer.hbs doesn't exist. In your project it's called footer.hbs. I'd say that that's where it's going wrong.

[brianfryer]

@ismay: Thanks for the reply :)

There is a file named _footer.scss in addition to a file named footer.hbs. In the gulpfile, I'm including a pattern option to only process handlebars templates. I don't know why metalsmith-layouts is trying to process _footer.scss since it doesn't match the pattern...

[ismay]

No problem. You're misreading though. It's trying to include:

/Users/brains/development/testing/gulpsmith-layouts/source/partials/_footer.hbs

and you have:

source/partials/footer.hbs

So the underscore is missing. No idea why it prepends the underscore though. Honestly, I would just use metalsmith directly. Including this many tools is always a headache.

[brianfryer]

Sorry, I don't think I explained the situation properly.

In the /source/partials/ directory, there is a combination of .scss and .hbs partials (e.g. _footer.scss, footer.hbs). This is to keep styles and markup partials together.

In the gulpfile, I'm pointing metalsmith-layouts to this ^ directory to automatically pull in the .hbs files needed to compile the handlebars templates (see code snippet below).

.use(layouts({
    engine: 'handlebars',
    default: 'default.hbs',       // does this option need to have a file extension?
    directory: 'source/layouts/',
    partials: 'source/partials/', // this is where the partials live (there are .scss and .hbs files in here)
    pattern: '**/*.hbs',          // this *should* filter out .scss files, right?
    rename: true
}))

Unfortunately, the _footer.scss file is still being processed even though I'm including a pattern option. Am I misunderstanding what the pattern option does? I thought it including pattern: '**/*.hbs' would tell the metalsmith-layouts plugin to ignore .scss files...

I would just use metalsmith directly

Good advice!

[brianfryer]

BTW, I have successfully compiled templates with the metalsmith-in-place plugin using the pattern: '*.hbs' option to filter out unwanted filetypes. I can't seem to figure out why this option isn't working with metalsmith-layouts.

[brianfryer]

In the repo I linked to above, I added a new task to the gulpfile to illustrate this ^ difference.

Running gulp build:in-place will use the metalsmith-in-place plugin:

.use(inPlace({
    engine: 'handlebars',
    partials: 'source/partials/',
    pattern: '**/*.hbs',
    rename: true
}))

This ^ will compile source/pages/in-place.html without errors.

Running gulp build:layout will use the metalsmith-layouts plugin:

.use(layouts({
    engine: 'handlebars',
    default: 'default.hbs',
    directory: 'source/layouts/',
    partials: 'source/partials/',
    pattern: '**/*.hbs',
    rename: true
}))

This ^ will cause the following error:

events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: ENOENT: no such file or directory, open '/Users/brains/development/testing/gulpsmith-layouts/source/partials/_footer.hbs'
    at Error (native)

[ismay]

Ok. This is turning into troubleshooting your particular build config, which is not what the issues are for. If you're running into problems with your particular config stack overflow is the place to ask for help. That way others with the same problem can find the solution as well.

The issues are meant for bugs for this particular library.

But, just to state what I found:

1. I've cloned your repo, and for me the build works like it should. It includes the partial and throws no errors.
2. I don't think you understood what I meant with:

You're misreading though. It's trying to include: /Users/brains/development/testing/gulpsmith-layouts/source/partials/_footer.hbs and you have source/partials/footer.hbs

That error is correct. It doesn't have anything to do with the scss partial. Read carefully.

If you find a bug in this library by all means report it, but this is not a bug in metalsmith-layouts. My advice would be to read the docs and not use gulp because you don't need it for what you're trying to do.

[brianfryer]

Yes, running gulp will compile the templates without errors since the default task is set up to use the metalsmith-in-place plugin (not metalsmith-layouts).

This ^ is to illustrate that the pattern option works with the metalsmith-in-place plugin.

If you run gulp build:layouts, the task runner will attempt to compile the templates with metalsmith-layouts and will produce the stated error.

There is definitely something wrong with the way metalsmith-layouts pulls in partials with the pattern option—it's not filtering out files unmatched files.

[ismay]

Yes, running gulp will compile the templates without errors since the default task is set up to use the metalsmith-in-place plugin (not metalsmith-layouts).

Ok, I missed that. Still, point 2 still stands.

There is definitely something wrong with the way metalsmith-layouts pulls in partials with the pattern option—it's not filtering out files unmatched files.

We specifically test the pattern option. However, partials can be pulled in in a number of ways, so if there's something wrong with it I'd be happy to take a look at it. But I'll need a reduced test case, demonstrating the problem in a setup that is as minimal as possible. If you can reproduce the problem in that setting and have narrowed it down to a bug in metalsmith-layouts, then feel free to file it as a new issue and I'll take a look at it.

[micahgodbolt]

I think I might understand this problem a bit, as I'm having it as well.

I'm trying to include {{> folder/foo }}

and in folder I have two files foo.config.yml foo.html

What I get is no such file or directory, open 'folder\foo.config.html'

It appears that the matching algorithm is a bit too loose and looks for anything foo.*, and finding foo.config.yml it tries to use it as an HTML file.

---

Few notes. If I remove foo.config.yml from the folder, it works fine. Also, I've tried using the pattern config pattern: **/*.html with no effect.

[ismay]

Stupid that I didn't see this. I'll try and take a look at the pr asap, so we can fix this. Thanks @micahgodbolt

[ismay]

Closed in #116

[ismay]

Released as 1.8.0