DEV Community: ahmed SENEINA

"fetch is not defined" in Node.js: why it happens and how to fix it

ahmed SENEINA — Tue, 16 Jun 2026 15:16:11 +0000

If you copied a fetch() example from the browser into a Node.js script and got:

ReferenceError: fetch is not defined

you did nothing wrong. fetch is a browser API. It only became built into Node.js starting with Node 18.

Three quick ways to know what you are dealing with:

node -v

Case 1 — Node 18 or newer. fetch is global. If it still fails, you are probably running an old Node from another shell or an outdated CI image. Check the version the script actually runs with, not the one you think you have.

Case 2 — Node 16 or older. Either upgrade Node (best), or add a polyfill:

import fetch from 'node-fetch';

Case 3 — wrong context. Running the file with a bundler, a serverless runtime or a test runner can shadow the global. Log typeof fetch at the top of the file to confirm.

The mental model that saves time: the error is about the runtime, not your code. Identify the runtime first, then decide between upgrade and polyfill.

I wrote a full French walkthrough with the Node version table, the polyfill setup and the common CI trap here:

https://gogokodo.com/fetch-is-not-defined-referenceerror-nodejs-solution

PHP arrays: indexed, associative and foreach without confusion

ahmed SENEINA — Tue, 09 Jun 2026 06:41:13 +0000

Most PHP beginners do not struggle because arrays are hard.

They struggle because three ideas arrive at the same time:

indexed arrays
associative arrays
foreach

Indexed array:

$languages = ["PHP", "JavaScript", "Python"];
echo $languages[0];

Associative array:

$user = [
    "name" => "Nadia",
    "role" => "developer"
];

echo $user["name"];

Foreach with values:

foreach ($languages as $language) {
    echo $language;
}

Foreach with keys and values:

foreach ($user as $key => $value) {
    echo $key . ": " . $value;
}

The key idea: => links a key to a value.

I published a full French beginner guide with examples, common mistakes, nested arrays and safe HTML output:

https://gogokodo.com/tableaux-php-array-fonctions-guide-complet

MCP for Claude: the beginner explanation I wish I had first

ahmed SENEINA — Tue, 09 Jun 2026 06:41:08 +0000

MCP is easier to understand if you stop treating it like "another AI plugin".

It is closer to a connection standard between an AI client and external tools.

The basic vocabulary:

Host/client: Claude Desktop, Claude Code, Cursor, etc.
MCP server: the program exposing tools or resources
Tools: actions the assistant can request
Resources: files, schemas or data the assistant can read
Permissions: the part people should not skip

The safest beginner setup is read-only and narrow.

For example, if you expose a filesystem server, do not point it at your whole home directory. Point it at one project folder.

The progression I recommend:

Understand what the server can read
Test on a non-sensitive project
Add one server at a time
Observe suggested actions before enabling writes
Disable anything you do not understand

I wrote a French guide for GoGoKodo that explains MCP with Claude, local servers, common mistakes and when it becomes useful for developers:

https://gogokodo.com/mcp-claude-serveur-debutant

The n8n Self-Hosted Mistake Beginners Keep Making: WEBHOOK_URL

ahmed SENEINA — Thu, 04 Jun 2026 13:32:26 +0000

If you are self-hosting n8n with Docker, the hard part is usually not docker compose up.

The hard part is making webhooks work reliably.

The beginner trap is simple:

n8n runs locally on localhost:5678
Telegram, Stripe, GitHub or Discord need a public URL
n8n generates webhook URLs based on its environment
if WEBHOOK_URL is wrong, production triggers fail

Minimal mental model:

environment:
  - N8N_HOST=n8n.example.com
  - N8N_PROTOCOL=https
  - WEBHOOK_URL=https://n8n.example.com/

After changing env vars, restart the container and re-check the webhook URL shown in n8n.

For a French beginner-friendly walkthrough with Docker Compose, RGPD notes, webhook checks and internal n8n practice links, I wrote the full guide here:

https://gogokodo.com/n8n-self-hosted-docker-rgpd

useEffect Boucle Infinie en React : 5 Causes et Comment les Corriger

ahmed SENEINA — Sun, 12 Apr 2026 06:37:56 +0000

Ta console explose de logs, ton navigateur ralentit, l'onglet freeze — tu es face à une boucle infinie useEffect. C'est le bug React le plus frustrant pour les débutants. Voici les 5 causes et comment les corriger.

Comment détecter une boucle infinie

Console qui spam : des centaines de logs identiques
Erreur React : Too many re-renders.
Navigateur qui rame : 100% CPU
Network : dizaines de fetch identiques

Cause 1 : Pas de tableau de dépendances

// ❌ S'exécute à CHAQUE rendu
useEffect(() => {
  fetch('/api/data').then(r => r.json()).then(setData);
}); // pas de []

// ✅ Une seule fois au montage
useEffect(() => {
  fetch('/api/data').then(r => r.json()).then(setData);
}, []); // tableau vide

Cause 2 : setState avec la valeur dans les deps

// ❌ count change → useEffect → setCount → 💥
const [count, setCount] = useState(0);
useEffect(() => {
  setCount(count + 1);
}, [count]);

// ✅ Forme fonctionnelle
useEffect(() => {
  const timer = setInterval(() => {
    setCount(prev => prev + 1);
  }, 1000);
  return () => clearInterval(timer);
}, []);

Cause 3 : Objet/array dans les dépendances

// ❌ Nouvel objet à chaque rendu = nouvelle référence
const options = { query, limit: 10 };
useEffect(() => {
  fetchResults(options);
}, [options]); // 💥

// ✅ Dépendre des primitives
useEffect(() => {
  fetchResults({ query, limit: 10 });
}, [query]); // string = stable

Cause 4 : Fonction qui recrée un objet

// ❌
useEffect(() => {
  fetch(\`/api?\${new URLSearchParams(getFilters())}\`);
}, [getFilters()]); // nouvel objet = 💥

// ✅ Constante
const FILTERS = { category: 'tech' };
useEffect(() => {
  fetch(\`/api?\${new URLSearchParams(FILTERS)}\`);
}, []);

Cause 5 : Fetch → setState → re-render → fetch

// ❌ url change dans l'effet qui dépend de url
useEffect(() => {
  fetch(url).then(r => r.json()).then(result => {
    setData(result);
    setUrl(result.nextPage); // change url → relance 💥
  });
}, [url]);

// ✅ url ne change que sur action utilisateur
useEffect(() => {
  fetch(url).then(r => r.json()).then(setData);
}, [url]);
const loadMore = () => setUrl(data.nextPage); // clic

La règle d'or

Si tu peux calculer une valeur sans useEffect, ne l'utilise pas.

// ❌ useEffect pour du state dérivé
useEffect(() => {
  setTotal(items.reduce((s, i) => s + i.price, 0));
}, [items]);

// ✅ Calcul direct
const total = items.reduce((s, i) => s + i.price, 0);

Article original sur gogokodo.com

Cannot Read Property of Undefined en JavaScript : 7 Causes et Solutions

ahmed SENEINA — Fri, 10 Apr 2026 08:22:27 +0000

Tu as cette erreur dans la console : TypeError: Cannot read properties of undefined (reading 'xxx'). C'est l'erreur JavaScript la plus fréquente au monde. Elle signifie que tu essaies d'accéder à une propriété sur une valeur qui est undefined. Voici les 7 causes les plus courantes — et comment les corriger.

1. Objet non initialisé

// ❌ user est undefined
let user;
console.log(user.name); // TypeError!

// ✅ Initialiser l'objet
let user = { name: 'Ali', age: 25 };
console.log(user.name); // 'Ali'

// ✅ Ou vérifier avant d'accéder
if (user) {
  console.log(user.name);
}

2. Élément DOM qui n'existe pas

querySelector retourne null si l'élément n'est pas trouvé.

// ❌ L'élément n'existe pas dans le HTML
const btn = document.querySelector('#mon-bouton');
btn.addEventListener('click', handler); // TypeError!

// ✅ Vérifier que l'élément existe
const btn = document.querySelector('#mon-bouton');
if (btn) {
  btn.addEventListener('click', handler);
}

3. Donnée asynchrone pas encore arrivée

// ❌ data est undefined au premier rendu
const [data, setData] = useState();
return <p>{data.name}</p>; // TypeError!

// ✅ Optional chaining
return <p>{data?.name ?? 'Inconnu'}</p>;

4. Faute de frappe dans le nom de propriété

const user = { name: 'Ali', email: 'ali@mail.com' };

// ❌ 'emial' au lieu de 'email'
console.log(user.emial.toUpperCase()); // TypeError!

// ✅ Vérifier les noms
console.log(user.email.toUpperCase()); // 'ALI@MAIL.COM'

5. Oublier le return dans map/find

const users = [{ id: 1, name: 'Ali' }, { id: 2, name: 'Sara' }];

// ❌ find ne trouve rien → undefined
const user = users.find(u => u.id === 99);
console.log(user.name); // TypeError!

// ✅ Vérifier le résultat
const user = users.find(u => u.id === 99);
if (user) {
  console.log(user.name);
}

6. Déstructurer un objet undefined

// ❌ Si getUser() retourne undefined
const { name, email } = getUser(); // TypeError!

// ✅ Valeur par défaut
const { name, email } = getUser() ?? {};

7. Accéder à un objet imbriqué profondément

// ❌ user est null → crash
console.log(response.data.user.address.city); // TypeError!

// ✅ Optional chaining (?.)
console.log(response.data.user?.address?.city); // undefined (pas de crash)

// ✅ Avec valeur par défaut
const city = response.data.user?.address?.city ?? 'Non renseignée';

Comment debugger

Lire le message : Cannot read properties of undefined (reading 'name') → la variable AVANT .name est undefined
console.log juste avant la ligne qui crash
Remonter la chaîne : si a.b.c crash, vérifier a, puis a.b, puis a.b.c

Résumé

Cause	Solution rapide
Variable non initialisée	`let x = {}`
Élément DOM absent	`if (el) { ... }`
Donnée async pas prête	Loading state + optional chaining
Faute de frappe	TypeScript ou linter
find() sans résultat	Vérifier avant d'accéder
Déstructuration unsafe	`?? {}` par défaut
Objet imbriqué	Optional chaining `?.`

Article original sur gogokodo.com

Erreur CORS Bloqué : Comprendre et Résoudre en 5 Minutes

ahmed SENEINA — Fri, 10 Apr 2026 08:21:38 +0000

Tu fais un fetch() vers une API et le navigateur te répond : "Access to fetch has been blocked by CORS policy". Ton code est correct, l'API fonctionne dans Postman, mais le navigateur refuse. Voici pourquoi et comment résoudre ça en 5 minutes.

C'est quoi CORS en 30 secondes ?

CORS (Cross-Origin Resource Sharing) est une sécurité du navigateur. Par défaut, le navigateur interdit à une page web de faire des requêtes vers un domaine différent du sien.

✅ gogokodo.com → gogokodo.com/api    (même origine)
❌ gogokodo.com → api.exemple.com      (origine différente)
❌ localhost:3000 → localhost:8080      (port différent = origine différente)

Une "origine" = protocole + domaine + port. Si un seul diffère, le navigateur bloque.

Important : c'est le navigateur qui bloque, pas le serveur. C'est pourquoi ça marche dans Postman (pas de navigateur) mais pas dans ton code.

Les 3 erreurs CORS les plus fréquentes

1. "No 'Access-Control-Allow-Origin' header"

La plus courante. Le serveur ne renvoie pas le header qui autorise ta requête.

Access to fetch at 'https://api.exemple.com/data' 
from origin 'http://localhost:3000' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Solution serveur (Node/Express) :

const cors = require('cors');
app.use(cors()); // Autorise toutes les origines

// Plus sécurisé — autoriser une origine spécifique
app.use(cors({
  origin: 'https://monsite.com'
}));

2. "CORS preflight request failed"

Pour certaines requêtes (POST avec JSON, PUT, DELETE), le navigateur envoie d'abord une requête OPTIONS ("preflight") pour demander la permission.

// Cette requête déclenche un preflight
fetch('https://api.exemple.com/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Ali' })
});

Solution : le serveur doit répondre aux requêtes OPTIONS.

app.use(cors({
  origin: 'https://monsite.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

3. "Credentials flag is true but..."

Tu envoies des cookies mais le serveur n'est pas configuré pour ça.

// Front
fetch('https://api.exemple.com/data', {
  credentials: 'include'
});

// Serveur — doit autoriser les credentials
app.use(cors({
  origin: 'https://monsite.com', // ⚠️ Pas '*' avec credentials
  credentials: true
}));

Solution côté front (quand tu ne contrôles pas le serveur)

Proxy en développement (Vite)

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://api.exemple.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

// Ton code — plus de CORS !
fetch('/api/data'); // → proxy vers api.exemple.com/data

Proxy en production

Crée une route API sur TON serveur qui fait la requête vers l'API tierce :

app.get('/api/proxy/data', async (req, res) => {
  const response = await fetch('https://api.exemple.com/data');
  const data = await response.json();
  res.json(data);
});

Ce qu'il ne faut PAS faire

❌ Désactiver la sécurité du navigateur (--disable-web-security)
❌ Utiliser un proxy CORS public (risque sécurité)
❌ Mettre Access-Control-Allow-Origin: * sur une API avec authentification

Résumé

Situation	Solution
Tu contrôles le serveur	`cors()` middleware
API tierce en dev	Proxy Vite/Webpack
API tierce en prod	Route proxy sur ton serveur
Requêtes avec cookies	`credentials: true` + origine explicite

Article original publié sur gogokodo.com