Discussion :

[valery.petit]

Bonjour,

J'ai repris le projet suivant glané sur le web comme point de départ pour une idée d'appli web.

https://codesandbox.io/s/5x53pnrn3x?...tionHeight=675

Il est possible de faire fonctionner le projet en ligne et j'ai réussi une fois à le copier sur mon pc pour le simuler mais depuis plus rien....
En repartant de zéro j'ai systématiquement une page blanche...

rencontrez vous le même problème?

Merci d'avance

J'ai React.js 20, le problème pourrait venir de là, mais je début et ne vois absolument pas comment régler le problème de version dans le code...

Merci d'avance

[mathieu]

sur mon ordinateur, j'ai un environnement de test avec react 18 et j'ai réussi à avoir un affichage en bricolant un peu le code fourni.

regardez les messages d'erreurs dans la console, ils vous aideront à voir ce qui bloque à la compilation.

[valery.petit]

la console est vide chez moi

pourriez vous me transmette vos modification pour que je puisse regarder?

J’étais en 18 lors des premier essais.

pour ma part, j'ai modifier les extention de js en jsx.

modifié index.jsx de cette façon :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
import React, { Component } from "react";
import { createRoot } from "react-dom/client";
 
.....
 
}
const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);

ajouter un fichier "react-swipy.d.ts contenant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

declare module 'react-swipy';

ajouter un appel pour l'execution du script dans "index.htlm"

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 <div class="body">
      <div id="root"></div>
      <script type="module" src="/Vite React Swipe Card/src/index.jsx"></script>
    </div>

mis à jour "package.json
supprimé "react-scripts": "1.1.4", pour faire un projet "vite"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
  "name": "vite-react-swipe-card",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-spring": "9.7.4",
    "react-swipy": "0.0.6"
  },
  "devDependencies": {
    "@eslint/js": "^9.8.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^9.8.0",
    "eslint-plugin-react": "^7.35.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "vite": "^5.4.0"
  }
}

Encore Merci

[mathieu]

la console est vide chez moi

vous parlez bien de la console où vous lancez la commande "npm run dev" ?

[valery.petit]

oui...
et console de débogage, il ne s'y passe pas grand choses.

je suis très débutant en codage. j'ai démarré la semaine dernière

[mathieu]

oui dans la console débugage, il se passe des choses pas très claires donc avec react et les autres frameworks de ce genre, il vaut mieux regarder la console de la ligne de commande.

et donc dans cette console, il y a un bien message qui indique l'url pour voir la page ?