Tailwind CSS automatic design tokens not working when run in pnpm

oekazuma commented 2 years ago

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

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

brunobely commented 1 year ago

Did you ever find a workaround for this?

oekazuma commented 1 year ago

I don't know of any workaround except to run it with npm or yarn

oneezy commented 1 year ago

@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}']

oekazuma commented 1 year ago

@oneezy Thank you!

I have tried and concluded that perhaps shamefully-hoist=true is important.

I will need to note in the documentation that shamefully-hoist=true needs to be added to resolve this issue.

oneezy commented 1 year ago

Glad it worked out for you @oekazuma !

benmccann commented 1 year ago

shamefully-hoist is a workaround and it'd be best not to rely on it

histoire-dev / histoire