404 /@npm/@npm/[package-name] - npm registry lookup failed

[rejhgadellaa]

Describe the bug

When running wmr in dev/watch mode I often get the following error when I try to view the page in my browser:

404 /@npm/@npm/[package-name] - npm registry lookup failed for "@npm/[package-name]": Package doesn't exist.

The error is not very consistent, sometimes the page loads but at least ~50% of the time I see the error and I have to exit, delete the .cache folder and restart wmr and hope it works.

It's not very consistent with which package it can't find, either. Most of the time it's one package, sometimes multiple. So far, I think I've only seen the following packages not being found:

• object-assign
• react-is

The packages in question are present in the node_modules folder. I checked the .cache/@npm folder, and if the error occurs, the packages are missing there, so it seems wmr (silently) fails to cache the package?

This issue makes working with wmr pretty impossible for me :(

Note: Not entirely sure if deleting the .cache folder is required but from my observations so far, restarting wmr without deleting the .cache folder just causes the same error with the same package every time I reload the page. When I do delete the cache folder, it either works or I get another 404 but not always the same package.

To Reproduce

Steps to reproduce the behavior:

1. Cd into a project, run npm start
2. Open a browser and navigate to localhost:8080
3. Observe wmr for 404 errors

Expected behavior

I expect no 404 errors

Bug occurs with:

• wmr or wmr start (development)
• wmr build (production)
• wmr serve

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome
• Node Version: 16.13.1
• WMR Version: ^3.7.2

Additional context

#882 covers the same issue but has been closed by the reporter without a clear description of the cause and/or how to fix it. Another user reported he's (also) seeing this issue with the filter-obj package.

This problem occurs whether I run wmr via PowerShell or a Ubuntu terminal (WSL 1.x). Note: I do run the WSL terminal in the same (windows mounted) folder, so /mnt/c/path/to/project.

[rejhgadellaa]

For completeness, here's a full output when I run npm start and try to load it in the browser:

(In this case both react-is and object-assign can't be located)

> project@0.0.0 start
> rimraf .cache && wmr

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

  👩‍🚀 WMR dev server running at:

  Local:   http://localhost:8080
  Network: (disabled, see --host)


404 /@npm/@npm/react-is - npm registry lookup failed for "@npm/react-is": Package doesn't exist.

  at TT (/mnt/c/path/to/project/node_modules/wmr/wmr.cjs:2:1194284)
  at  (/mnt/c/path/to/project/node_modules/wmr/wmr.cjs:2:1239595)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async KR (/mnt/c/path/to/project/node_modules/wmr/wmr.cjs:2:1239205)
  at async HR (/mnt/c/path/to/project/node_modules/wmr/wmr.cjs:2:1239084)
  at async Array.<anonymous> (/mnt/c/path/to/project/node_modules/wmr/wmr.cjs:2:2934077)

404 /@npm/@npm/object-assign - npm registry lookup failed for "@npm/object-assign": Package doesn't exist.

  at TT (/mnt/c/path/to/project/node_modules/wmr/wmr.cjs:2:1194284)
  at  (/mnt/c/path/to/project/node_modules/wmr/wmr.cjs:2:1239595)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async KR (/mnt/c/path/to/project/node_modules/wmr/wmr.cjs:2:1239205)
  at async HR (/mnt/c/path/to/project/node_modules/wmr/wmr.cjs:2:1239084)
  at async Array.<anonymous> (/mnt/c/path/to/project/node_modules/wmr/wmr.cjs:2:2934077)

Another run with DEBUG=true.

This time object-assign is found, but react-is isn't.

I noticed the the line middleware:npm "object-assign" near the bottom - so that would mean it handles object-assign which is great :) But I don't see any entries mentioning the missing react-is package...?

DEBUG=true npm start

> project@0.0.0 start
> rimraf .cache && wmr

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
  wmr:config  {
  wmr:config    _: [],
  wmr:config    compress: true,
  wmr:config    optimize: true,
  wmr:config    cwd: '/mnt/c/path/to/project',
  wmr:config    root: '/mnt/c/path/to/project/public',
  wmr:config    plugins: [],
  wmr:config    output: [],
  wmr:config    middleware: [],
  wmr:config    features: { preact: true },
  wmr:config    alias: { react: 'preact/compat', 'react-dom': 'preact/compat' },
  wmr:config    customRoutes: [],
  wmr:config    prod: false,
  wmr:config    mode: 'start',
  wmr:config    env: {},
  wmr:config    out: '/mnt/c/path/to/project/.cache',
  wmr:config    overlayDir: '/mnt/c/path/to/project/.cache',
  wmr:config    public: 'public',
  wmr:config    publicPath: '/',
  wmr:config    host: 'localhost',
  wmr:config    port: 8080
  wmr:config  }
  wmr:watcher  watching:
  wmr:watcher  - /mnt/c/path/to/project/public
  wmr:watcher  - /mnt/c/path/to/project/package.json

  👩‍🚀 WMR dev server running at:

  Local:   http://localhost:8080
  Network: (disabled, see --host)

  wmr:watcher   watching for config changes
  wmr:middleware  / -> ./ file: /mnt/c/path/to/project/public
  wmr:middleware  /index.js -> ./index.js file: /mnt/c/path/to/project/public/index.js
  wmr:resolve  ./index.js -> /mnt/c/path/to/project/public/index.js [resolve-extensions-plugin]
  wmr:load  /mnt/c/path/to/project/public/index.js [__fallback__]
  wmr:transform  ./index.js [preact-prefresh]
  wmr:transform  ./index.js [import-assertion]
  wmr:transform  ./index.js [process-global]
  wmr:transform  ./index.js [htm-plugin]
  wmr:transform  ./index.js [wmr]
  wmr:transform  ./index.js [default-loaders]
  wmr:transform.js  ./style.less -> ./style.less?module
  wmr:resolve  ./pages/_404.js -> /mnt/c/path/to/project/public/pages/_404.js [resolve-extensions-plugin]
  wmr:load  preact/debug [__fallback__]
  wmr:transform.js  preact/debug -> /@npm/preact/debug
  wmr:load  htm/preact [__fallback__]
  wmr:transform.js  htm/preact -> /@npm/htm/preact
  wmr:load  rgui-preact-core/core [__fallback__]
  wmr:transform.js  rgui-preact-core/core -> /@npm/rgui-preact-core/core
  wmr:load  preact-iso [__fallback__]
  wmr:transform.js  preact-iso -> /@npm/preact-iso
  wmr:load  rgui-preact-core [__fallback__]
  wmr:transform.js  rgui-preact-core -> /@npm/rgui-preact-core
  wmr:load  preact [__fallback__]
  wmr:transform.js  preact -> /@npm/preact
  wmr:load  @prefresh/core [__fallback__]
  wmr:transform.js  @prefresh/core -> /@npm/@prefresh/core
  wmr:resolve  ./pages/Home -> /mnt/c/path/to/project/public/pages/Home/index.js [resolve-extensions-plugin]
  wmr:transform.js  ./pages/Home -> ./pages/Home/index.js
  wmr:cache  write index.js
  wmr:middleware  <-- ./index.js as application/javascript;charset=utf-8
  wmr:middleware  /_wmr.js -> ./_wmr.js file: /mnt/c/path/to/project/public/_wmr.js
  wmr:middleware  <-- ./_wmr.js as application/javascript
  middleware:npm  "htm/preact"
  npm:plugin  htm/preact -> npm/htm@3.1.0/preact/index.module.js
  middleware:npm  "preact/debug"
  npm:plugin  preact/debug -> npm/preact@10.6.4/debug/dist/debug.module.js
  middleware:npm  "preact"
  npm:plugin  preact -> npm/preact@10.6.4/dist/preact.module.js
  middleware:npm  "preact-iso"
  middleware:npm  "rgui-preact-core"
  middleware:npm  "rgui-preact-core/core"
  npm:plugin  preact-iso -> npm/preact-iso@2.3.0/index.js
  npm:plugin  ./router.js -> npm/preact-iso@2.3.0/router.js
  npm:plugin  ./lazy.js -> npm/preact-iso@2.3.0/lazy.js
  npm:plugin  ./hydrate.js -> npm/preact-iso@2.3.0/hydrate.js
  npm:plugin  ./prerender.js -> npm/preact-iso@2.3.0/prerender.js
  wmr:middleware  /pages/Home/index.js -> ./pages/Home/index.js file: /mnt/c/path/to/project/public/pages/Home/index.js
  wmr:middleware  /pages/_404.js -> ./pages/_404.js file: /mnt/c/path/to/project/public/pages/_404.js
  wmr:middleware  /style.less -> ./style.less file: /mnt/c/path/to/project/public/style.less
  wmr:load  ./style.less [__fallback__]
  npm:plugin  rgui-preact-core -> npm/rgui-preact-core@0.0.1/dist/rgui-preact-core.cjs.js
  wmr:resolve  ./pages/Home/index.js -> /mnt/c/path/to/project/public/pages/Home/index.js [resolve-extensions-plugin]
  wmr:load  /mnt/c/path/to/project/public/pages/Home/index.js [__fallback__]
  wmr:resolve  ./pages/_404.js -> /mnt/c/path/to/project/public/pages/_404.js [resolve-extensions-plugin]
  wmr:load  /mnt/c/path/to/project/public/pages/_404.js [__fallback__]
  npm:plugin  rgui-preact-core/core -> npm/rgui-preact-core@0.0.1/dist/esm/core/_index.js
  wmr:transform  ./style.less [less]
  wmr:cache  write style.less?asset
  wmr:transform  ./style.less [wmr-styles]
  wmr:cache  write style.less
  wmr:middleware  <-- ./style.less as application/javascript;charset=utf-8
  wmr:transform  ./pages/Home/index.js [preact-prefresh]
  wmr:transform  ./pages/Home/index.js [import-assertion]
  wmr:transform  ./pages/Home/index.js [process-global]
  wmr:transform  ./pages/Home/index.js [htm-plugin]
  wmr:transform  ./pages/Home/index.js [wmr]
  wmr:transform  ./pages/Home/index.js [default-loaders]
  wmr:transform  ./pages/_404.js [preact-prefresh]
  wmr:transform  ./pages/_404.js [import-assertion]
  wmr:transform  ./pages/_404.js [process-global]
  wmr:transform  ./pages/_404.js [htm-plugin]
  wmr:transform  ./pages/_404.js [wmr]
  wmr:transform  ./pages/_404.js [default-loaders]
  npm:plugin  ./PageLifecycle.js -> npm/rgui-preact-core@0.0.1/dist/esm/core/PageLifecycle.js
  middleware:npm  "htm"
  npm:plugin  htm -> npm/htm@3.1.0/dist/htm.module.js
  middleware:npm  "@prefresh/core"
  middleware:npm  "preact/devtools"
  wmr:load  prop-types [__fallback__]
  wmr:transform.js  prop-types -> /@npm/prop-types
  wmr:load  htm/preact [__fallback__]
  wmr:transform.js  htm/preact -> /@npm/htm/preact
  wmr:load  @prefresh/core [__fallback__]
  wmr:transform.js  @prefresh/core -> /@npm/@prefresh/core
  wmr:load  rgui-preact-core/components [__fallback__]
  wmr:transform.js  rgui-preact-core/components -> /@npm/rgui-preact-core/components
  wmr:load  @prefresh/core [__fallback__]
  wmr:transform.js  @prefresh/core -> /@npm/@prefresh/core
  wmr:load  htm/preact [__fallback__]
  wmr:transform.js  htm/preact -> /@npm/htm/preact
  wmr:cache  write pages/_404.js
  wmr:middleware  <-- ./pages/_404.js as application/javascript;charset=utf-8
  middleware:npm  "preact/hooks"
  npm:plugin  preact/devtools -> npm/preact@10.6.4/devtools/dist/devtools.module.js
  wmr:load  preact [__fallback__]
  wmr:transform.js  preact -> /@npm/preact
  wmr:cache  write pages/Home/index.js
  wmr:middleware  <-- ./pages/Home/index.js as application/javascript;charset=utf-8
  npm:plugin  preact/hooks -> npm/preact@10.6.4/hooks/dist/hooks.module.js
  middleware:npm  "rgui-preact-core/components"
  npm:plugin  @prefresh/core -> npm/@prefresh/core@1.3.2/src/index.js
  npm:plugin  rgui-preact-core/components -> npm/rgui-preact-core@0.0.1/dist/esm/components/_index.js
  middleware:npm  "prop-types"
  npm:plugin  ./Content.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/Content.js
  npm:plugin  ./Icon.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/Icon.js
  npm:plugin  ./Layout.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/Layout.js
  npm:plugin  ./Ripple.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/Ripple.js
  npm:plugin  ./Toolbar.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/Toolbar.js
  npm:plugin  ./style-inject.es-d4c17b33.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/style-inject.es-d4c17b33.js
  npm:plugin  ./PreactHelpers-db4eb46d.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/PreactHelpers-db4eb46d.js
  npm:plugin  ./index-6b312cf6.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/index-6b312cf6.js
  npm:plugin  ./Misc-98280791.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/Misc-98280791.js
  npm:plugin  ./runtime/catchError -> npm/@prefresh/core@1.3.2/src/runtime/catchError.js
  npm:plugin  ./runtime/unmount -> npm/@prefresh/core@1.3.2/src/runtime/unmount.js
  npm:plugin  ./runtime/vnode -> npm/@prefresh/core@1.3.2/src/runtime/vnode.js
  npm:plugin  ./runtime/debounceRendering -> npm/@prefresh/core@1.3.2/src/runtime/debounceRendering.js
  npm:plugin  ./constants -> npm/@prefresh/core@1.3.2/src/constants.js
  npm:plugin  ./runtime/vnodesForComponent -> npm/@prefresh/core@1.3.2/src/runtime/vnodesForComponent.js
  npm:plugin  ./runtime/signaturesForType -> npm/@prefresh/core@1.3.2/src/runtime/signaturesForType.js
  npm:plugin  ./computeKey -> npm/@prefresh/core@1.3.2/src/computeKey.js
  npm:plugin  ./runtime/signaturesForType -> npm/@prefresh/core@1.3.2/src/runtime/signaturesForType.js
  npm:plugin  ./style-inject.es-d4c17b33.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/style-inject.es-d4c17b33.js
  npm:plugin  ./style-inject.es-d4c17b33.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/style-inject.es-d4c17b33.js
  npm:plugin  ./index-6b312cf6.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/index-6b312cf6.js
  npm:plugin  ./PreactHelpers-db4eb46d.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/PreactHelpers-db4eb46d.js
  npm:plugin  ./style-inject.es-d4c17b33.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/style-inject.es-d4c17b33.js
  npm:plugin  ./index-6b312cf6.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/index-6b312cf6.js
  npm:plugin  ./Misc-98280791.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/Misc-98280791.js
  npm:plugin  ./PreactHelpers-db4eb46d.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/PreactHelpers-db4eb46d.js
  npm:plugin  ./style-inject.es-d4c17b33.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/style-inject.es-d4c17b33.js
  npm:plugin  ./PreactHelpers-db4eb46d.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/PreactHelpers-db4eb46d.js
  npm:plugin  ./style-inject.es-d4c17b33.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/style-inject.es-d4c17b33.js
  npm:plugin  ./index-6b312cf6.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/index-6b312cf6.js
  npm:plugin  ./Misc-98280791.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/Misc-98280791.js
  npm:plugin  ./PreactHelpers-db4eb46d.js -> npm/rgui-preact-core@0.0.1/dist/esm/components/PreactHelpers-db4eb46d.js
  npm:plugin  ../constants -> npm/@prefresh/core@1.3.2/src/constants.js
  npm:plugin  ../constants -> npm/@prefresh/core@1.3.2/src/constants.js
  npm:plugin  ./vnodesForComponent -> npm/@prefresh/core@1.3.2/src/runtime/vnodesForComponent.js
  npm:plugin  ./vnodesForComponent -> npm/@prefresh/core@1.3.2/src/runtime/vnodesForComponent.js
  npm:plugin  ../constants -> npm/@prefresh/core@1.3.2/src/constants.js
  npm:plugin  prop-types -> npm/prop-types@15.8.1/index.js
  npm:plugin  ./factoryWithTypeCheckers -> npm/prop-types@15.8.1/factoryWithTypeCheckers.js
  npm:plugin  ./factoryWithTypeCheckers -> npm/prop-types@15.8.1/factoryWithTypeCheckers.js
  npm:plugin  prop-types@15.8.1/factoryWithTypeCheckers.js -> npm/prop-types@15.8.1/factoryWithTypeCheckers.js
  npm:plugin  ./lib/ReactPropTypesSecret -> npm/prop-types@15.8.1/lib/ReactPropTypesSecret.js
  npm:plugin  ./lib/has -> npm/prop-types@15.8.1/lib/has.js
  npm:plugin  ./lib/ReactPropTypesSecret -> npm/prop-types@15.8.1/lib/ReactPropTypesSecret.js
  npm:plugin  prop-types@15.8.1/lib/ReactPropTypesSecret.js -> npm/prop-types@15.8.1/lib/ReactPropTypesSecret.js
  npm:plugin  ./checkPropTypes -> npm/prop-types@15.8.1/checkPropTypes.js
  npm:plugin  ./checkPropTypes -> npm/prop-types@15.8.1/checkPropTypes.js
  npm:plugin  prop-types@15.8.1/checkPropTypes.js -> npm/prop-types@15.8.1/checkPropTypes.js
  npm:plugin  ./lib/has -> npm/prop-types@15.8.1/lib/has.js
  npm:plugin  prop-types@15.8.1/lib/has.js -> npm/prop-types@15.8.1/lib/has.js
  npm:plugin  ./lib/ReactPropTypesSecret -> npm/prop-types@15.8.1/lib/ReactPropTypesSecret.js
  npm:plugin  ./lib/has -> npm/prop-types@15.8.1/lib/has.js
  npm:plugin  ./lib/has -> npm/prop-types@15.8.1/lib/has.js
  npm:plugin  ./lib/ReactPropTypesSecret -> npm/prop-types@15.8.1/lib/ReactPropTypesSecret.js
  middleware:npm  "object-assign"
  npm:plugin  object-assign -> npm/object-assign@4.1.1/index.js

404 /@npm/@npm/react-is - npm registry lookup failed for "@npm/react-is": Package doesn't exist.

  at TT (/mnt/c/path/to/project/node_modules/wmr/wmr.cjs:2:1194284)
  at  (/mnt/c/path/to/project/node_modules/wmr/wmr.cjs:2:1239595)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async KR (/mnt/c/path/to/project/node_modules/wmr/wmr.cjs:2:1239205)
  at async HR (/mnt/c/path/to/project/node_modules/wmr/wmr.cjs:2:1239084)
  at async Array.<anonymous> (/mnt/c/path/to/project/node_modules/wmr/wmr.cjs:2:2934077)

[Aloento]

maybe same with #919