Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

181
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda