Source mapping issue when debugging in browser

wighawag commented 2 years ago

Describe the bug

When I use @ethersproject/ethers (https://github.com/ethers-io/ethers.js) in my vite project I get source mapping issues when debugging in browser.

In a monorepo setup it cannot even find the files and I get error like

Error while fetching an original source: request failed with status 404
Source URL: <unknown>

in a simple folder setup, the lines are offf

I created 2 repo to reproduce the issue

monorepo : https://github.com/bug-reproduction/vite-ethers-monorepo simple folder: https://github.com/bug-reproduction/vite-ethers

The setup is using vite svelte-ts template

Reproduction

https://github.com/bug-reproduction/vite-ethers-monorepo

Steps to reproduce

pnpm i
pnpm dev
navigate to http://localhost/5173
try to set a breakpoint in node_modules/.pnpm/@ethersproject+bignumber@5.7.0/node_modules/@ethersproject/bignumber/src.ts/bignumber.ts (http://localhost:5173/node_modules/.pnpm/@ethersproject+bignumber@5.7.0/node_modules/@ethersproject/bignumber/src.ts/bignumber.ts)

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 384.61 MB / 15.43 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 16.17.1 - ~/.volta/tools/image/node/16.17.1/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 8.15.0 - ~/.volta/tools/image/node/16.17.1/bin/npm
  Browsers:
    Chromium: 105.0.5195.125
    Firefox: 105.0.2

Used Package Manager

pnpm

Logs

No response

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] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

sapphi-red commented 2 years ago

There's a request to http://localhost:5173/node_modules/.vite/deps/@ethersproject_bignumber.js?v=d8f06203 but there isn't any request to http://localhost:5173/node_modules/.pnpm/@ethersproject+bignumber@5.7.0/node_modules/@ethersproject/bignumber/src.ts/bignumber.ts.

Would you exlpain how you set the breakpoint with screenshot?

wighawag commented 2 years ago

HI @sapphi-red here is a screenshost Screenshot_2022-10-07_16-08-31

felicio commented 1 year ago

In my case, the way I worked around this was by cloning the (two levels nested) dependency's source, building it locally and finally linking it.

Clone dependency:

git clone https://github.com/libp2p/js-libp2p-websockets.git

Install, build and link dependency:

yarn install
yarn run build
yarn link

Link dependency where imported:

yarn link "@libp2p/websockets"

Reinstall/remove cached dependencies in the project vite serves:

rm -rf node_modules/.vite

or

rm -rf node_modules
yarn install

Error (for future lookup): Could not load content for http://localhost:5174/node_modules/<path-to-file>.ts (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

wighawag commented 1 year ago

My workaround is to copy the node_modules folder in the dist folder after vite dev is executed

But of course we want it work out of the box :)

maicol07 commented 1 year ago

Any news for this issue?

rafistrauss commented 1 year ago

+1 to this issue; my workaround was to temporarily go back to npm while debugging

vitejs / vite