Add a script to Discourse's webpack

Development

AI-generated summary

In a discussion about adding a script to Discourse’s webpack, darkpixlz reported an issue with missing SVG icons on their unsupported IP-based Discourse install, caused by malformed asset URLs. They attempted to fix it with a script but couldn’t access webpack’s module system due to Discourse’s custom loader. david explained that native ES modules won’t work and suggested using a theme/plugin initializer instead, referencing a guide darkpixlz followed the advice and successfully resolved the issue, sharing their fix in a GitHub repo for others facing the same problem. david also clarified that the hyphenated path segment in asset URLs is intentional to support multi-forum CDN setups, and reiterated that running Discourse on an IP address is unsupported and likely to cause further issues.

1

Hello,

I’ve never worked with webpack and my JS knowledge is poor, and I have a Discourse install running off an IP, which is “unsupported”. It works, but the icons are missing because it tries loading http://192.168.0.22:8080/svg-sprite/192.168.0.22:8080/svg-3-c1066beb12cc75cc4c3bc42f218f381c862e7905.js which has the icons, but failed because of the numbers. Anything else would work, such as http://192.168.0.22:8080/svg-sprite/-/svg-3-c1066beb12cc75cc4c3bc42f218f381c862e7905.js (you can put anything where the - is so I’m not quite sure why it exists in the first place but thats not up for me to decide).

I’m trying to get it to load the correct host, so I made a little script to do it, but thanks to webpack I’m not able to access the loader through imports:

image
image1056×211 5.92 KB

Because of this limitation, I need to get into discourse’s webpack which is nowhere to be found. How can I add a script to the folder?

/var/discourse$ ls
shared
3

We don’t use the browser’s native module resolution system, so <script type="module"> with imports and exports won’t work as you expect.

Instead, you can create an initializer in a Discourse theme/plugin, and use that to run the loadSprites() code.

It’s for hosting environments where the same CDN domain is used by multiple Discourse forums.

Indeed… it is not supported. You are very likely to run into other issues.

4

Is there a guide for this? Haven’t tried that before.

5

This topic has an example: Split up theme Javascript into multiple files

6

Thanks… it worked! For anybody else having this issue in the future, here’s the repo which I used to fix it (assuming you are running on 192.168.0.22:8080)

https://github.com/darkpixlz/discourse-icons-fix