Client True includes are not getting imports recursively

[kylecribbs]

let data = {}
let str = "<%= include('./src/main/resources/ejs_templates/imports/imports.ejs');%>";
var fn = ejs.compile(str, {client:true});

var rendered = fn(data, null, function(path, d){
    // include callback logic
    var includedTemplate = fileReader.test3(path);
    print(includedTemplate)
    return includedTemplate;
}, null);

imports.ejs

<%= include('./src/main/resources/ejs_templates/list/list-view.ejs');%>
<script type="text/javascript" src="/js/bootstrap/bootstrap.bundle.min.js"></script>

<link href="/css/custom-ui/header.css" rel="stylesheet">
<link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" src="/css/bootstrap/select/bootstrap-select.min.css">
<script type="text/javascript" src="/js/bootstrap/select/bootstrap-select.min.js"></script>

<script type="text/javascript" src="/js/ag-grid/ag-grid-community.min.noStyle.js"></script>
<link rel="stylesheet" src="/ag-grid/ag-grid.css">
<link rel="stylesheet" src="/css/ag-grid/ag-theme-alpine.css">

<script src="/js/ckeditor/inspector.js"></script>
<script src="/js/popper/popper.min.js"></script>
<script src="/js/jquery/jquery.min.js"></script>
<script src="/js/monaco/vs/loader.js"></script>

output is:

<%= include('./src/main/resources/ejs_templates/list/list-view.ejs');%>
<script type="text/javascript" src="/js/bootstrap/bootstrap.bundle.min.js"></script>

<link href="/css/custom-ui/header.css" rel="stylesheet">
<link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" src="/css/bootstrap/select/bootstrap-select.min.css">
<script type="text/javascript" src="/js/bootstrap/select/bootstrap-select.min.js"></script>

<script type="text/javascript" src="/js/ag-grid/ag-grid-community.min.noStyle.js"></script>
<link rel="stylesheet" src="/ag-grid/ag-grid.css">
<link rel="stylesheet" src="/css/ag-grid/ag-theme-alpine.css">

<script src="/js/ckeditor/inspector.js"></script>
<script src="/js/popper/popper.min.js"></script>
<script src="/js/jquery/jquery.min.js"></script>
<script src="/js/monaco/vs/loader.js"></script>

[eMTyMe]

The problem very likely lies with the ejs tags you are using. This is actually one of the things mentioned in the documentation. The correct use of include requires the raw output tag <%-, or else the HTML might double escape.

<%- include('./src/main/resources/ejs_templates/imports/imports.ejs');%>

EDIT: ok I also just saw that they have it in the docs like so

let str = "Hello <%= include('file', {person: 'John'}); %>",
      fn = ejs.compile(str, {client: true});

fn(data, null, function(path, d){ // include callback
  // path -> 'file'
  // d -> {person: 'John'}
  // Put your code here
  // Return the contents of file as a string
}); // returns rendered string

but I guess it's dependent on what is inside the included file, <%- for html and '<%=' for just ejs files? Absolutely not sure on this, needs some testing.