Request to backend fails link on main webpage on no- localhost machine.

[JasonHoku]

Error: Objects are not valid as a React child (found: TypeError: Failed to fetch). If you meant to render a collection of children, use an array instead. in code (at Home.tsx:41) in p (at Home.tsx:40) in Home (created by Context.Consumer) in Route (at Routes.tsx:49) in header (at Routes.tsx:37) in div (at Routes.tsx:36) in Switch (at Routes.tsx:31) in Routes (at App.tsx:4) in App (at src/index.tsx:9) in Router (created by BrowserRouter) in BrowserRouter (at src/index.tsx:8) ▼ 28 stack frames were expanded. code Home.tsx:41 p Home.tsx:40 Route Routes.tsx:49 header Routes.tsx:37 div Routes.tsx:36 Switch Routes.tsx:31 Routes App.tsx:4 App src/index.tsx:9 BrowserRouter src/index.tsx:8 throwOnInvalidObjectType /node_modules/react-dom/cjs/react-dom.development.js:13413 reconcileChildFibers /node_modules/react-dom/cjs/react-dom.development.js:14313 reconcileChildren /node_modules/react-dom/cjs/react-dom.development.js:16762 updateHostComponent /node_modules/react-dom/cjs/react-dom.development.js:17302 beginWork /node_modules/react-dom/cjs/react-dom.development.js:18627 HTMLUnknownElement.callCallback /node_modules/react-dom/cjs/react-dom.development.js:188 invokeGuardedCallbackDev /node_modules/react-dom/cjs/react-dom.development.js:237 invokeGuardedCallback /node_modules/react-dom/cjs/react-dom.development.js:292 beginWork$1 /node_modules/react-dom/cjs/react-dom.development.js:23203 performUnitOfWork /node_modules/react-dom/cjs/react-dom.development.js:22157 workLoopSync /node_modules/react-dom/cjs/react-dom.development.js:22130 performSyncWorkOnRoot /node_modules/react-dom/cjs/react-dom.development.js:21756 (anonymous function) /node_modules/react-dom/cjs/react-dom.development.js:11089 unstable_runWithPriority /node_modules/scheduler/cjs/scheduler.development.js:653 runWithPriority$1 /node_modules/react-dom/cjs/react-dom.development.js:11039 flushSyncCallbackQueueImpl /node_modules/react-dom/cjs/react-dom.development.js:11084 flushSyncCallbackQueue /node_modules/react-dom/cjs/react-dom.development.js:11072 scheduleUpdateOnFiber /node_modules/react-dom/cjs/react-dom.development.js:21199 dispatchAction /node_modules/react-dom/cjs/react-dom.development.js:15660 ▲ 28 stack frames were expanded. queryBackend src/views/Home.tsx:23 20 | const message = await getMessage(); 21 | setMessage(message); 22 | } catch (err) {

23 | setError(err); | ^ 24 | } 25 | }; 26 | View compiled 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. Click the 'X' or hit ESC to dismiss this message.

I assume this to be indicative of the methodology for file pathing, needing %PUBLIC_URL% or another director to account for react link generation.

I will take a look at this in the next couple days, might be a quick fix.

[Buuntu]

I don't think this is really an issue but if you want to make it clearer that you have to edit BACKEND_URL on non-localhost, go for it. It will be next to impossible to fit everyone's use case but we can make it more clear about how to edit this. We can provide the localhost url as a cookiecutter param, for example.

[JasonHoku]

I believe I have isolated the issue to file: fastapi-react{{cookiecutter.project_slug}}\frontend\src\config\index.tsx

export const BASE_URL: string = 'http://localhost:{{cookiecutter.port}}';
export const BACKEND_URL: string =
  'http://localhost:{{cookiecutter.port}}/api/v1';

Is it possible to declare a %PUBLIC_URL% here or use 0.0.0.0 to fix the back-end request function?

I'll test this soon and will conclude in a few days with either a readme pr or a pr to config\index.tsx

[Buuntu]

I would prefer having this as a cookiecutter setting, so like {{cookiecutter.localhost}}:{{cookiecutter.port}} and then update the README