google.script.run.function() returning null
In the case of your script, google.script.run.creeID() returns no value. I think that this is the reason for your current issue. From maybe I should use .withSuccessHandler() like said here but I don't know how., how about using withSuccessHandler() as follows?
In this case, please modify ajouter() of your Javascript as follows.
Modified script:
function ajouter() {
  const inputs = document.querySelectorAll('input[type="text"]');
  google.script.run.withSuccessHandler(tab => {
    tab = [tab];
    for (const input of inputs) {
      tab.push(input.value);
    }
    if (tab.join('') == '') {
      alert('Le formulaire est vide !');
      return;
    }
    inputs.forEach(input => input.value = '');
    google.script.run.ajouterLigne(tab);
  }).creeID();
}


In this modification, when a button is clicked, a value of tab is retrieved and the values of tab and the inputted values are appended to the Spreadsheet.

Reference:

withSuccessHandler(function)


On a google sheet, I have a sidebar form allowing user to add infos in another sheet.
I have to give an ID to each line so when a user add one, generate a new id.
example :
the sidebar form has two inputs : criterion number (int) and criterion (text). when a user add these inputs, I want to put them in a sheet with 3 columns : A = ID, B = criterion number and C = criterion.
To generate the ID, I created a creeID() function on the server side (this function checks the last ID in the sheet and generate the next ID, works well when tested) and I have to call it when the user add a  line ("ajouter" button) in order to get a tab with this format [ID, criterion number, criterion] and to push this tab in the sheet with appendRow()
I thought I could use google script run with .withSuccessHandler() like said here and I tried something based on @Tanaike's help and this video.
Everything seems to work fine except that google.script.run.withSuccessHandler(data => {alert("preuve ajoutée")}).creeID() returns null
here is my html file :
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      ...
    </style>
  </head>
  <body>
    <p>Indicateur</p>
    <input type="number" name="indicateur" id="indic" value="" min = "1" max = "32">
    <p>Preuve</p>
    <input type="text" name="preuve" id="preuve">
    <br>
    <input type="button" value="Ajouter" onclick="ajouter()">
    <span class="annuler" onclick="google.script.host.close()">Annuler</span>

    <script>
      function ajouter() {
        const inputs = document.querySelectorAll('#indic, #preuve');
        let tab = [google.script.run.withSuccessHandler(data => {alert("preuve ajoutée")}).creeID()];
        

        // Récupération des valeurs
        for (const input of inputs) {
          tab.push(input.value);
        }

        // Si tous les champs sont vides
        if (tab.join('') == '') {
          alert('Le formulaire est vide !');
          return;
        }

        // Vider les champs
        inputs.forEach(input => input.value = '');

        // Envoi dans la feuille
        google.script.run.ajouterLigne(tab);
      }
  
    </script>
  </body>
</html>

and the javascript code :
function ajouterLigne(tab) {
  const PREUVES = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("PREUVES");
  console.log(tab)
  PREUVES.appendRow(tab);
}

function creeID() {
  const SHEET = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("PREUVES");
  let lastRow = SHEET.getLastRow();
  let lastIdRange = SHEET.getRange(lastRow, 1);
  let lastId = lastIdRange.getValue(); 
  let newId;

  if (lastId == "ID") {
    newId = 1;
  } else {
    newId = lastId + 1;
  };

  return(newId)
}

