Tailwind CSS automatic design tokens not working when run in pnpm

Describe the bug

Tailwind CSS auto design tokens work fine when run in npm or yarn, but not in pnpm.

Error Details

$ pnpm story:dev

> repro-crach-use-pnpm-histoire@0.0.1 story:dev /workspace/repro-crach-use-pnpm-histoire
> histoire dev

  ➜  Local:   http://127.0.0.1:6006/
  ➜  Network: use --host to expose
Collect stories start all
Error while collecting story /workspace/repro-crach-use-pnpm-histoire/node_modules/.histoire/plugins/builtin_tailwind-tokens/Tailwind.story.js:
Error: [vite-node] Failed to load @histoire/controls
    at ViteNodeRunner.directRequest (file:///workspace/repro-crach-use-pnpm-histoire/node_modules/.pnpm/vite-node@0.22.1/node_modules/vite-node/dist/client.mjs:165:13)
    at async ViteNodeRunner.cachedRequest (file:///workspace/repro-crach-use-pnpm-histoire/node_modules/.pnpm/vite-node@0.22.1/node_modules/vite-node/dist/client.mjs:113:12)
    at async request (file:///workspace/repro-crach-use-pnpm-histoire/node_modules/.pnpm/vite-node@0.22.1/node_modules/vite-node/dist/client.mjs:136:16)
    at async histoire/dist/node/vendors/controls.js:1:238
    at async ViteNodeRunner.directRequest (file:///workspace/repro-crach-use-pnpm-histoire/node_modules/.pnpm/vite-node@0.22.1/node_modules/vite-node/dist/client.mjs:217:5)
    at async ViteNodeRunner.cachedRequest (file:///workspace/repro-crach-use-pnpm-histoire/node_modules/.pnpm/vite-node@0.22.1/node_modules/vite-node/dist/client.mjs:113:12)
    at async request (file:///workspace/repro-crach-use-pnpm-histoire/node_modules/.pnpm/vite-node@0.22.1/node_modules/vite-node/dist/client.mjs:136:16)
    at async /workspace/repro-crach-use-pnpm-histoire/node_modules/.histoire/plugins/builtin_tailwind-tokens/Tailwind.story.js:7:31
    at async ViteNodeRunner.directRequest (file:///workspace/repro-crach-use-pnpm-histoire/node_modules/.pnpm/vite-node@0.22.1/node_modules/vite-node/dist/client.mjs:217:5)
    at async ViteNodeRunner.cachedRequest (file:///workspace/repro-crach-use-pnpm-histoire/node_modules/.pnpm/vite-node@0.22.1/node_modules/vite-node/dist/client.mjs:113:12)
Collect stories end 1335 ms

Message displayed on first startup after removing node_modules

$ pnpm story:dev

> repro-crach-use-pnpm-histoire@0.0.1 story:dev /workspace/repro-crach-use-pnpm-histoire
> histoire dev


 (x2)
Forced re-optimization of dependencies
Failed to resolve dependency: flexsearch, present in 'optimizeDeps.include'
Failed to resolve dependency: shiki, present in 'optimizeDeps.include'
Failed to resolve dependency: vscode-oniguruma, present in 'optimizeDeps.include'
Failed to resolve dependency: vscode-textmate, present in 'optimizeDeps.include'
Using 8 threads for story collection
Collect stories start all
  ➜  Local:   http://127.0.0.1:6006/
  ➜  Network: use --host to expose
src/lib/Counter.story.svelte 1959ms (setup:25ms, execute:24ms, run:1909ms)
Collect stories end 2529ms

Reproduction

https://github.com/oekazuma/repro-crach-use-pnpm-histoire

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
    Memory: 92.91 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zshx
  Binaries:
    Node: 16.15.0 - ~/Library/pnpm/node
    Yarn: 1.22.18 - ~/Library/pnpm/yarn
    npm: 8.5.5 - ~/Library/pnpm/npm
  Browsers:
    Chrome: 105.0.5195.102
    Firefox: 103.0.1
    Safari: 15.6.1
  npmPackages:
    @histoire/plugin-svelte: ^0.10.7 => 0.10.7 
    histoire: ^0.10.7 => 0.10.7 
    vite: ^3.1.0 => 3.1.0

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[oneezy]

@brunobely @oekazuma I have it working with pnpm.

Check it out on Stackblitz: https://stackblitz.com/edit/sveltejs-kit-template-default-fd1ka1?file=tailwind.config.cjs

if it doesn’t automatically show you’ll need to click the refresh button on the top left

⬇️ ⬇️ ⬇️

Couple things I had to do to get this working:

• add this to .npmrc file (this appeared to get rid of some of the bugs in the console)

engine-strict = true
shamefully-hoist = true
auto-install-peers = true

• updated vite to 3.2.4 and added other dependencies to package.json
• use Svelte Add so Tailwind and Sveltekit will play nice together npx svelte-add@latest tailwindcss
• created a tailwind.css file and imported it in using histoire.setup.js file
• removed histoire.config.js and handled everything in vite.config.js (not sure if this was needed or not)
• referenced setupFile in vite.config.js
• referenced the content for tailwind to target inside the tailwind.config

// tailwind.config.cjs
content: ['./src/**/*.{html,js,svelte,md,svx,ts}']

[oneezy]

Glad it worked out for you @oekazuma !