Unhandled Rejection (AppIdMustBeString): Application ID must be a string.

[cmarabate]

I followed the instructions in your read me making sure to add my userbase App ID in the .env file. The home page is working but when I try to view the login page, I get the following error...

×
Unhandled Rejection (AppIdMustBeString): Application ID must be a string.
▼ 3 stack frames were expanded.
setAppId
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/userbase-js/lib/config.js:22
configure
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/userbase-js/lib/config.js:30
init
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/userbase-js/lib/auth.js:460
▲ 3 stack frames were expanded.
PublicRoute.componentDidMount
C:/Users/Owner/_DevSandbox/userbase-gatsby/src/components/auth/public-route/index.tsx:24
  21 | 
  22 |  componentDidMount() {
  23 |    // Check the user's session and set the state.
> 24 |    userbase.init({ appId: process.env.GATSBY_REACT_APP_USERBASE_APP_ID as string })
  25 |    .then(session => {
  26 |      this.setState((state) => {
  27 |        return {
View compiled
▼ 21 stack frames were expanded.
PublicRoute.componentDidMount
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-hot-loader/dist/react-hot-loader.development.js:704
commitLifeCycles
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-dom/cjs/react-dom.development.js:19814
commitLayoutEffects
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-dom/cjs/react-dom.development.js:22803
HTMLUnknownElement.callCallback
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-dom/cjs/react-dom.development.js:188
invokeGuardedCallbackDev
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-dom/cjs/react-dom.development.js:237
invokeGuardedCallback
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-dom/cjs/react-dom.development.js:292
commitRootImpl
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-dom/cjs/react-dom.development.js:22541
unstable_runWithPriority
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js:653
runWithPriority$1
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-dom/cjs/react-dom.development.js:11039
commitRoot
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-dom/cjs/react-dom.development.js:22381
finishSyncRender
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-dom/cjs/react-dom.development.js:21807
performSyncWorkOnRoot
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-dom/cjs/react-dom.development.js:21793
(anonymous function)
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-dom/cjs/react-dom.development.js:11089
unstable_runWithPriority
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js:653
runWithPriority$1
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-dom/cjs/react-dom.development.js:11039
flushSyncCallbackQueueImpl
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-dom/cjs/react-dom.development.js:11084
flushSyncCallbackQueue
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-dom/cjs/react-dom.development.js:11072
scheduleUpdateOnFiber
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-dom/cjs/react-dom.development.js:21199
enqueueSetState
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react-dom/cjs/react-dom.development.js:12639
LocationProvider../node_modules/react/cjs/react.development.js.Component.setState
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/react/cjs/react.development.js:471
(anonymous function)
C:/Users/Owner/_DevSandbox/userbase-gatsby/node_modules/@reach/router/es/index.js:103
▲ 21 stack frames were expanded.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

[cmarabate]

Nevermind, I apparently just had to shut down the site and build it up again using "gatsby develop".

[jneterer]

@cmarabate Glad you got it figured out! Let me know if you have any other questions!

[cmarabate]

I do have a question actually, does Userbase allow me to create a website that would let each visitor pin/star items and/or move stuff around and have it only saved locally for each visitor?

If not, do you know of a Gatsby Starter that does or what it is that I need to search for to learn how to create a site like that? There has to be a name for that type of site that I am not aware of.

Here are a couple examples of sites I have found that work like this...

• http://warframe-builder.com/Warframes/Builder/Amesha
• https://5e.tools/items.html#abacus_phb

Thanks!

[jneterer]

@cmarabate What you are describing sounds like saving anonymous user data in session/local storage. I am not quite sure of your use case, but if you have a page that is open to anonymous users, you should be able to allow the anonymous user to interact with your site and just save the data in their local storage (probably local, not session, depending on how long you want that data to persist). Then, if the user attempts to sign up or log in, after either action you could programmatically save what you have stored in their local or session storage to their actual account. I would not recommend saving ANY data in session or local storage that is sensitive (hence the point of Userbase).

I doubt there is any kind of solution other than what I've described.

Session Storage: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage Local Storage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

[cmarabate]

That is a huge help, thank you so much! Now that I know what exactly I am looking for, I should be able to figure it out!

Thanks again!

[mrtornado]

hello, I'm getting the same error after I upload the site to netlify. Any idea why?