🐛 BUG: Incorrect URLs for npm packages, causing 404 in watch mode

[hdodov]

Quick checklist

• [X] I am using the latest version of Snowpack and all plugins.

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the bug

Some URLs generated by Snowpack in --watch mode are 404s. Partly, the reason for that is non-relative URLs, addressed in #3597. However, the incorrect URLs point to files that do not exist altogether.

This happens with oblik@1.1.4 on npm. Snowpack generates the following:

build
├── _snowpack
│   └── pkg
│       ├── oblik.core.component.v1.1.4.js
│       └── oblik.core.watcher.v1.1.4.js
└── index.js

However, oblik.core.component.v1.1.4.js contains:

import { d as defaults } from '/_snowpack/pkg/oblik.v1.1.4/common/index-2bf599f2.js';

...which doesn't exist. I can see Snowpack also generates the following:

node_modules
└── snowpack
    ├── build
    │   └── oblik@1.1.4
    │       ├── common
    │       │   └── index-2bf599f2.js
    │       ├── oblik
    │       │   └── core
    │       │       ├── component.js
    │       │       └── watcher.js
    │       └── import-map.json
    └── .meta

It looks like the path in the output folder is referencing a file in the cache:

_snowpack/pkg/oblik.v1.1.4/common/index-2bf599f2.js --- path in the output folder
snowpack/build/oblik@1.1.4/common/index-2bf599f2.js --- actual file in the cache

All paths work fine without the --watch option, though. Linked packages work too. If I npm link oblik, everything works as expected. It seems like an npm/cache issue.

Steps to reproduce

1. git clone https://github.com/hdodov/repro-snowpack-url-issue
2. cd repro-snowpack-url-issue
3. npm i
4. npx snowpack build --watch
5. Output build folder should contain incorrect paths.

Link to minimal reproducible example (optional)

https://github.com/hdodov/repro-snowpack-url-issue

[httpete]

Seeing exactly this - comparing the build with just npm run build, vs npm run build -- --watch, the watch output stamps the version number in resulting in a 404:

import React from "../../../_snowpack/pkg/react.v17.0.2.js";

[mrbrianevans]

I am not sure if this is the same issue, but I am getting a very different file structure when building with --watch compared to regular build. Not sure if I need to open a new issue, or if its address by this existing issue.

For context, I'm using preact and typescript, although I don't think that should affect this.

The difference in output is the pkg directory (I've collapsed other directories below to make it clearer whats different).

When I run snowpack build, this is the structure of the output:

build
  _snowpack
    link
    pkg
      common
        _commonjsHelpers-913f9c4a.js
        preact.module-370f5a61.js
        preact-router.es-f5a825fe.js
      preact
        hooks.js
      ...

But when I run snowpack build --watch, this is the structure of the output:

build
  _snowpack
    link
    pkg
      preact.hooks.v10.5.14.js
      preact.v10.5.14.js
      preact-router.match.v3.2.1.js
      preact-router.v3.2.1.js
      since-time-ago-typescript.v2.1.0.js

The problem comes in watch mode, because the imports are referencing files from the first structure shown above, that don't exist in the watch output structure. Specifically, the file named preact-router.match.v3.2.1.js contains this import:

import { p as preactRouter_es } from '/_snowpack/pkg/preact-router.v3.2.1/common/preact-router.es-f1da841e.js';

but there is no directory named common in the output from --watch, so this file does not exist.

This causes the entire app to fail to render.

Sorry for this being such a long comment, I've tried to include any relevant detail, if I've missed anything please let me know, and if this is a seperate issue, please let me know to create a new one.

Many thanks, Brian

[Megabyteceer]

Same issue.