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?