SolidJS•13mo ago

I don't understand why I get this kind of error.no matter which method you try

GET http://localhost:3000/backend An unhandled error occured: TypeError: Failed to parse URL from /api/data at Object.fetch (node:internal/deps/undici/undici:11576:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async fetchData (eval at instantiateModule (file:///D:/%E0%B8%87%E0%B8%B2%E0%B8%99/Discord/Discord%20Bot/discord-server-web/Frontend/node_modules/vite/dist/node/chunks/dep-df561101.js:55971:28), <anonymous>:15:22)

14 Replies

❀フレイア❀•13mo ago

server.js

const express = require('express');
const app = express();
const cors = require('cors');
const { Client, Events, GatewayIntentBits } = require('discord.js');
const client = new Client({ intents: [GatewayIntentBits.Guilds] });
require('dotenv').config()



client.once(Events.ClientReady, () => {
    console.log(`Logged in as ${client.user.tag}!`);
});
client.login(process.env.TOKEN);


app.use(cors()); 
app.get('/api/data', (req, res) => {
  const data = {
    message: 'Hello from the backenddddddd!',
    title: '💮👑ชมรมคนเหงา🎮💘',
    ping: `${client.ws.ping}`
  };
  res.json(data);
});

const port = process.env.PORT || 3001;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

const express = require('express');
const app = express();
const cors = require('cors');
const { Client, Events, GatewayIntentBits } = require('discord.js');
const client = new Client({ intents: [GatewayIntentBits.Guilds] });
require('dotenv').config()



client.once(Events.ClientReady, () => {
    console.log(`Logged in as ${client.user.tag}!`);
});
client.login(process.env.TOKEN);


app.use(cors()); 
app.get('/api/data', (req, res) => {
  const data = {
    message: 'Hello from the backenddddddd!',
    title: '💮👑ชมรมคนเหงา🎮💘',
    ping: `${client.ws.ping}`
  };
  res.json(data);
});

const port = process.env.PORT || 3001;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

vite.config.js

import solid from "solid-start/vite";
import { defineConfig } from "vite";
export default defineConfig({
  plugins: [solid()],
  server: {
    proxy: {
      '/api': 'http://localhost:3001',
    }
  }
})

import solid from "solid-start/vite";
import { defineConfig } from "vite";
export default defineConfig({
  plugins: [solid()],
  server: {
    proxy: {
      '/api': 'http://localhost:3001',
    }
  }
})

backend.jsx

import { createSignal, onCleanup } from 'solid-js';

export default function Backend() {
  const [message, setMessage] = createSignal("");

  async function fetchData() {
      const response = await fetch('/api/data');
      const data = await response.json();
      setMessage(data.message); // เปลี่ยนเป็น data.message เพื่อดึงข้อความจาก property message ในอ็อบเจ็กต์ data
      console.log(data.message)
  }

  fetchData();

  return (
    <div>
      <h1 class="text-cyan">Backend Page</h1>
      <pre>{message()}</pre>
    </div>
  );
}

import { createSignal, onCleanup } from 'solid-js';

export default function Backend() {
  const [message, setMessage] = createSignal("");

  async function fetchData() {
      const response = await fetch('/api/data');
      const data = await response.json();
      setMessage(data.message); // เปลี่ยนเป็น data.message เพื่อดึงข้อความจาก property message ในอ็อบเจ็กต์ data
      console.log(data.message)
  }

  fetchData();

  return (
    <div>
      <h1 class="text-cyan">Backend Page</h1>
      <pre>{message()}</pre>
    </div>
  );
}

❀フレイア❀•13mo ago

shogun2077•13mo ago

Does this work using the full url? e.g http://localhost:3001/api/data BTW make use of a createResource instead or an onMount

shogun2077•13mo ago

And your issue seems to be with the vite config. Here's a link to the vite docs concerning sever options https://vitejs.dev/config/server-options.html

Vite

Next Generation Frontend Tooling

shogun2077•13mo ago

TLDR: use http://localhost:3000/api/data and it should work

❀フレイア❀•13mo ago

no data onweb but console.log(data.message) have data

shogun2077•13mo ago

Try making use of a createResource, return the data from the fetchData function and make use of the data signal returned from createResource

❀フレイア❀•13mo ago

I've been trying to find information on google for a few days about createResource I don't understand. Do I need to create a file or where do I start?

shogun2077•13mo ago

Mind showing me a photo of your logic? You seem to be making use of createEffect and fetchData wrong

❀フレイア❀•13mo ago

import { Suspense, createSignal } from "solid-js";
import { Nav } from './component/nav'
import axios from 'axios'; 
import {
  Body,
  ErrorBoundary,
  FileRoutes,
  Head,
  Html,
  Meta,
  Routes,
  Scripts,
  Title,
} from "solid-start";
import "./root.css";

export default function Root() {
  const [data, setData] = createSignal("");

  async function fetchData() {
    const response = await axios.get('http://localhost:3001/api/data');
    setData(response.data);
  }

  fetchData();
  
  return (
    <Html lang="th" className="scroll-smooth hover:scroll-auto md:scroll-auto">
      <Head>
        <Title>{data().title || 'กำลังดึงข้อมูล'}</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
          <Meta property="og:title" content={data().title} />
        <Meta property="og:description" content={data().message} />
        <Meta name="description" content={data().message}/>
        <Meta name="author" content="เฟรย์ย่าฮิเมะเองเจ้าคร๊า" />
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,400,400i,700,700i,900,900i" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css2?family=Mitr:wght@300&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="dist/sakura.css" />
      </Head>
      <Body>
        <Suspense>
          <ErrorBoundary>
            <Nav />
            <Routes>
              <FileRoutes />
            </Routes>
          </ErrorBoundary>
        </Suspense>
        <Scripts />
      </Body>
    </Html>
  );
}

import { Suspense, createSignal } from "solid-js";
import { Nav } from './component/nav'
import axios from 'axios'; 
import {
  Body,
  ErrorBoundary,
  FileRoutes,
  Head,
  Html,
  Meta,
  Routes,
  Scripts,
  Title,
} from "solid-start";
import "./root.css";

export default function Root() {
  const [data, setData] = createSignal("");

  async function fetchData() {
    const response = await axios.get('http://localhost:3001/api/data');
    setData(response.data);
  }

  fetchData();
  
  return (
    <Html lang="th" className="scroll-smooth hover:scroll-auto md:scroll-auto">
      <Head>
        <Title>{data().title || 'กำลังดึงข้อมูล'}</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
          <Meta property="og:title" content={data().title} />
        <Meta property="og:description" content={data().message} />
        <Meta name="description" content={data().message}/>
        <Meta name="author" content="เฟรย์ย่าฮิเมะเองเจ้าคร๊า" />
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,400,400i,700,700i,900,900i" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css2?family=Mitr:wght@300&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="dist/sakura.css" />
      </Head>
      <Body>
        <Suspense>
          <ErrorBoundary>
            <Nav />
            <Routes>
              <FileRoutes />
            </Routes>
          </ErrorBoundary>
        </Suspense>
        <Scripts />
      </Body>
    </Html>
  );
}

shogun2077•13mo ago

import { Suspense, createSignal, createResource } from "solid-js";
import { Nav } from './component/nav'
import axios from 'axios'; 
import {
  Body,
  ErrorBoundary,
  FileRoutes,
  Head,
  Html,
  Meta,
  Routes,
  Scripts,
  Title,
} from "solid-start";
import "./root.css";

async function fetchData() {
  const response = await axios.get('http://localhost:3001/api/data');
  return response.data
}

export default function Root() {
  const [data] = createResource(fetchData)

  return (
    <Html lang="th" className="scroll-smooth hover:scroll-auto md:scroll-auto">
      <Head>
        <Title>{data().title || 'กำลังดึงข้อมูล'}</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
          <Meta property="og:title" content={data().title} />
        <Meta property="og:description" content={data().message} />
        <Meta name="description" content={data().message}/>
        <Meta name="author" content="เฟรย์ย่าฮิเมะเองเจ้าคร๊า" />
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,400,400i,700,700i,900,900i" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css2?family=Mitr:wght@300&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="dist/sakura.css" />
      </Head>
      <Body>
        <Suspense>
          <ErrorBoundary>
            <Nav />
            <Routes>
              <FileRoutes />
            </Routes>
          </ErrorBoundary>
        </Suspense>
        <Scripts />
      </Body>
    </Html>
  );
}

import { Suspense, createSignal, createResource } from "solid-js";
import { Nav } from './component/nav'
import axios from 'axios'; 
import {
  Body,
  ErrorBoundary,
  FileRoutes,
  Head,
  Html,
  Meta,
  Routes,
  Scripts,
  Title,
} from "solid-start";
import "./root.css";

async function fetchData() {
  const response = await axios.get('http://localhost:3001/api/data');
  return response.data
}

export default function Root() {
  const [data] = createResource(fetchData)

  return (
    <Html lang="th" className="scroll-smooth hover:scroll-auto md:scroll-auto">
      <Head>
        <Title>{data().title || 'กำลังดึงข้อมูล'}</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
          <Meta property="og:title" content={data().title} />
        <Meta property="og:description" content={data().message} />
        <Meta name="description" content={data().message}/>
        <Meta name="author" content="เฟรย์ย่าฮิเมะเองเจ้าคร๊า" />
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,400,400i,700,700i,900,900i" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css2?family=Mitr:wght@300&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="dist/sakura.css" />
      </Head>
      <Body>
        <Suspense>
          <ErrorBoundary>
            <Nav />
            <Routes>
              <FileRoutes />
            </Routes>
          </ErrorBoundary>
        </Suspense>
        <Scripts />
      </Body>
    </Html>
  );
}

Try this Quick question, why are you requesting the title and description of the page from a server?

❀フレイア❀•13mo ago

after createResource, i can use it to all page ?

❀フレイア❀•13mo ago

thank you

❀フレイア❀•13mo ago

https://www.littlekittlylove.xyz/ but i have problem with navbar When using it in the computer, everything seems normal. Until I took it to the VPS and the button didn't work.

ğŸ’®à¸Šà¸¡à¸£à¸¡à¸„à¸™à¹€à¸«à¸‡à¸²ğŸ’˜

Gaming

Programming

I don't understand why I get this kind of error.no matter which method you try