es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Por qué esta función está indefinida en Storybook cuando está funcionando bien en la aplicación web?

¿Por qué esta función está indefinida en Storybook cuando está funcionando bien en la aplicación web?

16 Jul, 2023 Programación

Me he encontrado con un problema extraño que no puedo entender, donde una función parece estar indefinida dentro del contexto de ejecución en Storybook, sin embargo, funciona bien dentro de mi aplicación.

export function createRequest<t>(
    method: Method,
    url: string,
): AxiosCancelPromise<t> {

    console.log('FOOBAR');
    console.log(createAxiosRequestWithCancel);

    ...

    return createAxiosRequestWithCancel(method, url);
}

Cuando estoy ejecutando en Storybook, me encuentro con el siguiente error:

createAxiosRequestWithCancel is not a function
    at createRequest (axios.ts:88)

Esto tendría sentido si estuviera definido en otro lugar y hubiera un problema de importación. Pero createAxiosRequestWithCancel está definido en el mismo archivo…

const createAxiosRequestWithCancel = <t>(
    method: Method,
    url: string,
): AxiosCancelPromise<t> => { ... }

Esto funciona perfectamente bien dentro de mi aplicación:

> axios.ts:84 FOOBAR
axios.ts:85 (method, url, options = {}) => {
  const source = axiosWEBPACKIMPORTEDMODULE2default.a.CancelToken.source();
  const promise = axiosWEBPACKIMPORTEDMODULE2default()(Object(appnode_mo...

Pero en Storybook simplemente dice que es indefinido:

> FOOBAR
axios.ts:85 undefined

¿Alguien puede explicar por qué podría estar sucediendo esta extrañeza, y también cómo podría solucionar, o al menos evitar el problema? Todavía no he llegado a simular las solicitudes, ya que no puedo superar este obstáculo en este momento.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema podría estar relacionado con la forma en que Storybook está construyendo o ejecutando tu código. Es posible que Storybook no esté procesando o compilando correctamente el código TypeScript que define createAxiosRequestWithCancel, lo cual explicaría por qué la función está indefinida durante la ejecución.

    Para solucionar este problema, podrías intentar importar directamente la implementación de createAxiosRequestWithCancel dentro de tu función createRequest, en lugar de depender de la variable local definida en el mismo archivo. Por ejemplo:

    import axios from 'axios';

// Define createAxiosRequestWithCancel function inline
const createAxiosRequestWithCancel = <t>(
  method: Method,
  url: string,
): AxiosCancelPromise<t> => {
  // Código de implementación aquí
};

export function createRequest<t>(
  method: Method,
  url: string,
): AxiosCancelPromise<t> {

  console.log('FOOBAR');
  console.log(createAxiosRequestWithCancel);

  // Llamar directamente a la implementación en línea
  return createAxiosRequestWithCancel(method, url);
}

    Esto asegurará que la implementación de createAxiosRequestWithCancel esté disponible durante la ejecución, sin importar cómo Storybook esté construyendo o procesando tu código.

    Alternativamente, podrías intentar modificar la configuración de Storybook para asegurarte de que TypeScript se compile y procese correctamente al ejecutar tu código. Por ejemplo, podrías agregar un cargador de TypeScript a la configuración de webpack de Storybook, si aún no lo estás utilizando. Esto podría requerir alguna configuración adicional, pero podría permitirte usar la implementación original de createAxiosRequestWithCancel sin ninguna solución alternativa.

Comments are closed.