Errors with Portal / Custom Theme

Integrations & API
1

Hey everyone!

I have tried to work this out on my own for a couple of days now and I’m both out of my depth and out of ideas.

When I go to my page it injects the portal.min.js in the {{ghost_head}}, ala:
<script defer src="https://cdn.jsdelivr.net/ghost/portal@~2.51/umd/portal.min.js" data-i18n="true" data-ghost="https://etcvfx.com/" data-key="____________" data-api="https://_____.com/ghost/ghost/api/content/" data-locale="en" crossorigin="anonymous"></script>

But the buttons to go to Sign Up, Sign In, Subscribe, Open Portal, etc; all do nothing.

<a href="[#/portal/signup](https://etcvfx.com/#/portal/signup)">Try Sign Up</a>
<a href="[#/portal/signin](https://etcvfx.com/#/portal/signin)">Try Sign In</a>
<a href="[#/portal/](https://etcvfx.com/#/portal/)">Open Portal</a>
<button data-portal="signup">Subscribe</button>

The browsers devtools console relays an error:

App.js:242 [Portal] Failed to initialize: TypeError: Cannot read properties of undefined (reading 'replace')
    at Xu (helpers.js:731:25)
    at h0.setupFirstPromoter (App.js:641:26)
    at h0.fetchApiData (App.js:596:18)
    at async h0.fetchData (App.js:253:45)
    at async h0.initSetup (App.js:195:103)
initSetup @ App.js:242

In the console I do some fetch() tests…

fetch("https://######.com/ghost/api/content/settings/?key=##########################")
Promise {<pending>}[[Prototype]]: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: Response

fetch("https://######.com/ghost/api/content/settings/?key=##########################")
  .then(r => r.json())
  .then(data => console.log(data.settings.firstpromoter_account));
Promise {<pending>}[[Prototype]]: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: undefined

The issue does seem to revolve around this FirstPromoter business. But I’m not using that integration and don’t plan to. I have tried to update the mysql ghostdb settings table so firstpromoter_account to NULL, “”, ‘’, and “none”. But the portal.min.js continues to report undefined.

I have tried rolling my own portal.min.js and tweaking the Xu/xu elements, but they continue to fail. I don’t think I can disable the {{ghost_head}} or {{ghost_foot}} without encountering other issues. I’m really just stuck?

So, here’s the ask… I want to use Ghosts native memberships/comment system. I have the memberships set to “anyone can join”. But I can’t get the portal to work and I’m out of ideas to fix it. Can anybody help me out?

2

I’m not quite sure how you got into that state. Editing the db directly is definitely a good way to get into an inconsistent state, definitely not recommended. You should just be able to turn it off, under integrations:

image
image1105×572 33.5 KB

What version of Ghost are you running? And how did you install it? If you just installed it and don’t have significant data already in, it might be wisest to blow it away and start over…

3

Thanks for the quick response Cathy!

Confirmed the FirstPromoter integration is off. My ghost installation is through a docker stack via Portainer.

I would like to find a fix rather than replace… but if that’s the only option remaining? Do I need to delete just the ghostdb? or the whole installation?

4

I tried to check the issue. Apparently it’s not about First Promoter integration. You UI can not make HTTP requests to Ghost Content API properly. Requests goes to /ghost/ghost/api/content/settings/ path, and this led a 302 redirection to Ghost Admin. I think something wrong in your configuration. Maybe site url is wrongly set to /ghost subpath. You may consider looking at that part.

1 Like
5

You’re my hero! The issue was inside the docker stack!
url: https://######.com
admin__url: https://######.com/ghost/

Deleting that admin url line fixed it! I now see the sign in, sign up, subscribe, open portal pop-ups!

Thank you for your help! I spent a lot of time trying to fix this and was getting really frustrated.

1 Like