How do I use syntastica-js on the web?

[rrthomas]

I see from the example code that syntastica-js is intended to be used on the web.

However, I can't work out how to access it from the browser.

I tried adding syntastica to my simple webpack-bundled project, and got an error that started:

ERROR in ./node_modules/syntastica/pkg/syntastica-js.js 8:827-843
Module not found: Error: Can't resolve 'module' in '/home/rrt/Software/ursalang.github.io/node_modules/syntastica/pkg'
resolve 'module' in '/home/rrt/Software/ursalang.github.io/node_modules/syntastica/pkg'

Sorry, I'm quite new to modern web JavaScript (more used to Node on the back-end), so apologies if I'm just being clueless, and thanks for syntastica!

[RubixDev]

The syntastica-js package in its current state is over 60 MB big, which is not suitable for the web. This is because all languages are included in one binary. I have not yet figured out a way to split the package into multiple separate packages (one per language plus one core package) and lazily fetch language binaries from the server on demand.

But if that is not a concern for you, a look at the example vite project may help, which uses an old version (the latest on npm) with only a few languages, where the bundle size was "only" ~9 MB. I also encountered a similar issue as you did, but couldn't figure out how to fix it from the package itself (I'm not that experienced with bundlers), but I found a workaround for vite:

syntastica/examples/js/vite/vite.config.ts

Lines 7 to 13 in 5872bc9

	// for some reason this seams to be needed when running a development server,
	// although I don't see an error in the syntastica package.json
	resolve: {
	alias: {
	syntastica: './node_modules/syntastica/pkg/index.js',
	},
	},

With some googling there are probably also similar workarounds for other bundlers. I'm pretty sure I already found one for Rollup, but didn't save it anywhere.

[rrthomas]

Right, I guess I got the wrong idea from the example code writing to innerHTML… Nevertheless, I may well still be in the market, as currently I'm trying Pygments compiled to WASM, which is around 9MB (still, I admit, 60MB is a lot).

Again, thanks very much!

[RubixDev]

No you got it right, syntastica-js was meant to be used on the web, it's just that after having added so many more languages I realized the current approach wasn't working and I would have to figure something else out, so it just stayed in limbo since then. I also finally got around to better explaining the current Wasm support here and added two more tiny example projects.