Error when trying to import javascript file into page on gatsby build (fine on local develop)

[DtheC]

Hiya, I'm bashing my head against a wall trying to figure out how to resolve a webpack error I'm having when I run gatsby build which doesn't happen when I'm running develop locally. The site I'm making (gallery for p5js sketches) needs to import a javascript file for each dynamically made page. I do this using
import(``../../../sketches/${data.directory.name}/default.js``).then(result => setSketch(result));
Full Code: https://github.com/DtheC/code-display-user-site/blob/main/src/pages/sketches/%7Bdirectory.name%7D.js#L10
The error on build is:
ERROR Cannot find module '../../../sketches/sketch1/default.js'
Which I assume means that webpack can't find that relative directory when it is making the static files. Possibly because I need to move them to static/public on build and resolve them there (???? I have no idea). Does anyone have any suggestions on what I would need to do to solve this?

[DtheC]

A suggestion from the discord was "you maybe able to leverage 'require' and path to the location where your build is dropping those files (via gatsby source fs plugin)."

I tried using the gatsby-source-filesystem plugin and the publicURL for the file:
import(``${f[0].node.publicURL}``).then(result => setSketch(result));
And I just get an error both when running dev and in prod builds:
Uncaught (in promise) Error: Cannot find module '/static/a73a7c136509db6b4caa334ec956614d/default.js'
But if I got to the URL in browser (i.e http://localhost:8000/static/a73a7c136509db6b4caa334ec956614d/default.js) the file is there.

I tried require instead of import with the same result. If anyone has any suggestions I'd appreciate it