Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

171
Vistas
How to prevent Storybook addon to try yo import, in compile time, all homonymous files included with dynamic path with require()?

I have a problem in a Storybook addon I created.

CURRENT SCENARIO

The issue occurs in the Storybook addon environment when a random function is imported (let's call it getSomeData) from a file (let's call it lib.ts) that contains other functions who require .md files with dynamic paths (for example a README.md file)

lib.ts

const getSomeData = () => {
  ...
  return ...
}

export const getPackageReadme = (packageName: string) => {
  try {
    return require(`@namespace/${packageName}/README.md`)
  } catch {
    return null
  }
}

These dynamic requires that import these .md files as README.md are executed in compile time by Storybook engine.

The weird fact is that in the log of Storybook it seems that this function is executed and read all .md files with the exact name README.md living everywhere in the current repository, also inside node_modules, giving an exact amount of errors as the amount of all found README.md files in the current repository. And consequence, Storybook build fails.

While this error occurs in compiling time of Storybook, at runtime in the browser any issue occurs and everything work as expected.

CURRENT SOLUTION

The current solution -that smells of a hook- to fix the issue was to split this lib.ts in different files (for examples lib-md.ts and lib-data.ts). In this way, the Storybook addon includes just lib-data.ts and in this way any README.md file is required in compile time, so build succeeds.

lib-data.ts

const getSomeData = () => {
  ...
  return ...
}

lib-md.ts

export const getPackageReadme = (packageName: string) => {
  try {
    return require(`@namespace/${packageName}/README.md`)
  } catch {
    return null
  }
}

Is there a solution to prevent this error?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda