[Bug]: Issues with adding storybook to Next.JS 13 (w/ SWC compiler) and yarn 2/3 PNP

[liamlows]

Describe the bug

Howdy!

First I'll go ahead and say that we are using Yarn 3 with PNP and zero installs and we are also using Next.JS 13 with the SWC compiler.

When adding Storybook using the recommended installation instructions under "Getting Started" and running yarn dlx sb init, the installer fails to install all necessary dependencies and (once resolved) on initial startup fails with a CSS loader issue.

I assume that this is not the intended functionality as all I have done is install storybook. Haven't created anything yet.

Here are the errors I saw in order:

1. Error: @storybook/nextjs tried to access @babel/core (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.
2. Error: @storybook/nextjs tried to access webpack (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.
3. Error: Your application tried to access styled-jsx, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

After installing those three as dev dependencies that there were no more package errors, but instead an error with default storybook components included in the initial installation (at least I assume):

ModuleBuildError: Module build failed (from ./.yarn/__virtual__/css-loader-virtual-f77eb24405/0/cache/css-loader-npm-6.8.1-30d84b4cf1-7c1784247b.zip/node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.url should be one of these:
   boolean | object { filter? }
   -> Allows to enables/disables `url()`/`image-set()` functions handling.
   -> Read more at https://github.com/webpack-contrib/css-loader#url
   Details:
    * options.url should be a boolean.
    * options.url should be an object:
      object { filter? }
 - options.import should be one of these:
   boolean | object { filter? }
   -> Allows to enables/disables `@import` at-rules handling.
   -> Read more at https://github.com/webpack-contrib/css-loader#import
   Details:
    * options.import should be a boolean.
    * options.import should be an object:
      object { filter? }
    at validate (/Users/liamlows-iwc/Desktop/Repos-IWC/portal/management-portal-ui/.yarn/cache/schema-utils-npm-3.2.0-a94d779571-e8c590c525.zip/node_modules/schema-utils/dist/validate.js:72:11)
    at Object.getOptions (/Users/liamlows-iwc/Desktop/Repos-IWC/portal/management-portal-ui/.yarn/__virtual__/webpack-virtual-dfcad131f5/0/cache/webpack-npm-5.86.0-7ec9c86422-682b1aa832.zip/node_modules/webpack/lib/NormalModule.js:417:24)
    at Object.loader (/Users/liamlows-iwc/Desktop/Repos-IWC/portal/management-portal-ui/.yarn/__virtual__/css-loader-virtual-f77eb24405/0/cache/css-loader-npm-6.8.1-30d84b4cf1-7c1784247b.zip/node_modules/css-loader/dist/index.js:39:27)
    at processResult (/Users/liamlows-iwc/Desktop/Repos-IWC/portal/management-portal-ui/.yarn/__virtual__/webpack-virtual-dfcad131f5/0/cache/webpack-npm-5.86.0-7ec9c86422-682b1aa832.zip/node_modules/webpack/lib/NormalModule.js:569:23)
    at /Users/liamlows-iwc/Desktop/Repos-IWC/portal/management-portal-ui/.yarn/__virtual__/webpack-virtual-dfcad131f5/0/cache/webpack-npm-5.86.0-7ec9c86422-682b1aa832.zip/node_modules/webpack/lib/NormalModule.js:647:9
    at /Users/liamlows-iwc/Desktop/Repos-IWC/portal/management-portal-ui/.yarn/cache/loader-runner-npm-4.3.0-9ca67df372-a90e00dee9.zip/node_modules/loader-runner/lib/LoaderRunner.js:361:14
    at /Users/liamlows-iwc/Desktop/Repos-IWC/portal/management-portal-ui/.yarn/cache/loader-runner-npm-4.3.0-9ca67df372-a90e00dee9.zip/node_modules/loader-runner/lib/LoaderRunner.js:227:14

To Reproduce

I attempted to try and get Stackbiltz or Code Sandbox set up with Yarn 3 but it kept failing. All you need to do to reproduce is run the following (I'm using node v18.16.0 and yarn v3.6.0).

1. Enable yarn 3 globally on your environment (for creating nextjs app, this step may not be crucial and yarn 1 may work). https://yarnpkg.com/getting-started/install. You should only have to run corepack enable and corepack prepare yarn@stable --activate
2. Set up the starter Next.JS app, yarn create next-app, i answer y to all except src directory and import alias questions.
3. Enter the created Next app directory and run yarn set version berry. After this we need to enable pnp so add nodeLinker: pnp under the yarnPath line in your .yarnrc.yml. Then run a yarn --version to check the version and a yarn install to migrate any/all packages over.
4. Ok now Next.JS is set up and we can add storybook with yarn dlx storybook init
5. Storybook is installed, so now you can run yarn storybook

You will see that the app will startup with several dependency errors and if you add all the dependencies it errors on, it will throw the css-loader error. I assume that this is all not intentional and a bug with storybook and Yarn 3 PNP

System

Environment Info:

  System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 18.16.0 - /usr/local/bin/node
    Yarn: 3.6.0 - /usr/local/bin/yarn
    npm: 9.5.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 114.0.5735.106
    Safari: 16.4
    Firefox Developer: 114.0b9

Additional context

No response

[mohitb35]

This does not seem to be limited to yarn - facing the same issue using npm after upgrading to next13.

I tried resolving it by moving to storybook v7 (previously on v6.5.14), but the issue persisted. Any workaround for now?

[shilman]

@liamlows does this reproduce in other package managers or is it just a Yarn PNP thing?

[liamlows]

@liamlows does this reproduce in other package managers or is it just a Yarn PNP thing?

I have not tested with npm myself but @mohitb35 said in his comment he had the same issue when using Next13 and npm. Next13 ships default with the swc compiler (no babel) which could be related?

The way we have Yarn 3 setup prevents any packages that might try to load other packages on the system that are not installed by the user (peer dependencies). That is what is happening in this case. If babel is a peer dependency then I can install it but it's not listed in the readme anywhere that it is needed.

[zoeyfrisart]

We were facing the same issue, but when writing up a reply sharing our configuration I noticed that we were using css-loader 5.0.1. Updating this to the latest version (6.8.1) resolved this error for us.

On to the next broken part of our config, hope this helps someone else who is facing this same issue

[mohitb35]

We were facing the same issue, but when writing up a reply sharing our configuration I noticed that we were using css-loader 5.0.1. Updating this to the latest version (6.8.1) resolved this error for us.

On to the next broken part of our config, hope this helps someone else who is facing this same issue

@zoeyfrisart This may seem a stupid question, but where did you update the config? Did you just install the latest css-loader version via your package manager? I don't have css-loader as a direct dependency in my project, it only seems to be a sub dependency of @storybook/builder-webpack5 and /@storybook/nextjs and it's already at 6.8.1 there.

[mark-vn]

Manually installing css-loader v6.8.1 did the trick for me. The version I had in @storybook/builder-webpack5 was v6.7.1 (SB v7.0.26).

[mark-vn]

This appears to be fixed for me in Storybook 7.1.0

[JReinhold]

@liamlows @mohitb35 does upgrading to Storybook v7.1 with npx storybook@latest upgrade fix the issue for you?

[github-actions[bot]]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions[bot]]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.

[liamlows]

@JReinhold Sorry for the late response on this, I switched projects for a bit and took vacation so I'm just now getting back into the swing of things.

With regards to using the latest version of storybook and trying again, I am still getting errors on first boot after installing a fresh repo with Yarn 3.6.3, Next 13.4.19, and storybook 7.4.0. I used the same reproduction steps as above except this time I did not use the new app directory feature (part of next 13) as this feature has been causing a great deal of issues with some of our projects, we have opted to delay its adoption.

The first error i get is regarding webpack:

Failed to load preset: "[USER PATH]/storybook-test/.yarn/__virtual__/@storybook-nextjs-virtual-9594461007/0/cache/@storybook-nextjs-npm-7.4.0-c8e1975ea7-38160456f0.zip/node_modules/@storybook/nextjs/preset"
Error: @storybook/nextjs tried to access webpack (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.

After installing webpack yarn add --dev webpack, I am able to start up storybook without issue. Ideally this would be listed as a peer dependency or noted in the instructions?

I also noticed looking back on the install instructions that one should use npx storybook@latest init when adding to an existing project. When I have tried installing storybook I have used yarn dlx storybook init so maybe the dlx command is failing to run properly? I assumed using the dlx command is ideal in this situation since it is kind of a yarn alias to npx but im not 100% on that.

Regardless with the updated storybook I only got the one error regarding webpack, other than that, it seems to work.

[codellyson]

6.8.1

Thank you 🥇

[sohan-dutta]

Manually installing css-loader v6.8.1 did the trick for me. The version I had in @storybook/builder-webpack5 was v6.7.1 (SB v7.0.26).

This worked for me! Thanks