Pass data to ejs partials using Webpack 2

Question

I am using Webpack 2 and ejs-template-loader I can get data for my page however I need to pass some section of data to one of partials.

<% 
var data = htmlWebpackPlugin.options.data;
var carouselElement = data.carouselElement;
if (data) {  %>
<!-- Header -->
<%- include ../../components/avalon/header/header.ejs %>
    <div class="page-mask">
        <div class="main-content <%= carouselElement%>">
            <%- include ../../components/hero.image/hero.image.ejs %>
            <%- include ../../components/content.carousel/content.carousel.ejs {carouselElement} %>
            <%- include ../../components/experiences/experiences.ejs %>
        </div>
    </div>
<%}%>

above code gave me error like this

ENOENT: no such file or directory

Do you know how to pass data to partials?

Answer 1

to pass data in a partial in EJS with include :

<%- include( '../mypage', { data: "mydata" }); %>

To show it in mypage.ejs

<%= data %> // will show mydata

---

with EJS loader, it seems to be like this :

var mainPage = require("ejs!./mainPage.ejs");
var subPage = require("ejs!./subPage.ejs");

var renderedPage = _.mainPage('<%= mainPage %>', { title: 'data', subPage:subPage  });

<%= renderedPage %>

In mainPage.ejs :

<main>
    <h1><%= title %></h1>
    <%= subPage({ title:'sub page', content: 'This is the subPage' }) %>
</main>

In subPage.ejs :

<div>
    <h2><%= title %></h2>
    <p><%= content %></p>
</div>

Don't forget to add lodash plugin in your webpack conf file :

plugins: [
    new webpack.ProvidePlugin({
        _: "underscore"
    })
]

Enjoy !