Error en integración con NextJS

[ataschz]

Describe the bug
Al querer utilizar el paquete en una server-action o un router-handler, obtengo el siguiente error:

To Reproduce
Steps to reproduce the behavior:

1. Crear una aplicación NextJS limpia
2. Instlaar paquete
3. Crear un route-handler:

import { Afip } from "afip.ts";
import fs from "fs";

const cert = fs.readFileSync("./certs/test.crt", { encoding: "utf8" });
const key = fs.readFileSync("./certs/test.key", { encoding: "utf8" });

export async function GET() {
  const afip: Afip = new Afip({
    cert,
    key,
    cuit: XXXXXXXXXXX,
  });
  const taxId = XXXXXXXXXXX;

  const taxpayerDetails =
    await afip.registerInscriptionProofService.getTaxpayerDetails(taxId);

  return Response.json({ taxpayerDetails });
}

5. Utilizar Postman para llamar al servicio

⨯ [Error: ENOENT: no such file or directory, open '/Users/ataschz/refip/.next/server/vendor-chunks/wsdl/ws_sr_inscription_proof.wsdl'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/Users/ataschz/refip/.next/server/vendor-chunks/wsdl/ws_sr_inscription_proof.wsdl'
}
 GET /api/register-inscription-proof-2 500 in 1212ms

Screenshots

Desktop (please complete the following information):

• OS: macOs
• Browser Arc/Chrome

Additional context
No hay nada en especial en el bundle, es una aplicacion limpia. Quiza este relacionado con la forma de buiildear la libreria.

[Squiro]

Parece ser un problema relacionado con NextJS y Webpack. Cuando se realiza el bundling, Webpack incluye el código necesario tanto de la ruta que definiste como el de afip.ts, pero en este proceso no se incluyen los archivos WSDL necesarios para la ejecución de los servicios.

Deberías ver cómo modificar la configuración de Webpack para que esos archivos sean incluidos en el build.

O en todo caso, se podría modificar la forma en que afip.ts utiliza/carga esos archivos.

[ataschz]

Si, estuve trasteando un poco con esto pero ando de viaje. La proxima semana quiza pueda dedicarle un poco mas de tiempo!

Gracias por el punto de vista.

[Squiro]

Para el siguiente release debería estar solucionado, ya estamos barajando una solución.

[ralcorta]

En un principio el package fue pensado para que sea usado desde un backend, pero para que este pueda ser usado desde aplicaciones frontend, debemos hacer algunos cambios.
Una de las opciones que tenemos en mente es ver de remplazar los wsdl a archivos que exporten el contenido como strings, evitando asi que sean excluidos al momento del bundle.

[ataschz]

Estuve probando un rato, y con este next.config.js funciona correctamente:

import fs from 'fs';
import path from 'path';

/** @type {import('next').NextConfig} */
const nextConfig = {
    webpack: (config, { isServer }) => {
        if (isServer) {
            const wsdlSourcePath = path.resolve('./node_modules/afip.ts/lib/soap/wsdl');
            const wsdlDestinationPath = path.resolve('.next/server/vendor-chunks/wsdl');

            const copyFiles = (src, dest) => {
                if (fs.existsSync(src)) {
                    fs.mkdirSync(dest, { recursive: true });
                    fs.readdirSync(src).forEach(file => {
                        const srcFile = path.join(src, file);
                        const destFile = path.join(dest, file);
                        if (fs.statSync(srcFile).isFile()) {
                            fs.copyFileSync(srcFile, destFile);
                        }
                    });
                } else {
                    console.error(`El directorio fuente ${src} no existe.`);
                }
            };

            copyFiles(wsdlSourcePath, wsdlDestinationPath);
        }

        return config;
    },
};

export default nextConfig;

Quiza podriamos agregaro en la documentación en un apartado especifico para NextJS?

[nekusu]

Next.js ofrece una solución para estos casos con la propiedad serverComponentsExternalPackages en el archivo next.config.js, se puede optar por excluir dependencias específicas del bundle:

/** @type {import('next').NextConfig} */
module.exports = {
  experimental: {
    serverComponentsExternalPackages: ['afip.ts'],
  },
};

https://nextjs.org/docs/app/api-reference/next-config-js/serverComponentsExternalPackages

Puedo confirmar que esta solución funciona al usar la librería en Server Actions.