[Bug]: TypeError: Cannot read properties of undefined (reading 'startsWith')

[Star-tears]

Describe the bug

nextjs+eslint+prettier： npx storybook@latest init error when I use a custom prettier.
The following error is reported：
TypeError: Cannot read properties of undefined (reading 'startsWith') at printAngular (C:\Users\13704\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\prettier\index.js:24775:22) at printPathNoParens (C:\Users\13704\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\prettier\index.js:29687:25) at Object.genericPrint [as print] (C:\Users\13704\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\prettier\index.js:29629:23) at callPluginPrintFunction (C:\Users\13704\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\prettier\index.js:8601:26) at mainPrintInternal (C:\Users\13704\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\prettier\index.js:8550:22) at mainPrint (C:\Users\13704\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\prettier\index.js:8537:18) at printAstToDoc (C:\Users\13704\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\prettier\index.js:8529:18) at coreFormat (C:\Users\13704\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\prettier\index.js:8837:20) at formatWithCursor2 (C:\Users\13704\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\prettier\index.js:9021:18) at C:\Users\13704\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\prettier\index.js:38183:12

To Reproduce

No response

System

Environment Info:

  System:
    OS: Windows 10 10.0.22631
    CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.6.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 114.0.5735.199
    Edge: Spartan (44.22621.2048.0), Chromium (114.0.1823.79)
  npmPackages:
    @storybook/addon-essentials: ^7.0.27 => 7.0.27
    @storybook/addon-interactions: ^7.0.27 => 7.0.27
    @storybook/addon-links: ^7.0.27 => 7.0.27
    @storybook/blocks: ^7.0.27 => 7.0.27
    @storybook/nextjs: ^7.0.27 => 7.0.27
    @storybook/react: ^7.0.27 => 7.0.27
    @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2

Additional context

No response

[Seefer]

I managed to solve my problem with this same error which I posted about on Storybook Discord at:

https://discord.com/channels/486522875931656193/1130448886016770098

I had Prettier version 3.0.0 in my packages.json and have discovered that if I revert that to version 2.8.8 and then run pnpm dlx sb init, to relaunch the initialization step, it completes without error and I can then run pnpm storybook to successfully launch the Storybook server.

I had other issues with prettier plugins recently and I'm informed Prettier version 3.0.0 introduces breaking changes for plugins. I was using prettier-plugin-tailwindcss before the Tailwind Labs peeps updated it to 0.4.0, which is where I heard of these breaking changes. Maybe related? Also curious if @Star-tears custom prettier was based on version 3.0.0?

[Star-tears]

Indeed, I used prettier v3.0.0 and added prettier-plugin-tailwindcss. now I removed prettier-plugin-tailwindcss and everything is back to normal, thanks!

[valentinpalkovic]

@Star-tears Do you still have any open questions or can we close this issue?

[Seefer]

I'd say so as it seems to be specifically an issue with having prettier-plugin-tailwindcss class sorter package installed and manually added to a prettier config file (.prettierrc in my case) with "plugins": ["prettier-plugin-tailwindcss"]. Without that, Storybook installs and initializes just fine with prettier 3.0.0. I would not be surprised if this turns out to be due to Pnpm's quirky package store trickery and, as I'm told, it's 'stricter' handling of packages

I'm guessing Tailwind Lab's fix to get it working possibly adds prettier2.8.8 as a dependency as this appears alongside prettier3.0.0 in pnpm's hard-linked .pnpm virtual package store in node_modules <----- Wrong guess. Deleted prettier2.8.8 from .pnpm directory and ran pnpm dlx sb init and it reappeared. so it's a Storybook dep.

[Codedwells]

Also having a similar error with version 3.0.0 when I run prettier using its cli

[Codedwells]

Also having a similar error with version 3.0.0 when I run prettier using its cli

version 2.8.8 works fine

[Thenlie]

Same issue for me. As per @Seefer it was due to prettier-plugin-tailwindcss. Removing that package allowed the initializer to run without error.

[Seefer]

Same issue for me. As per @Seefer it was due to prettier-plugin-tailwindcss. Removing that package allowed the initializer to run without error.

What package manager do you use? I'm seeing this running Pnpm and wondering if package manager behavior complications could be a contributing factor. I'm somewhat of a web dev noob so this is me spitballing.

[Thenlie]

What package manager do you use? I'm seeing this running Pnpm and wondering if package manager behavior complications could be a contributing factor. I'm somewhat of a web dev noob so this is me spitballing.

I am using NPM so the issue is not specific to pnpm. While I can't comment on yarn, it seems to me like the tailwind package just needs an update.