TypeError: Invalid URL
    at new URL (node:internal/url:825:25)
...

const checkSuffix = (base, suffix) => {
  const url = new URL(base, globalThis?.document?.location);
  return url.pathname.slice(-4).toLowerCase() === suffix;
};

import axios from 'axios';
 
function MyComponent() {
 
  const [file, setFile] = useState(null)
 
  const handleFile = async () => {
    if (!file) return;
    const formData = new FormData();
    formData.append("file", file[0]);
    const res = await axios.post("/backend/uploadFile", formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
      onUploadProgress: (progressEvent) => {
        console.log(
          "Upload progress: " +
            Math.round(
              (progressEvent.loaded / (progressEvent.total ?? 1)) * 100
            ) +
            "%"
        );
      },
    });
    console.log(res);
  }
 
 
  return (
    <>
    <input type="file" name="filename2" id="filename2" required onChange={(e) => setFile(e.target.files)}/>
    <button onClick={handleFile}>UPLOAD</button>
    </>
  );
}

import express from "express";
import multer from "multer";
 
import * as XLSX from 'xlsx';
 
const app = express();
 
app.use(express.json());
 
app.get("/helloText", (req, res) => {
  res.send({ myResponse: "Hello World!" });
});
 
const upload = multer({ dest: "tmp/uploads/" });
app.post("/uploadFile", upload.single("file"), (req, res) => {
 
  const uploadedFile = req.file;
  console.log(req.file)
 
  console.log(uploadedFile.originalname);
 
  const workbook = XLSX.read(uploadedFile.path, {type: "binary"});
  console.log(workbook.SheetNames)
 
  res.send({ myResponse: "File uploaded successfully" });
});
 
 
app.listen(8002, () => {
  console.log(`Server is running on port ${8002}`);
});

 
{
  fieldname: 'file',
  originalname: 'Donnees XRF - 01-BIC3-Résultats2025-09.xlsx',
  encoding: '7bit',
  mimetype: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  destination: 'tmp/uploads/',
  filename: 'a6cb9674be41e209358c46ed6e73eca6',
  path: 'tmp\\uploads\\a6cb9674be41e209358c46ed6e73eca6',
  size: 61379
}

vinext dev          # Development server with HMR
vinext build        # Production build
vinext deploy       # Build and deploy to Cloudflare Workers

import { KVCacheHandler } from "vinext/cloudflare";
import { setCacheHandler } from "next/cache";
 
setCacheHandler(new KVCacheHandler(env.MY_KV_NAMESPACE));

vinext deploy --experimental-tpr
 
  Building...
  Build complete (4.2s)
 
  TPR (experimental): Analyzing traffic for my-store.com (last 24h)
  TPR: 12,847 unique paths — 184 pages cover 90% of traffic
  TPR: Pre-rendering 184 pages...
  TPR: Pre-rendered 184 pages in 8.3s → KV cache
 
  Deploying to Cloudflare Workers...

npx vinext init    # Migrate an existing Next.js project
npx vinext dev     # Start the dev server
npx vinext deploy  # Ship to Cloudflare Workers

import {open} from "sqlite";
import sqlite3 from "sqlite3";
 
let dbInstance = null;
 
export async function initDB() {
  dbInstance = await open({
    filename: "./db/database.sqlite",
    driver: sqlite3.Database,
  })
 
  await dbInstance.exec(`
          CREATE TABLE IF NOT EXISTS users (
            id        INTEGER   PRIMARY KEY AUTOINCREMENT,
            name      TEXT      NOT NULL,
            createdAt DATETIME  NOT NULL  DEFAULT CURRENT_TIMESTAMP
          )
    `)
 
  return dbInstance
  //console.log(dbInstance)
}
 
export function getDB() {
  if (!dbInstance) {
    throw new Error ("InitDB must be called before getDB");
  }
  return dbInstance
}

import {getDB, initDB} from "./db.js";
 
import express from "express";
//const express = require('express')
 
 
 
const app = express()
const port = 3001
 
app.use(express.json())
 
app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Access-Control-Allow-Headers');
  next();
});
 
app.get("/users", async (req, res) => {
 
  const db = getDB();
  console.log(db)
 
  const users = await db.all(
    "SELECT * FROM users"
  );
  console.log(users)
 
  return res.json(users);
 
});
 
app.get('/', (req, res) => {
  res.status(200).send('Hello World!');
})
 
app.listen(port, () => {
  console.log(`App running on port ${port}.`)
})

Database {
  config: { filename: './db/database.sqlite', driver: [Function: Database] },
  db: Database {}
}
[]

import { createRoot, useState } from 'react-dom/client'
 
function Counter() {
  // Destructuring the array returned by useState 
  const [count, setCount] = useState(0);
 
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}
 
createRoot(document.getElementById('root')).render(
  <Counter />
);

const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
  color: theme.palette.grey[200],
  [`& .${treeItemClasses.content}`]: {
    borderRadius: theme.spacing(0.5),
    padding: theme.spacing(0.5, 1),
    margin: theme.spacing(0.2, 0),
    [`& .${treeItemClasses.label}`]: {
      fontSize: '0.8rem',
      fontWeight: 500,
    },
  },
  [`& .${treeItemClasses.iconContainer}`]: {
    borderRadius: '50%',
    backgroundColor: theme.palette.primary.dark,
    padding: theme.spacing(0, 1.2),
    ...theme.applyStyles('light', {
      backgroundColor: alpha(theme.palette.primary.main, 0.25),
    }),
    ...theme.applyStyles('dark', {
      color: theme.palette.primary.contrastText,
    }),
  },
  [`& .${treeItemClasses.groupTransition}`]: {
    marginLeft: 15,
    paddingLeft: 18,
    borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
  },
  ...theme.applyStyles('light', {
    color: theme.palette.grey[800],
  }),
}));

const [selectedItem, setSelectedItem] = useState({}); 
 
  const onSiteSelect = (itemId) => {
    setSelectedItem(json.data.filter(el => el.id === itemId)[0])
  }
 
  return (
    <Box sx={{ flexGrow: 1 }}>
      <Grid container spacing={2}>
        <Grid size={2}>
          <Treeview json={json} language="fr" showTitle={false} fctOnClick={onSiteSelect}/>,
        </Grid>
        <Grid size={5}>
          <Box
            component="form"
            sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}
            noValidate
            autoComplete="off"
          >
            <TextField value={selectedItem.fr} label="Nom" defaultValue=" " variant="outlined" />
            <FormControl fullWidth>
              <InputLabel>Type</InputLabel>
              <Select
                defaultValue=""
                value={selectedItem.type}
                label="Type"
              >
                <MenuItem value={"GEOG"}>Geographique</MenuItem>
                <MenuItem value={"JURI"}>Juridique</MenuItem>
              </Select>
            </FormControl>
          </Box>
        </Grid>
        <Grid size={5}>
 
        </Grid>
      </Grid>
    </Box>
  );

 
function MapComponent() {
 
  const [map, setMap] = useState(null);
 
  let draw, snap; // global so we can remove them later
 
  const source = new VectorSource();
 
  const vector = new VectorLayer({
      source: source,
      style: {
        'fill-color': 'rgba(255, 255, 255, 0.2)',
        'stroke-color': '#ffcc33',
        'stroke-width': 2,
        'circle-radius': 7,
        'circle-fill-color': '#ffcc33',
      },
  });
 
  useEffect(() => {
 
    const osmLayer = new TileLayer({
      preload: Infinity,
      source: new OSM(),
    })
 
    const map = new Map({
      target: "map",
      layers: [osmLayer, vector],
      view: new View({
          center: [0, 0],
          zoom: 0,
        }),
    });
 
    const modify = new Modify({source: source});
    map.addInteraction(modify);
 
    setMap(map)
 
    return () => map.setTarget(null)
  }, []);
 
  function addInteractions() {
    draw = new Draw({
      source: source,
      type: "Polygon",
    });
    map.addInteraction(draw);
    snap = new Snap({source: source});
    map.addInteraction(snap);
  }
 
  return (
    <Box>
      <Toolbar>
        <IconButton onClick={addInteractions}>
            <MenuIcon />
        </IconButton>
 
      </Toolbar>
      <div style={{height:'600px',width:'50%'}} id="map" className="map-container" />
    </Box>
  );
 
}

 
app.get('/Evenement/:id', async (req, res) => {
  const isCrawler = /facebookexternalhit|twitterbot|linkedinbot/i.test(req.headers['user-agent']);
  if (!isCrawler) {
    return res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
  }
 
  const eventData = await Evenements.findById(req.params.id);
  const cleanDescription = eventData.texte.replace(/<[^>]*>/g, '').substring(0, 160);
  const imageUrl = `https://moncoach.tn/${eventData.photo}`;
  const pageUrl = `https://moncoach.tn/Evenement/${eventData._id}`;
 
  return res.send(`
    <html>
      <head>
        <meta property="og:title" content="${eventData.titre}" />
        <meta property="og:description" content="${cleanDescription}" />
        <meta property="og:image" content="${imageUrl}" />
        <meta property="og:url" content="${pageUrl}" />
      </head>
      <body></body>
    </html>
  `);
});