ENOENT: no such file or directory when passing local data using include

neginbasiri commented 6 years ago

Hi all I try to pass local data using include but getting error.

I confirm that this works <%- include ../../components/content.blocks/two.column.content.ejs %>

However when I pass some local data along with include as bellow I get error

<%- include('../../components/content.blocks/two.column.content.ejs', {content: content}); %>

However I got error ENOENT: no such file or directory, open 'C:\Projects\Nephele\src\UI\src\templates\layouts\avalon('..\components\content.blocks\two.column.content.ejs', {content: content});'

More Detail Code:

page.templates.js

const pages = [
    {
        title: 'Fleets',
        template: 'templates/pages/avalon/fleets.ejs',
        filename: 'fleets.html',
        inject: 'body',
        data: require('../templates/data/avalon/fleets.json')
    }
];

const pageTemplates = pages.map(page => new HtmlWebpackPlugin(page));

module.exports = pageTemplates;

webpack.config.js

const pageTemplates = require('./page.templates.avalon.js');
const webpack = require('webpack');
let config = require('../../webpack.config.js');

// Set entry point
config.entry.app = './scripts/brands/avalon.js';

// Load in page templates
config.plugins.push(...pageTemplates);

module.exports = config;

fleets.ejs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
    <%- include src/templates/layouts/avalon/fleets.layout.ejs %>
</body>

</html>

Fleet.layout.ejs

<% 
var data = htmlWebpackPlugin.options.data;
if (data) {  %>
<!-- Header -->
<%- include ../../components/avalon/header/header.ejs %>
    <div class="page-mask">
        <%- include ../../components/hero.image/hero.image.ejs %>
        <%- include ../../components/content.blocks/one.column.content.ejs %>
        <%- include ../../components/content.blocks/image.row.content.ejs %>
        <% if(data.twoColumnContent[0]){ 
            var content = data.twoColumnContent[0]; %>
            <%- include("../../components/content.blocks/two.column.content.ejs", {content: content}); %>
        <%}%>

        <%- include ../../components/content.blocks/title.button.content.ejs %>
        <%- include ../../components/footer/footer.ejs %>
    </div>
<%}%>

relaxgo commented 6 years ago

I had same issue, because it install 1.x without version. you can reinstall it by yarn add ejs-compiled-loader@2.x or npm install ejs-compiled-loader@2.x. May be you need remove old first.

When you include child template with data by webpack, you may still have trouble. I got error that can't find include function. You can try <%- require('content.ejs')({ content: content })%>

neginbasiri commented 6 years ago

@relaxgo Thanks for response. I can use local data now! You saved a lot of my time. The only issue I have now is webpack doesn't rebuild on ejs file changes. Any solution for that?

suyi91 commented 6 years ago

@relaxgo having the same issue for several days. Thanks for your solution, it works great!

bazilio91 / ejs-compiled-loader

ENOENT: no such file or directory when passing local data using include #33