I’m using gulp-file-include
to build my HTML files and I’m running into an issue with passing variables between nested include files.
File Structure:
.
├── index.html
└── template-parts
└── common
├── header.html
└── headerMenuList.html
Problem:
I want to pass a variable (nav) from index.html to header.html and then pass it from header.html to headerMenuList.html. However, I’m getting the following error:
[21:14:05] Starting 'htmlConcat'...
[21:14:05] 'htmlConcat' errored after 11 ms
[21:14:05] Error in plugin "gulp-file-include"
Message:
JSON5: invalid character 'a' at 1:11
Details:
domainEmitter: [object Object]
domainThrown: false
index.html:
<!-- siteHeader -->
@@include('template-parts/common/header.html', { "nav": "about" })
header.html:
<!-- I want to pass the nav variable to this file -->
<p>Navigation: @@nav</p>
<!-- Passing nav to headerMenuList.html -->
@@include('./headerMenuList.html', { "nav": nav })
headerMenuList.html:
<!-- Trying to access nav variable here -->
<p>Current Navigation: @@nav</p>
What I’ve Tried:
Direct Variable Passing: Using @@include('./headerMenuList.html', { "nav": nav })
but it throws the JSON5 error.
String Interpolation: Tried using <%= nav %>
inside header.html
but it outputs <%= nav %>
as a string instead of the value.
Direct String Testing: When I change it to @@include('./headerMenuList.html', { "nav": "about" })
, it works, indicating that the variable isn’t being passed correctly.
Question:
Is it possible to pass variables between nested include files in gulp-file-include? If so, what is the correct way to do this? If not, is there a workaround or alternative approach I can use to achieve this?
Thanks in advance for your help!