Using ejs include in webpack dev middleware

Question

Using ejs include in webpack dev middleware

Closed this issue 3 years ago · 0 comments

Issue

Hello. I'm using webpack-dev-middleware and importing ejs using compile.outputFileSystem. But there is a problem. If there is no include statement, it works fine, but when I try to read the include statement of ejs from webpack-dev-middleware, an error occurs.

github

https://github.com/ryuhangyeong/fe-tip/blob/develop/src/server/app.ts#L84

this.app.get("/", (_: Request, res: Response, next: NextFunction) => {
  if (this.env.NODE_ENV === "development") {
    const filename = path.join(
      this.compiler.outputPath,
      "/template/index.html"
    );
    this.compiler.outputFileSystem.readFile(
      filename,
      (err: Error, result: string) => {
        if (err) return next(err);
        res.send(
          ejs.render(result?.toString() ?? "", { // ejs including include in that syntax throws an error. What am I not aware of?
            title: "development - index",
          })
        );
      }
    );
    return;
  } else if (this.env.NODE_ENV === "production") {
    res.render("index.html", {
      title: "production - index",
    });
  }
});

example

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= title %></title>
  </head>
  <body></body>
</html>

That code works.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= title %></title>
  </head>
  <body>
    <%- include('./layout/header.html') %>
  </body>
</html>

This code does not read the path file of include . It works fine if you use production mode or don't have include syntax.