jins5 commented 2 hours ago

Issue : Erreur avec `createShipment` dans "@frontboi/mondial-relay" dans une API `route.js`

Description du problème :

Lors de l'utilisation de la fonction createShipment du package @frontboi/mondial-relay dans une route d'API Next.js (route.js), j'obtiens les erreurs suivantes :

Lorsque j'importe avec les accolades ({}) :

import { createShipment } from "@frontboi/mondial-relay";

Erreur :

TypeError: (0 , _frontboi_mondial_relay__WEBPACK_IMPORTED_MODULE_0__.createShipment) is not a function

Lorsque j'importe sans accolades (default import) :

import createShipment from "@frontboi/mondial-relay";

Erreur :

TypeError: _frontboi_mondial_relay__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function

Ce que j'ai essayé :

J'ai utilisé les mêmes données que l'exemple fourni dans la documentation officielle et via la commande npm run demo:create_shipment. Cela fonctionne correctement via cette commande, je reçois bien l'étiquette.
J'ai vérifié si l'importation était correcte en testant à la fois :
- L'importation nommée { createShipment }.
- L'importation par défaut createShipment.
J'ai confirmé que le code tourne côté serveur dans une route API (route.js) de Next.js.

Hypothèses :

Problème d'importation :
- Il est possible que le module ne soit pas correctement configuré pour les environnements Next.js (ou Webpack), ce qui pourrait expliquer pourquoi l'exemple CLI fonctionne mais pas l'importation dans mon API.

Questions :

Y a-t-il une configuration spéciale à appliquer pour utiliser ce package dans une API route.js de Next.js ?
Le module est-il compatible avec les API routes de Next.js ou nécessite-t-il des ajustements spécifiques ?
Devrais-je modifier ma configuration Webpack/Next.js pour forcer la compatibilité avec ce package ?

Reproduction :

Voici le code minimal pour reproduire l'erreur :

import { createShipment } from "@frontboi/mondial-relay"; // Ou sans accolades : import createShipment from "@frontboi/mondial-relay"
import { NextResponse } from "next/server";

export async function POST(request) {
  try {
    const shipmentResponse = await createShipment({
      context: {
        CustomerId: "BDTEST",
        Password: "mypassword",
        Login: "BDTEST@business-api.mondialrelay.com",
      },
      shipment: {
        OrderNo: "120120",
        CustomerNo: "120120",
        ParcelCount: "1",
        DeliveryInstruction: "Handle with care.",
        CollectionMode: { Mode: "CCC" },
        DeliveryMode: { Mode: "24R", Location: "FR-000484" },
        Sender: {
          Firstname: "John",
          Lastname: "Sender",
          Streetname: "Rue de l'Expéditeur",
          HouseNo: "1",
          CountryCode: "FR",
          PostCode: "75000",
          City: "Paris",
          MobileNo: "+33600000000",
          Email: "sender@example.com",
        },
        Recipient: {
          Title: "Mme",
          Firstname: "Maria",
          Lastname: "Receiver",
          Streetname: "Quai Frédéric Mistral",
          HouseNo: "2",
          CountryCode: "FR",
          PostCode: "69003",
          City: "Lyon",
          MobileNo: "+33646781454",
          Email: "receiver@example.com",
        },
        Parcels: {
          Parcel: {
            Content: "Des bigoudis de tailles variables",
            Weight: { Unit: "gr", Value: 2000 },
          },
        },
      },
    });

    return NextResponse.json({ shipmentResponse }, { status: 201 });
  } catch (error) {
    console.error("Erreur :", error);
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

Logs :

Avec importation nommée ({}) :

TypeError: (0 , _frontboi_mondial_relay__WEBPACK_IMPORTED_MODULE_0__.createShipment) is not a function

Avec importation par défaut :

TypeError: _frontboi_mondial_relay__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function

Contexte :

Next.js : 15
@frontboi/mondial-relay : latest

Objectif :

Je cherche à comprendre pourquoi l'importation de createShipment ne fonctionne pas dans ce contexte alors qu'elle fonctionne bien avec la commande CLI (npm run demo:create_shipment) dans le repo test fourni. Et s'il y a des ajustements nécessaires pour que cela fonctionne dans une API route de Next.js.

frontBOI commented 2 hours ago

Bonsoir @jins5 , merci encore pour ce ticket complet. Je pense que le problème vient du fait que je n'ai pas rendu ma librairie compatible exports ESM et CJS, et donc problèmes lors d'un import dans un contexte différent de celui que j'ai en local. Selon moi, c'est un problème à régler de mon côté et pas du vôtre. Je devrais pouvoir corriger cela rapidement.

jins5 commented 2 hours ago

Bonsoir @frontBOI ,

Merci beaucoup pour votre réponse rapide et votre explication détaillée. Cela me rassure de savoir que le problème semble venir de la compatibilité ESM et CJS de la librairie. J'avais effectivement des doutes sur un potentiel souci de configuration, mais vos précisions me permettent de mieux comprendre la situation.

J'aurais aimé pouvoir me pencher sur ce problème moi-même et proposer une merge request, mais malheureusement, je n'ai jamais développé de package npm. Cela risque de me prendre pas mal de temps pour apprendre et maîtriser les bonnes pratiques, alors je préfère laisser cela à vos mains expertes.

Encore merci pour votre réactivité, et je reste disponible pour tester la correction dès que vous aurez eu le temps de la mettre en place.

Bonne soirée ! 😊

frontBOI commented 1 hour ago

@jins5 v1.2.22 déployée sur npm, pouvez-vous tenter à nouveau ?

jins5 commented 1 hour ago

@jins5 v1.2.22 déployée sur npm, pouvez-vous tenter à nouveau ?

Je teste ça tout de suite ! Merci beaucoup de votre réactivité.

jins5 commented 1 hour ago

@frontBOI Je rencontre une nouvelle erreur avec la version @frontboi/mondial-relay: ^1.2.22. Voici les détails :

Failed to compile  
./node_modules/@frontboi/mondial-relay/dist/esm/server/api_v1/lib/utils.js:3:1  

Module not found: Can't resolve 'soap'  
  1 | import statusCodes from './statusCodes';  
  2 | import crypto from 'crypto';  
> 3 | import * as soap from 'soap';  
    | ^  
  4 | const apiUrl = 'https://api.mondialrelay.com/WebService.asmx?WSDL';  
  5 | /**  
  6 |  * Executes an API call to the Mondial Relay APIv1.  

https://nextjs.org/docs/messages/module-not-found  

### Import trace for requested module:
- `./node_modules/@frontboi/mondial-relay/dist/esm/server/api_v1/index.js`  
- `./node_modules/@frontboi/mondial-relay/dist/esm/server/index.js`  
- `./node_modules/@frontboi/mondial-relay/dist/esm/index.js`

frontBOI commented 1 hour ago

@jins5 je viens de déployer la version 1.2.23, elle est censée corriger ce problème.

jins5 commented 1 hour ago

Magnifique ! Un grand merci pour le push ! Tout fonctionne parfaitement. Je salue votre réactivité et la solution trouvée en un clin d'œil. Un vrai travail de pro ! 👏

frontBOI commented 1 hour ago

@jins5 super, ravi de l'entendre. Merci c'est bien normal ! Si vous rencontrez d'autres problèmes n'hésitez pas. Bonne soirée 😄

jins5 commented 37 minutes ago

@frontBOI Nouvelles erreur je pense à cause du hot fix de la création d'étiquette...

Elle se passe lors de :

import { ParcelShopSelector } from "@frontboi/mondial-relay";
import { getDeliveryPrice } from "@frontboi/mondial-relay";

Voici l'erreur :

⨯ ./node_modules/soap/lib/security/ClientSSLSecurity.js:4:1
Module not found: Can't resolve 'fs'
  2 | Object.defineProperty(exports, "__esModule", { value: true });
  3 | exports.ClientSSLSecurity = void 0;
> 4 | const fs = require("fs");
    | ^
  5 | const https = require("https");
  6 | const _ = require("lodash");
  7 | /**

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/soap/lib/security/index.js
./node_modules/soap/lib/soap.js
./node_modules/soap/index.js
./node_modules/@frontboi/mondial-relay/dist/esm/server/api_v1/lib/utils.js
./node_modules/@frontboi/mondial-relay/dist/esm/server/api_v1/index.js
./node_modules/@frontboi/mondial-relay/dist/esm/server/index.js
./node_modules/@frontboi/mondial-relay/dist/esm/index.js

Le fameux cercle vicieux des erreurs ... (désolé :/)

frontBOI commented 17 minutes ago

@jins5 alors ça c'est curieux. Pas sûr que ce soit un problème de ma lib pour le coup, mais pourriez-vous me fournir un cas de test que je reproduise en local ? Je vais voir ce que je peux faire.

Est-ce qu'on serait pas dans cette configuration ?

jins5 commented 6 minutes ago

@frontBOI Non car lorsque je commente les parties du package aucune erreurs...

Voici un spécimen que j'ai utiliser pour tester, venant de votre doc :

"use client";
import { useState } from 'react'

// import { ParcelShopSelector } from '@frontboi/mondial-relay'

export default function MondialRelayMapSelector() {
  const [parcelShop, setParcelShop] = useState(null)

  return (
    <div>
      <h1> Choose a Mondial Relay parcel shop: </h1>
    {/* <ParcelShopSelector
      weight={3000} // (in grams) optional, filters parcel shops by package weight
      nbResults={7} // optional (default: 7)
      deliveryMode="24R" // optional (default: "24R)
      brandIdAPI="BDTEST" // optional (default: "BDTEST", replace with your Brand Id API value for production usage)
      defaultCountry="FR" // optional (default: "FR")
      defaultPostcode="59000" // optional (default: "59000")
      allowedCountries="FR,BG" // optional (default: "FR")
      onParcelShopSelected={setParcelShop} // setter function when a parcel shop is clicked
    /> */}
    </div>
  )
}

Voici la stack trace :

 ⨯ ./node_modules/soap/lib/security/ClientSSLSecurity.js:4:1
Module not found: Can't resolve 'fs'
  2 | Object.defineProperty(exports, "__esModule", { value: true });
  3 | exports.ClientSSLSecurity = void 0;
> 4 | const fs = require("fs");
    | ^
  5 | const https = require("https");
  6 | const _ = require("lodash");
  7 | /**

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/soap/lib/security/index.js
./node_modules/soap/lib/soap.js
./node_modules/soap/index.js
./node_modules/@frontboi/mondial-relay/dist/esm/server/api_v1/lib/utils.js
./node_modules/@frontboi/mondial-relay/dist/esm/server/api_v1/index.js
./node_modules/@frontboi/mondial-relay/dist/esm/server/index.js
./node_modules/@frontboi/mondial-relay/dist/esm/index.js
./src/app/[locale]/paiement/page.js

jins5 commented 5 minutes ago

@frontBOI Je rencontre une nouvelle erreur avec la version @frontboi/mondial-relay: ^1.2.22. Voici les détails :

Failed to compile  
./node_modules/@frontboi/mondial-relay/dist/esm/server/api_v1/lib/utils.js:3:1  

Module not found: Can't resolve 'soap'  
  1 | import statusCodes from './statusCodes';  
  2 | import crypto from 'crypto';  
> 3 | import * as soap from 'soap';  
    | ^  
  4 | const apiUrl = 'https://api.mondialrelay.com/WebService.asmx?WSDL';  
  5 | /**  
  6 |  * Executes an API call to the Mondial Relay APIv1.  

https://nextjs.org/docs/messages/module-not-found  

### Import trace for requested module:
- `./node_modules/@frontboi/mondial-relay/dist/esm/server/api_v1/index.js`  
- `./node_modules/@frontboi/mondial-relay/dist/esm/server/index.js`  
- `./node_modules/@frontboi/mondial-relay/dist/esm/index.js`

Elle ressemble beaucoup à l'erreur que vous avez résolu auparavant

frontBOI / mondial-relay

Erreur lors de la création de l'étiquette #3

Issue : Erreur avec `createShipment` dans "@frontboi/mondial-relay" dans une API `route.js`

Description du problème :

Ce que j'ai essayé :

Hypothèses :

Questions :

Reproduction :

Logs :

Contexte :

Objectif :

frontBOI / mondial-relay

Erreur lors de la création de l'étiquette #3

Issue : Erreur avec createShipment dans "@frontboi/mondial-relay" dans une API route.js

Description du problème :

Ce que j'ai essayé :

Hypothèses :

Questions :

Reproduction :

Logs :

Contexte :

Objectif :

Issue : Erreur avec `createShipment` dans "@frontboi/mondial-relay" dans une API `route.js`