How to get rid of this error ?

Question

1.00/5 (2 votes)

See more:

Uncaught TypeError: Cannot redefine property: visibilityState
    at Function.defineProperty (<anonymous>)
    at main.js:21:10
localhost:8080/api/v1/dalle:1 
        
        Failed to load resource: the server responded with a status of 500 (Internal Server Error)
data:image/png;base64,undefined:1 
        
        GET data:image/png;base64,undefined net::ERR_INVALID_URL
Image (async)
load @ three.module.js:42392
load @ three.module.js:42595
(anonymous) @ index-6662eaf2.esm.js:1645
(anonymous) @ index-6662eaf2.esm.js:1645
(anonymous) @ index-6662eaf2.esm.js:1645
query @ index.js:51
suspend @ index.js:68
useLoader @ index-6662eaf2.esm.js:1661
useTexture @ useTexture.js:8
Shirt @ Shirt.jsx:13
renderWithHooks @ react-reconciler.development.js:7363
updateFunctionComponent @ react-reconciler.development.js:11802
beginWork @ react-reconciler.development.js:13845
beginWork$1 @ react-reconciler.development.js:19513
performUnitOfWork @ react-reconciler.development.js:18686
workLoopSync @ react-reconciler.development.js:18597
renderRootSync @ react-reconciler.development.js:18565
performSyncWorkOnRoot @ react-reconciler.development.js:18183
flushSyncCallbacks @ react-reconciler.development.js:2936
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 21 more frames
Show less
2index-6662eaf2.esm.js:1648  Uncaught Error: Could not load data:image/png;base64,undefined: undefined
    at index-6662eaf2.esm.js:1648:36
    at HTMLImageElement.onImageError (three.module.js:42367:19)
(anonymous) @ index-6662eaf2.esm.js:1648
onImageError @ three.module.js:42367
Show 2 more frames
Show less
react-reconciler.development.js:9747  The above error occurred in the <Shirt> component:

    at Shirt (http://127.0.0.1:5174/src/Canvas/Shirt.jsx:26:16)
    at group
    at group
    at group
    at Center2 (http://127.0.0.1:5174/node_modules/.vite/deps/@react-three_drei.js?v=d1833a4a:111772:3)
    at group
    at CamRig (http://127.0.0.1:5174/src/Canvas/CamRig.jsx:24:3)
    at Suspense
    at ErrorBoundary (http://127.0.0.1:5174/node_modules/.vite/deps/chunk-N222EQID.js?v=d1833a4a:16596:5)
    at FiberProvider (http://127.0.0.1:5174/node_modules/.vite/deps/chunk-N222EQID.js?v=d1833a4a:18345:21)
    at Provider (http://127.0.0.1:5174/node_modules/.vite/deps/chunk-N222EQID.js?v=d1833a4a:17947:3)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
logCapturedError @ react-reconciler.development.js:9747
callback @ react-reconciler.development.js:9815
callCallback @ react-reconciler.development.js:4279
commitUpdateQueue @ react-reconciler.development.js:4300
commitLayoutEffectOnFiber @ react-reconciler.development.js:14877
commitLayoutMountEffects_complete @ react-reconciler.development.js:16290
commitLayoutEffects_begin @ react-reconciler.development.js:16276
commitLayoutEffects @ react-reconciler.development.js:16214
commitRootImpl @ react-reconciler.development.js:18945
commitRoot @ react-reconciler.development.js:18811
finishConcurrentRender @ react-reconciler.development.js:17990
performConcurrentWorkOnRoot @ react-reconciler.development.js:17907
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 15 more frames
Show less
2index-6662eaf2.esm.js:1648  Uncaught Error: Could not load data:image/png;base64,undefined: undefined
    at index-6662eaf2.esm.js:1648:36
    at HTMLImageElement.onImageError (three.module.js:42367:19)
(anonymous) @ index-6662eaf2.esm.js:1648
onImageError @ three.module.js:42367
Show 2 more frames
Show less
react-dom.development.js:18687  The above error occurred in the <ForwardRef(Canvas)> component:

    at Canvas (http://127.0.0.1:5174/node_modules/.vite/deps/chunk-N222EQID.js?v=d1833a4a:18489:3)
    at FiberProvider (http://127.0.0.1:5174/node_modules/.vite/deps/chunk-N222EQID.js?v=d1833a4a:18345:21)
    at CanvasWrapper
    at ErrorBoundary (http://127.0.0.1:5174/src/Canvas/index.jsx:25:3)
    at CanvasModel
    at main
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25892
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 15 more frames
Show less
react-dom.development.js:26923  Uncaught Error: Could not load data:image/png;base64,undefined: undefined
    at index-6662eaf2.esm.js:1648:36
    at HTMLImageElement.onImageError (three.module.js:42367:19)
(anonymous) @ index-6662eaf2.esm.js:1648
onImageError @ three.module.js:42367
Show 2 more frames
Show less

<Shirt> component:
    at Shirt (http://127.0.0.1:5173/src/Canvas/Shirt.jsx?t=1694278613899:26:16)
    at group
    at group
    at group
    at Center2 (http://127.0.0.1:5173/node_modules/.vite/deps/@react-three_drei.js?v=d1833a4a:111772:3)
    at group
    at CamRig (http://127.0.0.1:5173/src/Canvas/CamRig.jsx:24:3)
    at Suspense
    at ErrorBoundary (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-N222EQID.js?v=d1833a4a:16596:5)
    at FiberProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-N222EQID.js?v=d1833a4a:18345:21)
    at Provider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-N222EQID.js?v=d1833a4a:17947:3)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

What I have tried:

JavaScript

const handleSubmit = async (type) => {
  if (!prompt) return alert("Please enter a prompt");

  try {
    setGeneratingImg(true);

    const response = await fetch('http://localhost:8081/api/v1/dalle', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        prompt,
      })
    });

    // Handle the response here
    if (response.ok) {
      const data = await response.json();
      handleDecals(type, `data:image/png;base64,${data.photo}`);
    } else {
      // Handle non-OK responses (e.g., 404) here
      alert("Error: Unable to fetch data from the server");
    }
  } catch (error) {
    console.error(error);
    alert("Something went wrong");
  } finally {
    setGeneratingImg(false);
    setActiveEditorTab("");
  }
};

JavaScript

import express from 'express';
import * as dotenv from 'dotenv';
import cors from 'cors';

import dalleRoutes from './routes/dalle.routes.js';

dotenv.config();

const app = express();
app.use(cors({ origin: '*' }));
app.use(express.json({ limit: "50mb" }))

app.use("/api/v1/dalle", dalleRoutes);

app.get('/', (req, res) => {
  res.status(200).json({ message: "Hello from DALL.E" })
})

app.listen(8081, () => console.log('Server has started on port 8081'))

Posted 9-Sep-23 7:00am

tan25

Updated 13-Sep-23 3:18am

Deeksha Shenoy

v4

Add a Solution

Comments

Richard Deeming 11-Sep-23 4:07am

You haven't provided any details of the error, just a stack-trace.

tan25 12-Sep-23 5:44am

Failed to load resource: the server responded with a status of 500 (Internal Server Error)localhost:8080/api/v1/dalle:1

tan25 12-Sep-23 5:45am

index-6662eaf2.esm.js:1648 Uncaught Error: Could not load data:image/png;base64,undefined: undefined
at index-6662eaf2.esm.js:1648:36
at HTMLImageElement.onImageError (three.module.js:42367:19)

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)