Storybook does not start after installing react-pdf

[n4rvs3]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

We installed react-pdf in the Next.js project and verified that it works.
We also confirmed that the actual yarn dev worked as expected.
However, when I tried to start Storybook, I confirmed that it would not start with an error.
I ask this question because I don't know if this is a bug or if my configuration is wrong.

Please let us know if you need any additional information and we will present as much as possible.

Error contents displayed

ERROR in ./node_modules/pdfjs-dist/build/pdf.js 1413:9
Module parse failed: Unexpected character '#' (1413:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Environment

• Node.js 18.17.1
• Next.js 13.4.19
• StoryBook 6.4.22
• react-pdf Tried with 6.2.2 and 7.5.0

[wojtekmaj]

Storybook 6.4 uses dated builder internally by default. Update to Storybook v7, try Webpack 5 builder, or better yet, Vite builder.

[n4rvs3]

Thank you very much. We will upgrade the storybook version first. We will report back to you when we make progress.

[wojtekmaj]

@n4rvs3 How it's going? :D

[n4rvs3]

Sorry for the delay in getting back to you.
As you indicated, we have upgraded the storybook to the latest version and it is now working properly. Thank you very much for your support.

[dominicsayers]

For anyone else finding this, it was not an option for us to upgrade from Storybook v6 (yet) but we did get Storybook running with react-pdf by configuring it to use Webpack 5 (as @wojtekmaj also suggested).

This Gist was helpful: https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324?ref=storybookblog.ghost.io#upgrade

For us it was enough to add this our .storybook/main.js:

module.exports = {
  core: {
    builder: "webpack5",
  },
};