Appel d'une fonction static située dans une fichier depuis un autre fichier

**BasicZX81** · 12/07/2023, 19h23

Bonjour à tous,
3 semaines de JavaScript/TypeScript et mes premières galères qui commence, j'espère que vous pourrez m'aider :

Voici le message d'erreur juste après avoir ajouter la ligne de code qui appel la fonction dans mon fichier2 (mais je n'y prête pas trop attention, je suis à peu prêt sûre que le problème est dans mon code, vue que je débute mais je pense avoir tous installé correctement au niveau des dépendances).

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
webpack compiled with 222 errors and 21 warnings
No issues found.

Je n'ai pas ce message d'erreur lorsque je rassemble tous dans le même fichier de code et pourtant je n'ai pas oublié les imports qui vont bien.

Code du Fichier1 :

Code :

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

1
2
3
4
5
export class SQLiteService{
  static getUsers() : user[] {
    return []   // PS: Le tableau vide, c'est juste pour l'exemple ;)
  }
}

Code du fichier2 :

Code :

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

1
2
3
function TableUsers() {
const users: user[] = SQLiteService.getUsers();
{

Mon objectif est de créer une class "SQLiteService" qui encapsule toutes les fonctions relatives aux accès à un fichier base de données SQLite qui ne demande pas d'être instanciée.

Votre aide sera vraiment la bienvenue parce que je galère vraiment, merci beaucoup.

**BasicZX81** · 12/07/2023, 20h53

Oufff, j'ai fini par trouver l'origine de mon erreur :
C'est à cause de cette ligne placé juste au dessus de la déclaration de ma class :

Code :

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

const sqlite3 = require('sqlite3').verbose();

CHAMPAGNE : Ma première galère en Javascript est résolu.

J'ai replacé cette ligne à l'intérieur de ma class.

**BasicZX81** · 13/07/2023, 19h28

Fausse joie, ca ne fonctionne pas.
J'ai tout essayé (class avec membres static ou class instancié), c'est pareil.

Savez vous pourquoi je ne peux pas utiliser ma class depuis un autre module que celui de la class elle même ?
Ca coince dés que je commence à taper ces lignes de codes :

Code :

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

dbService1.all('SELECT * FROM users', [])....etc

Donc le message d'erreur de mon post précédent est celui qui apparait dans le terminal vs code et voici celui qui apparait sur la page du navigateur :

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!doctype html>
| <html>
| <head>

Le fichier db-Service1 :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import sqlite3 from 'sqlite3';
 
export default class Database1 {
  static db1: sqlite3.Database;
 
  static {
    this.openDatabase('Database.db');
    this.CreateUsers();
  }
 
  static openDatabase(FileName: string) {
    // Ouvrir la base de données (ou la créer si elle n'existe pas)
    let db1 = new sqlite3.Database(FileName, (err) => {
      if (err) {
        console.error(err.message);
      }
      console.log('Connected to the database.');
    });
  }
 
  static CreateUsers() {
    // Créer une Table Users vide si elle n'existe pas
    Database1.run('CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY, name TEXT)', [])
      .then((lastID) => {
        console.log(`Created table with ID ${lastID}.`);
        Database1.close();
      })
      .catch((err) => {
        console.error(err.message);
        Database1.close();
      });
  }
 
  static run(sql: string, params: any[]) {
     // Execute la requette spécifiée et retourne une Promesse.
    return new Promise<number>((resolve, reject) => {
      Database1.db1.run(sql, params, function (err) {
        //const myParam = this.lastID;
        if (err) {
          console.error(err.message);
          reject(err);
        }
        //resolve(myParam);
        resolve(this.lastID);
      });
    });
  }
 
  static all(sql: string, params: any[]) {
    // Execute la requette spécifiée et retourne une Promesse.
   return new Promise<[]>((resolve, reject) => {
     Database1.db1.all(sql, params, function (err: Error, rows: []) {
       if (err) {
         console.error(err.message);
         reject(err);
       }
       console.log(rows);
       resolve(rows);
     });
   });
 }
 
  static close() {
    Database1.db1.close((err) => {
      if (err) {
        console.error(err.message);
      }
      console.log('Closed the database connection.');
    });
  }
}

Le fichier TableUsers

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import React, { useState, useEffect } from 'react';
import DataTable, { TableColumn } from 'react-data-table-component';
import { tableCustomStyles } from './dataTable1Style';
import DATAS from './datas';
import User from './models/user';
import dbService1 from './services/db-service1';
 
 
function TableUsers() {
  const [records, setRecords] = useState<User[]>([]);
 
  const datas: User[] = DATAS
 
  useEffect(() => {
    // setRecords(datas);
 
    dbService1.all('SELECT * FROM users', [])
    .then((rows) => {
      console.log(`Table retournée ${rows}.`);
      const users: User[] = rows
      setRecords(users);
      dbService1.db1.close();
    })
    .catch((err) => {
      console.error(err.message);
      dbService1.db1.close();
    });
 
 
  }, []);
 
  const columns: TableColumn<any>[] = [
    {
      id: 'name',
      name: 'Nom',
      selector: (row: { name: any; }) => row.name,
      sortable: true,
      style: {
        background: "orange",
      },
    },
    {
      id: 'firstname',
      name: 'Prenom',
      selector: (row: { firstname: any; }) => row.firstname,
      sortable: true,
      style: {
        background: "cyan",
      },
    },
    {
      id: 'email',
      name: 'Email',
      selector: (row: { email: any; }) => row.email,
      sortable: true
    },
    {
      name: 'Note',
      selector: (row: { note: any; }) => row.note,
      sortable: true,
    },
    {
      name: 'Crée le',
      // You can use toLocaleDateString() instead
      selector: (row: { created: any; }) => row.created.toLocaleString(),
      sortable: true,
    },
  ]
 
  const ExpandableComponent2 = ({ data }: { data: any; }) => {
    return (
      < div >
        <p>Additional information for: <strong>{data.name}</strong></p>
        <p>Phone1: {data.phone1}</p>
        <p>Phone2: {data.phone2}</p>
        <p>Note: {data.note}</p>
      </div >
    )
  };
 
  function handleFilter(event: { target: { value: string; }; }) {
    const newData: React.SetStateAction<User[]> = datas.filter(row => {
      return row.name.toLowerCase().includes(event.target.value.toLowerCase())
    })
    setRecords(newData)
  }
 
  return (
    <div className='container mt-5'>
      <div className='text-end'><input type='text' onChange={handleFilter} /></div>
      <DataTable
        title="Utilisateurs"
        customStyles={tableCustomStyles}
        columns={columns}
        data={records}
        selectableRows
        fixedHeader
        pagination
        highlightOnHover
        pointerOnHover
        expandableRows
        expandableRowsComponent={ExpandableComponent2}
      ></DataTable>
    </div>
  );
}
 
export default TableUsers;

Appel d'une fonction static située dans une fichier depuis un autre fichier

JavaScript

Vue hybride

Discussions similaires

Partager

Partager