Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Partials not found

See original GitHub issue

No matter what I do to include partials, I always receive the following error “Error: ENOENT: no such file or directory”. The EJS include does not resolve the partial, even if I move the partials to the same level as the ‘entry’ ejs file. I’m running with webpack-dev-server.

What I’m trying to do:

I have existing EJS files, I want to compile them (and their partials), then have the project accessible from dist/index.html (using html-webpack-plugin, see below). Previously this was a gulp task.

Project structure: app/

layouts/default.ejs
main.ejs
webpack.config.js

scripts/

main.js

assets/ dist/

In main.ejs, I have:

<%- include layouts/default -%>

Relevant parts of webpack.config looks like:

const appDir  = path.resolve(__dirname, 'app'),
      distDir = path.resolve(__dirname, 'dist')

---

  output: {
    devtoolLineToLine : true,
    sourceMapFilename : 'main.js.map',
    pathinfo          : true,
    path              : distDir,
    filename          : 'main.js'
  },
  module : {
    loaders: [
      {
        test: /.ejs$/,
        loader: 'ejs-compiled'
      },
      //Run JS through babel-loader
      {
        test   : /.js$/,
        loader : 'babel-loader',
        include: appDir,
        exclude: /node_modules/,
        query  : {
          plugins: ['lodash'],
          presets: ['es2015'],
        }
      },
..
}
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
    new HtmlWebpackPlugin({
  title    : 'Puzzle Slider Proto',
  template : '!!ejs-compiled-loader!' + appDir + '/main.ejs'
})
  ]

I’m using ES6 with: “ejs-compiled-loader”: “^1.1.0”, “babel-loader”: “^6.2.5”, “html-webpack-plugin”: “^2.24.1”,

Issue Analytics

State:
Created 7 years ago
Reactions:7
Comments:9

Top GitHub Comments

5reactions

ZiperRom1commented, Jul 2, 2017

I found the solution, while the ejs official doc says that the syntax for import is <%- include('user/show'); %> it is actually <%- include user/show %>, I found it here.

I replace my includes with this new simpler syntax and webpack now compiles fine.

Do not forget to include with the path relative to your webpack config file.

Also, if you want to compile your file with CLI (not in runtime), like I do with gulp and gulp-ejs plugin; you must prefix your includes with / (like root path) (ex: <%- include /project_root/some_dir/user/show %>) and then set in ejs option {"root": __dirname} in your gulp file where __dirname is the absolute path of your project_root.

1reaction

gregorskiicommented, Sep 18, 2017

Right after posting this… tried it without any pathing on the templates, and with version 2.0.0 it works.

Using this works:

"ejs-compiled-loader": "^2.2.0",

<!DOCTYPE html>
<html lang="en">
<%- include partials/head %>
<body class="home"> 

  // SOME HTML

  <% htmlWebpackPlugin.files.js.forEach(function(jsFile) { %>
    <script type="text/javascript" src="<%= jsFile %>"></script>
  <% }); %>
</body>

</html>

I think the confusion about NPM serving version 1 needs to be cleared up. From then on its just a matter of configuring it how EJS recommends: https://github.com/tj/ejs#includes