`package.json#source` field is used for npm packages with pnpm #5784

mischnic · 2021-02-05T09:44:12Z

🐛 bug report

When using pnpm, the resolver tries to use the "source" field of a package from npm.

😯 Current Behavior

🚨 Build failed.
@parcel/core: Failed to resolve 'compute-scroll-into-view' from './index.js'
/index.js:1:35
> 1 | import computeScrollIntoView from "compute-scroll-into-view";
>   |                                   ^^^^^^^^^^^^^^^^^^^^^^^^^^
  2 |
  3 | computeScrollIntoView();
@parcel/resolver-default: Could not load './src/index.ts' from module 'compute-scroll-into-view' found in package.json#source
/node_modules/compute-scroll-into-view/package.json:88:13
  87 |   },
> 88 |   "source": "src/index.ts",
>    |             ^^^^^^^^^^^^^^ './src/index.ts' does not exist, did you mean './dist/index.js'?'
  89 |   "umd:main": "umd/compute-scroll-into-view.min.js"
  90 | }

🤔 Expected Behavior

Ignore package.json#source for npm packages

🔦 Context

#5604 (comment)

💻 Code Sample

import computeScrollIntoView from "compute-scroll-into-view";

computeScrollIntoView();

{
  "dependencies": {
    "@babel/core": "^7.12.13",
    "compute-scroll-into-view": "^1.0.16"
  }
}

Use pnpm install!

🌍 Your Environment

Software	Version(s)
Parcel	`31f431d`

The text was updated successfully, but these errors were encountered:

ngfk · 2021-02-17T13:59:18Z

@mischnic Did you find a workaround for this issue? I'm also trying to load compute-scroll-into-view in a pnpm + parcel2 project.

mischnic · 2021-02-17T14:13:48Z

I don't think there is a workaround, unfortunately.

This is the problematic code

parcel/packages/utils/node-resolver-core/src/NodeResolver.js

Lines 647 to 654 in f28eaf6

 // If the package has a `source` field, check if it is behind a symlink. 

 // If so, we treat the module as source code rather than a pre-compiled module. 

 if (pkg.source) { 

 let realpath = await this.fs.realpath(file); 

 if (realpath === file) { 

 delete pkg.source; 

 } 

 }

Until pnpm, symlinks meant that you're using a monorepo and you're not importing an npm package but another monorepo package. The condition should probably be adjusted to make pnpm work.

ngfk · 2021-02-17T14:50:31Z

Maybe something like this? This is very specific to pnpm though.

if (realpath === file || realpath.includes('node_modules/.pnpm'))
  delete pkg.source;

mischnic · 2021-02-17T15:26:44Z

Or maybe something like "if it's a symlink and the realpath is inside of the project root"

ngfk · 2021-02-17T15:40:02Z

Isn't everything in the project root? Unless you meant the node_modules of the project root, that could work.

if (realpath === file || realpath.startsWith(path.join(this.projectRoot, 'node_modules')))
  delete pkg.source;

mischnic · 2021-02-17T15:48:18Z

Don't the pnpm symlinks point to a global folder like /Users/abc/.pnpm/....?

ngfk · 2021-02-17T16:18:09Z

You're right I had to Google around to check. But pnpm works with a content-addressable store /Users/abc/.pnpm-store, and a virtual store node_modules/.pnpm. After an install it mentions that packages are hard linked from the content-addressable store to the virtual store.

Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /Users/ngfk/.pnpm-store/v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 951, reused 950, downloaded 1, added 954, done

In my case (macOS) the realpath resolved to the location in the virtual store. Not sure if it's the same on a Windows machine. Here's an example of what I get in my project when I simply add a console.log(realpath) to the function.

console: /Users/ngfk/Repositories/bce-module-manager/package/client/package.json
console: /Users/ngfk/Repositories/bce-module-manager/package/client/package.json
console: /Users/ngfk/Repositories/bce-module-manager/package/client/package.json
console: /Users/ngfk/Repositories/bce-module-manager/package/client/package.json
console: /Users/ngfk/Repositories/bce-module-manager/package/client/package.json
console: /Users/ngfk/Repositories/bce-module-manager/package/client/package.json
console: /Users/ngfk/Repositories/bce-module-manager/package/client/package.json
console: /Users/ngfk/Repositories/bce-module-manager/package/client/package.json
console: /Users/ngfk/Repositories/bce-module-manager/package/client/package.json
console: /Users/ngfk/Repositories/bce-module-manager/package/client/package.json
console: /Users/ngfk/Repositories/bce-module-manager/node_modules/.pnpm/[email protected]/node_modules/compute-scroll-into-view/package.json
console: /Users/ngfk/Repositories/bce-module-manager/node_modules/.pnpm/@parcel/[email protected]/node_modules/@parcel/runtime-js/package.json
console: /Users/ngfk/Repositories/bce-module-manager/node_modules/.pnpm/@parcel/[email protected]/node_modules/@parcel/runtime-js/package.json
console: /Users/ngfk/Repositories/bce-module-manager/node_modules/.pnpm/@parcel/[email protected]/node_modules/@parcel/runtime-js/package.json
console: /Users/ngfk/Repositories/bce-module-manager/node_modules/.pnpm/@parcel/[email protected]/node_modules/@parcel/runtime-js/package.json
console: /Users/ngfk/Repositories/bce-module-manager/node_modules/.pnpm/@parcel/[email protected]/node_modules/@parcel/runtime-js/package.json
console: /Users/ngfk/Repositories/bce-module-manager/node_modules/.pnpm/@parcel/[email protected]/node_modules/@parcel/runtime-js/package.json

baronnoraz · 2021-02-17T16:18:52Z

Yes, it's in /Users/abc/.pnpm-store/. However that can be changed using

npm config set store-dir /path/to/.pnpm-store

I think a .modules.yml file can also be stored in the node_modules to redirect you to a different location as well. I've read about that, but never used it.

I actually use Rush to manage my monorepo, and I have it using pnpm. The final destination for the dependencies is .../project-xyz/common/temp/node_modules/.pnpm/node_modules. But I think pnpm actually saves the dependencies in sibling folders corresponding to the repository names to which node_modules is linked.

.../project-xyz/common/temp/node_modules/.pnpm/node_modules (symlinks to the other two folders)
.../project-xyz/common/temp/node_modules/.pnpm/npm.fontawesome.com
.../project-xyz/common/temp/node_modules/.pnpm/registry.npmjs.org

ngfk · 2021-07-21T09:24:10Z

Is there something I can do to help get a fix for this issue? I'm still running into packages that parcel incorrectly tries to resolve using package.json#source.

statianzo · 2021-09-28T20:53:20Z

For this package specifically, adding "compute-scroll-into-view": "compute-scroll-into-view/dist" under "alias" in package.json solved the issue.

guesant · 2021-12-09T14:22:07Z

Maybe something like this? This is very specific to pnpm though.
if (realpath === file || realpath.includes('node_modules/.pnpm'))
  delete pkg.source;

I made a small Proof-Of-Concept ParcelJS Resolver based on your solution + DefaultResolver, it seems to fix my issues by now:

https:/guesant/parcel-resolver-pnpm/blob/c1caa7aea03bead33e43685fb8c8968984d533a1/src/PNPMResolver.ts#L34-L42

Usage:

pnpm i parcel-resolver-pnpm

Partial .parcelrc file:

{
  "resolvers": [
    "parcel-resolver-pnpm",
    "..."
  ]
}

Here is the project repository: https:/guesant/parcel-resolver-pnpm

NPM | unpkg browse

mischnic added 🐛 Bug ✨ Parcel 2 Resolver labels Feb 5, 2021

mischnic mentioned this issue Feb 5, 2021

Package self import broken with source field #5604

Open

guesant mentioned this issue Nov 27, 2021

parcel + pnpm throws error Could not load './src/index.ts' from module 'superstruct' ianstormtaylor/superstruct#967

Closed

This was referenced Mar 20, 2022

Make NodeResolver check realpath before resolving with source entry #7846

Merged

Parcel tries to import source of dependency instead of main or module even if it does not exist #7610

Closed

devongovett closed this as completed in #7846 Mar 20, 2022

devongovett mentioned this issue Feb 3, 2023

New resolver implementation in Rust #8807

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`package.json#source` field is used for npm packages with pnpm #5784

`package.json#source` field is used for npm packages with pnpm #5784

mischnic commented Feb 5, 2021

ngfk commented Feb 17, 2021

mischnic commented Feb 17, 2021

ngfk commented Feb 17, 2021 •

edited

Loading

mischnic commented Feb 17, 2021

ngfk commented Feb 17, 2021 •

edited

Loading

mischnic commented Feb 17, 2021

ngfk commented Feb 17, 2021

baronnoraz commented Feb 17, 2021 •

edited

Loading

ngfk commented Jul 21, 2021

statianzo commented Sep 28, 2021

guesant commented Dec 9, 2021

package.json#source field is used for npm packages with pnpm #5784

package.json#source field is used for npm packages with pnpm #5784

Comments

mischnic commented Feb 5, 2021

🐛 bug report

😯 Current Behavior

🤔 Expected Behavior

🔦 Context

💻 Code Sample

🌍 Your Environment

ngfk commented Feb 17, 2021

mischnic commented Feb 17, 2021

ngfk commented Feb 17, 2021 • edited Loading

mischnic commented Feb 17, 2021

ngfk commented Feb 17, 2021 • edited Loading

mischnic commented Feb 17, 2021

ngfk commented Feb 17, 2021

baronnoraz commented Feb 17, 2021 • edited Loading

ngfk commented Jul 21, 2021

statianzo commented Sep 28, 2021

guesant commented Dec 9, 2021

`package.json#source` field is used for npm packages with pnpm #5784

`package.json#source` field is used for npm packages with pnpm #5784

ngfk commented Feb 17, 2021 •

edited

Loading

ngfk commented Feb 17, 2021 •

edited

Loading

baronnoraz commented Feb 17, 2021 •

edited

Loading