Use of fs at runtime prevents use in browser #546
Comments
|
also in bundle.js i get this // Publish a Node.js require() handler for .handlebars and .hbs files
function extension(module, filename) {
var fs = require('fs');
var templateString = fs.readFileSync(filename, 'utf8');
module.exports = handlebars.compile(templateString);
}
/* istanbul ignore else */
if (typeof require !== 'undefined' && require.extensions) {
require.extensions['.handlebars'] = extension;
require.extensions['.hbs'] = extension;
} |
|
Hey @Hasenn, Thanks for reaching out. Indeed, the library as packaged node module is not suitable for use without build tool. However, every recent release on GitHub includes a Below an example HTML file: <html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<script type="text/plain" id="chordSheet">
{title: Let it be}
{subtitle: ChordSheetJS example version}
{composer: John Lennon}
{composer: Paul McCartney}
{Chorus}
Written by: %{composer}
Let it [Am]be, let it [C/G]be, let it [F]be, let it [C]be
[C]Whisper words of [G]wisdom, let it [F]be [C/E] [Dm] [C]
</script>
<style>
body {
font-family: sans-serif;
}
</style>
<script>
const {
ChordProParser,
HtmlDivFormatter,
} = ChordSheetJS;
const parser = new ChordProParser();
const chordpro = document.getElementById("chordSheet").innerText;
const song = parser.parse(chordpro);
const formatter = new HtmlDivFormatter();
const disp = formatter.format(song);
const css = HtmlDivFormatter.cssString('.chordSheetViewer');
document.write(`<style>${css}</style>`);
document.write(`<div class="chordSheetViewer">${disp}</div>`);
</script>
</body>
</html>This should result in something looking like this:
Please let me know if you need more info or experience any other issue. |
|
Thanks for your answer, |
|
Ah sorry, I missed the part where you mentioned NextJS. For a NextJS (or any React) app, I would expect the build tool of your project to correctly handle this. If I correctly read the stacktrace, the error occurs in the Handlebars module. Handlebars registers a handler for It might be a Webpack issue, found some suggestions here: handlebars-lang/handlebars.js#1174 |
In the context of a web app that reads various chordpro from different urls I would prefer having it parsed on the browser to have my app be distributed via a CDN than having to offer an API to proxy and parse the different songs.
But when doing that, i get this error
my code just does this (client-side)
Possible culprit is
src/normalize_mappings/generate-suffix-normalize-mapping.tswhich usesfsto read and write some things. I think this is part of some build-time codegen thing, in which case it shouldn't ask forfsat runtime maybe it gets bundled by mistake ?The text was updated successfully, but these errors were encountered: