[BUG] Missing translations on Donate Form in dev

[BenSturmfels]

Hi Folks,
After running up a development environment as per the README.md, if I go to the "Donate Form Builder" and click on the blue "Donate" button, I see a form that has lots of text like:

[missing "en.nonprofits.donate.payment.card.submit" translation]

Have I missed a step somewhere?

[wwahammy]

I would assume you have not missed a step 😄

Are there any network errors in your browser when that page loads? There's a javascript file containing the translations that needs to load so it's either:

1. Failing when loading
2. Accidentally not loading at all
3. Loading at some weird spot in the page's load.

[BenSturmfels]

Thanks for the quick response! No 404s that I can see, but I am getting a JS console error which the Firefox debugger suggests is related to page__nonprofits__button__xxxx.js:

Uncaught TypeError: parentNode is null
    view index.js:15
    _curry index.js:15
    js page.js:141
    Webpack 5
index.js:15
    view index.js:15
    _curry index.js:15
    js page.js:141
    Webpack 5

[BenSturmfels]

Also for what it's worth, there are no resources being loaded that have "translation" in the URL.

[BenSturmfels]

On further investigation, the parentNode is null error appears to be unrelated and caused only because it's also trying to mount the "Guided" button component on the "Basic" button page and the element doesn't exist (see app/javascript/legacy/nonprofits/button/page.js:141).

Side note, I see that both Chromium and Firefox are requesting a non-existant js.map URL, presumably because of the exception:

ActionController::RoutingError (No route matches [GET] "/js/donate-button-v2-852353070ae83c8ceac5.js.map")

This should actually be /packs/js/donate-button-v2-852353070ae83c8ceac5.js.map. To track down the above I temporarily added a symlink ln -s public/packs/js public/js.

[BenSturmfels]

Moving to issue #1061.