Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

173
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!