With pnpm, module resolution fails during cache key generation in edge case

1natsu172 commented 1 week ago

Report

I was tried to use happy-css-modules on my project that using pnpm@9. But I face to error the below message.

> hcm 'src/**/*.module.{css,scss,less}'

Error: happy-css-modules,less,postcss,sass is not installed: Cannot find module 'less/package.json' from 'file:///Users/1natsu/ghq/github.com/1natsu172/vite-pnpm-module-resolve-repro/node_modules/.pnpm/@file-cache+npm@2.0.0/node_modules/@file-cache/npm/mjs'
    at Function.resolveSync [as sync] (/Users/1natsu/ghq/github.com/1natsu172/vite-pnpm-module-resolve-repro/node_modules/.pnpm/resolve@1.22.8/node_modules/resolve/lib/sync.js:111:15)
    at createNpmPackageKey (file:///Users/1natsu/ghq/github.com/1natsu172/vite-pnpm-module-resolve-repro/node_modules/.pnpm/@file-cache+npm@2.0.0/node_modules/@file-cache/npm/mjs/index.mjs:7:54)
    at file:///Users/1natsu/ghq/github.com/1natsu172/vite-pnpm-module-resolve-repro/node_modules/.pnpm/happy-css-modules@3.1.1_less@4.2.0_postcss@8.4.38_sass@1.77.6/node_modules/happy-css-modules/dist/runner.js:34:19
    at createCacheKey (file:///Users/1natsu/ghq/github.com/1natsu172/vite-pnpm-module-resolve-repro/node_modules/.pnpm/@file-cache+core@2.0.0/node_modules/@file-cache/core/mjs/createCacheKey.mjs:8:26)
    at createCache (file:///Users/1natsu/ghq/github.com/1natsu172/vite-pnpm-module-resolve-repro/node_modules/.pnpm/@file-cache+core@2.0.0/node_modules/@file-cache/core/mjs/index.mjs:64:41)
    at async run (file:///Users/1natsu/ghq/github.com/1natsu172/vite-pnpm-module-resolve-repro/node_modules/.pnpm/happy-css-modules@3.1.1_less@4.2.0_postcss@8.4.38_sass@1.77.6/node_modules/happy-css-modules/dist/runner.js:30:19) {
  code: 'MODULE_NOT_FOUND'

From the error message, it seemed to be around cache implementation, so I set cache option flag to disable and it has been found to work fine.

reproduction

~~https://stackblitz.com/edit/vitejs-vite-az9mty?file=package.json~~

~~This sandbox is created from vite template(https://ja.vitejs.dev/guide/). And switch to pnpm from default npm(deleted package-lock.json and first created node_modules then re-run pnpm install).~~

~~You can run command on the stackblitz terminal.~~

pnpm run hcm
- error occurred
pnpm run hcm --cache=false
- works fine

By the way

I have confirmed once that npm exec hcm 'src/**/*.module.{css,scss,less}' works without any problem in npm project environment.

I'm not sure if the cause is in @fine-cache or in the implement around import.meta.resolve. I really wanted to run a test of the this repo, but since this repository was npm-workspaces, I decided to report this once and for a moment.

mizdra commented 1 week ago

Do you forget to install postcss? happy-css-modules requires postcss.

https://github.com/mizdra/happy-css-modules/blob/22e47125b278520687c01ac7977924674230bdf3/packages/happy-css-modules/package.json#L54

1natsu172 commented 1 week ago

@mizdra Yes. Strictly...the vite supports postcss/sass/less and has these deps, so it is present in node_modules.

The following are the results during the process of debugging. I'm not completely sure, but perhaps may be stepping on some chaos around pnpm symlink and hoist and node resolve.

In the case of pnpm

I did pnpm add -D postcss instead of as project devDeps instead of implicit deps. But hcm seems to be judging implicit deps (less and sass) as "installedPeerDeps" as a result of import.meta.resolve. As a result, it's trying to create cache keys for [postcss, less, sass] with createNpmPackageKey.

Apparently @file-cache/npm uses browserify's resolve package, where it fails to resolve less and sass, which are implicit deps.

In the case of npm

npm does not hoist and create symlink in like .pnpm. It to be able to resolve path in node_modules/postcss even if it's implicit deps. So npm works fine with vite+hcm without explicit postcss devDeps.

1natsu172 commented 1 week ago

My debugging intuition to tell me that this may not be hcm's liability issue… 🤔 I will report back if there is any progress in debugging.

1natsu172 commented 1 week ago

@mizdra Sorry, the first repro was incomplete. Please disregard the first one. I've prepared a new correct repro. The basics are outlined in the README.

https://github.com/1natsu172/vite-pnpm-module-resolve-repro

This issue is quite an edge case , but it can be understood as a problem where "hcm stops working If less or sass is installed unintentionally"

Through debugging, even if postcss is included in devDeps, if less and sass are present in node_modules as side effects, everything gets consolidated in one place. Thus hcm resolved less and sass as "installed" using import.meta.resolve.

However, since the core of @file-cache/npm is located in a different directory, it seems unable to find less and sass (this includes a bit of guess).

mizdra / happy-css-modules