New partials not working in handlebars example


#1

Hi,

I am trying to use a remix of the handlebars template example which works fine until I create new partials and include them in the index.hbs. The existing ones work but mine do not…

Here is the glitch in question

I am literally copying and pasting the file names as well as the syntax so I don’t understand why my new additions don’t work?

For example I have one that works like so

views/partials/head.hbs

referenced like so

{{> head }}

That works

and then I create a new one like

views/partials/test.hbs

and reference it like so

{{> test}}

and that new one breaks it, I am given the following error message

Error: /app/views/index.hbs: The partial test could not be found
at Object.invokePartial (/rbd/pnpm-volume/3e655f46-b0ef-4082-a1c7-cf8140757907/node_modules/.registry.npmjs.org/handlebars/4.0.5/node_modules/handlebars/dist/cjs/handlebars/runtime.js:266:11)
at Object.invokePartialWrapper [as invokePartial] (/rbd/pnpm-volume/3e655f46-b0ef-4082-a1c7-cf8140757907/node_modules/.registry.npmjs.org/handlebars/4.0.5/node_modules/handlebars/dist/cjs/handlebars/runtime.js:68:39)
at Object.eval [as main] (eval at createFunctionContext (/rbd/pnpm-volume/3e655f46-b0ef-4082-a1c7-cf8140757907/node_modules/.registry.npmjs.org/handlebars/4.0.5/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:254:23), :9:28)
at main (/rbd/pnpm-volume/3e655f46-b0ef-4082-a1c7-cf8140757907/node_modules/.registry.npmjs.org/handlebars/4.0.5/node_modules/handlebars/dist/cjs/handlebars/runtime.js:173:32)
at ret (/rbd/pnpm-volume/3e655f46-b0ef-4082-a1c7-cf8140757907/node_modules/.registry.npmjs.org/handlebars/4.0.5/node_modules/handlebars/dist/cjs/handlebars/runtime.js:176:12)
at ret (/rbd/pnpm-volume/3e655f46-b0ef-4082-a1c7-cf8140757907/node_modules/.registry.npmjs.org/handlebars/4.0.5/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:525:21)
at /rbd/pnpm-volume/3e655f46-b0ef-4082-a1c7-cf8140757907/node_modules/.registry.npmjs.org/hbs/4.0.1/node_modules/hbs/lib/hbs.js:63:19
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)

Am I missing something? Thanks for any help


#2

The new partials only get picked up when your app restarts. By default in Glitch only editing some file types causes your app to restart as it’s not always useful for certain file types to do so. So when you create and edit your .hbs files those changes while correct, aren’t being picked up. To solve this we allow for a watch.json file to be added to projects which enable users to configure which file types cause restarts. Here’s an example project with a watch.json file that causes editing .hbs files to restart your project: https://glitch.com/edit/#!/noiseless-end. See https://glitch.com/faq#restart for more info.


#3

Thank you very much Gareth - for the solution and for the explanation, good to understand the reasons. Out of interest, are there other ways to restart the app? I didn’t understand that fully but I thought it might be something along those lines as with some projects, if I left and came back, the partial would work. I tried hard refreshing the page thinking that might restart it - is there any way to do it manually after each edit?


#4

You can call ‘refresh’ from the console which causes your app to restart, you can also make changes to files that cause restarts by default, like removing and re-adding a comma in the package.json file or adding and removing a space in a .js file for example. But using watch.json is better I think.


#5

Thank you again, especially getting back so quickly


#6

Hi Gareth, having added in the watch.json I am encountering a new issue whereby files saved as .js are not loaded with the following error;

Refused to execute script from 'js/filename.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

How can I make sure my files have the correct MIME type in the hbs world?

Thank you


#7

Sorry ignore this, I have figured it out, the js file no longer existed at the path it was in a static html file - I put my js files into the public folder and then reference src="/filename.js" Thanks.