Edits to monorepo linked package source requires snowpack cache reload to take effect

[HexaField]

When using Lerna & Yarn workspaces, Snowpack running in a non-package folder requires the cache to be reloaded for any changes in the package source to take effect.

examples
-> example1
--> package.json // snowpack runs here
packages
-> package1
--> package.json
package.json

Running on Ubuntu 18.04.5 LTS
[email protected]
[email protected]
[email protected]

[FredKSchott]

Yup, this is because packages get bundled, so a change to a package needs to get re-bundled. The goal of Snowpack was to isolate all bundling costs to the install step (runs once, on install) since that happens much less than server startup or on change.

Monorepos should be able to take advantage of a faster workflow (since you as the author can guarantee that they are ESM).

It would be interesting to experiment with aliases to linked dependencies. If you alias example1 to the file entrypoint, does that speed up your build / enable instant live editing?

[ljani]

I'm trying to get monorepos working as well. This is my file structure:

my-app/
├─ node_modules/
│  ├─ ...
├─ packages/
│  ├─ common/
│  │  ├─ src/
│  │  │  ├─ index.ts (content: export * from "./MyButton")
│  │  │  ├─ MyButton.tsx
│  │  │  ├─ tsconfig.json (with web settings)
│  │  ├─ package.json
│  ├─ ui/
│  │  ├─ src/
│  │  │  ├─ components/
│  │  │  │  ├─ Header.tsx
│  │  │  ├─ App.tsx
│  │  │  ├─ index.ts
│  │  │  ├─ tsconfig.json (with web settings)
│  │  ├─ package.json
│  │  ├─ snowpack.config.ts (snowpack here!)
├─ package.json (npm@7 monorepo)
├─ package-lock.json
├─ tsconfig.json (with node settings)

Without any aliasing trying to import { MyButton } from "common" from App.tsx, this fails with:

[snowpack] ../common/src/index.ts
   Module "./MyButton" could not be resolved by Snowpack (Is it installed?).

If I alias common to ../common/src it can resolve the error, but it fails with another one:

[snowpack] [404] /_dist_/common/index.js
  ✘ C:\my-app\packages\common\public\_dist_\common\index.js
  ✘ C:\my-app\packages\common\public\_dist_\common\index.mjs
  ✘ C:\my-app\packages\common\public\_dist_\common\index.jsx
  ✘ C:\my-app\packages\common\public\_dist_\common\index.ts
  ✘ C:\my-app\packages\common\public\_dist_\common\index.tsx
  ✘ C:\my-app\packages\common\src\common\index.js
  ✘ C:\my-app\packages\common\src\common\index.mjs
  ✘ C:\my-app\packages\common\src\common\index.jsx
  ✘ C:\my-app\packages\common\src\common\index.ts
  ✘ C:\my-app\packages\common\src\common\index.tsx

If I mount ../common/src/ to /_dist_/common, it finally works. However, if I try import { MyButton } from "common" from Header.tsx, it'll fail with following error:

[snowpack] [404] /_dist_/common/index.js
  ✘ C:\my-app\packages\common\public\_dist_\components\common\index.js
  ✘ C:\my-app\packages\common\public\_dist_\components\common\index.mjs
  ✘ C:\my-app\packages\common\public\_dist_\components\common\index.jsx
  ✘ C:\my-app\packages\common\public\_dist_\components\common\index.ts
  ✘ C:\my-app\packages\common\public\_dist_\components\common\index.tsx
  ✘ C:\my-app\packages\common\src\components\common\index.js
  ✘ C:\my-app\packages\common\src\components\common\index.mjs
  ✘ C:\my-app\packages\common\src\components\common\index.jsx
  ✘ C:\my-app\packages\common\src\components\common\index.ts
  ✘ C:\my-app\packages\common\src\components\common\index.tsx

It'll work if I change the ../common/src/ mount to /_dist_/components/commonadd more mounts, but as expected, I lose the original fix.

Here's one repro case: #938 (comment)

I've seen many comments that monorepos are supposed to be supported, but I fail to see how to make this work. Any pointers?

EDIT: I don't care if I lose HMR at this point (hope it'll be improved), but if I only got this to work at first at least.

[ljani]

Apparently the alias must be:

{
    "alias": {
        "mylib": "../mylib/src/index",
    }
}

[Floffah]

the closest i got it to working was aliasing the package name to the src directory of it and then mounting the root directory of the package into /media/<package name>

[HexaField]

Thanks for the reply and explanation.

If you alias example1 to the file entrypoint, does that speed up your build / enable instant live editing?

Does not unfortunately. When doing this, it seems that it then tries to bundle all dev dependencies of packages (some of which don't run in the browser, since I'm developing for both node and browser) since node_modules is now hoisted. Unless I am misunderstanding what you mean?

[FredKSchott]

#2707 includes a ton of updates for monorepos, including this support. Would love your feedback if you can check out that PR (npm install snowpack@next)

[crobinson42]

Snowpack@3 is working pretty well with monorepo using lerna and HMR is working also to make for a fast dev experience.

[longlostbro]

@crobinson42 Can you provide a simple working example repo? I'd love to get my mono repo up and running with snowpack.

[longlostbro]

nvm I found this in your repos
https://github.com/crobinson42/lerna-snowpack
I'll give it a try.

[longlostbro]

This is great, but would be nice if the sub modules were built by snowpack as well.