Can you run htl engine with webpack?

[shborrowman]

I'm trying to run htl engine and it seems to work just fine as a stand alone process but when I try to combine it with my webpack setup that is handling my ES6 and scss compiling I get a ERROR in ./node_modules/@adobe/htlengine/node_modules/source-map/lib/read-wasm.js Module not found: Error: Can't resolve 'fs' in '/node_modules/@adobe/htlengine/node_modules/source-map/lib' in about 7 different files. Everything I can find by searching the error says that webpack doesn't work with 'fs'.

[trieloff]

Just for clarification: is your goal to run htlengine in the browser, as part of a larger project that is bundled by webpack?

[shborrowman]

That is correct. But in a dev environment.

[trieloff]

I'd try excluding the source-map dependency from your webpack build.

[shborrowman]

The only source-map I currently use is for my scss compiling. Removing them still gives me the same error, though.

[tripodsan]

hi @shborrowman, the htlengine basically works in 2 steps:

1. the compile phase, which generates a template. this one needs the fs of course.
2. the runtime phase, where the template gets executed. since version 4.0.0, the runtime is now free of any node dependencies. so it is possible to run it in a browser.

please note, that the htl-loader still uses an old htlengine and cannot be configured to create templates.

also, there is currently an effort going, to get AEM support for storrybook, but it's in an early stage.

have a look at the htl-loader that is temporarily used in storybook: https://github.com/storybookjs/aem/blob/master/htl-loader/src/index.js

and how the compiled HTL is used: https://github.com/storybookjs/aem/blob/2646b7abcc3c6ddeb0b8aa6bbeb7b1cba0279dc2/examples/aem-kitchen-sink/components/text/text.stories.js#L18-L41

[github-actions[bot]]

:tada: This issue has been resolved in version 6.3.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: