1

My component is loading fine but the styles are not loading, nor are the events firing. I am following the documentation and no errors are being thrown but it seems I might be missing something fundamental here?

View template rendered with res.marko:

import Explanation from "./components/explanation.marko";
<!DOCTYPE html>
<html lang="en">
<head>
  ...
</head>
<body>
  ...
  <include(Explanation, input.explanation) />
  ...
</body>
</html>

explanation.marko file:

class {
  onExplanationClick() {
    console.log("Explanation clicked");
  }
}

style {
  .explanation-paragraph {
    color: red;
  }
}

<div id="explanation" on-click('onExplanationClick')>
  <for (paragraph in input.content)>
    <p class="explanation-paragraph">${paragraph}</p>
  </for>
</div>

Server side:

app.get("/explanation/:id", async function(req, res) {
  var explanation = await findExplanation(req.params.id);
  var template = require("../../views/explanation/explanation.marko");
  res.marko(template, { explanation, user: req.user });
});

Also using marko/node-require and marko/express.

Emile Paffard-Wray
  • 1,006
  • 2
  • 9
  • 17

1 Answers1

2

You will need to integrate a module bundler/asset pipeline. In the sample marko-express app we are using Lasso (an asset pipeline + JavaScript module bundler).

There's also another sample app that integrates Webpack: https://github.com/marko-js-samples/marko-webpack

The Marko team supports both Lasso and Webpack, but we recommend Lasso because it is simpler and requires minimal configuration.

Please take a look at the marko-express app and feel free to ask questions in our Gitter chat room if you get stuck: https://gitter.im/marko-js/marko

Patrick Steele-Idem
  • 457
  • 2
  • 5
  • Thanks, I hadn't realised Lasso was required for this, and thanks for the gitter link as well – Emile Paffard-Wray Oct 20 '17 at 19:15
  • Link only answers really aren't helpful. Not sure why this was accepted as an answer. – Hybrid web dev Jun 27 '18 at 09:26
  • @Hybridwebdev It's not only a link, this answer pointed out what I was missing (a module bundler) and directly solved the problem I was having. The link went to some sample code that helped me even more. It was very helpful, that's why I accepted it. – Emile Paffard-Wray Jul 01 '18 at 13:43