next build command is not ignoring *.stories.tsx files

user_13678259 0
Viewed 1000

I am trying to build nextjs project which has [componentName].stories.tsx side by side with component itself. Running next build fails because of typescript errors in these stories. I want next to ignore storybook files. Is it possible and if yes how do I do it ?

storybook typescript next.js reactjs
2 Answers

Depending on the specifics of your situation, Next.js does provide a solve:

Including non-page files in the pages directory

To colocate test files, generated files, or other files used by components in the pages directory, you can prefix the extensions with something like page.

Open next.config.js and add the pageExtensions config:

   module.exports = {
       pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
   }

Then rename your pages to have a file extension that includes .page (ex. rename MyPage.tsx to MyPage.page.tsx).

Note: Make sure you also rename _document.js, _app.js, _middleware.js, as well as files under pages/api/.

We had a similar issue to yours, but it was only a problem with stories that were in the pages folder. This solution worked for our project.

user_9453700

Please add the stories into ignored pattern array in your lint file, here is an example:

{
    "ignorePatterns": ["temp.js", "**/vendor/*.js"],
    "rules": {
        //...
    }
}
user_117435880
Related