Module not found '@ledgerhq/devices/hid-framing' / https://registry.yarnpkg.com/@ledgerhq%2fdevices/hid-framing returned a 405 about ledger-live HOT 19 CLOSED

We've already found the issue. It is here:

Should be:
import hidFraming from "@ledgerhq/devices/lib/hid-framing";

from ledger-live.

Just want to point out that the official Connecting an app tutorial uses parcel and is also broken now.

Adding parcel-style alias to the package.json seems to help:

{ 
  ...
  "alias": {
    "@ledgerhq/devices": "@ledgerhq/devices/lib-es"
  }
}

from ledger-live.

You can use NormalModuleReplacementPlugin if you stuck with webpack 4.

plugins: [
	new webpack.NormalModuleReplacementPlugin(
		/@ledgerhq\/devices\/hid-framing/,
		'@ledgerhq/devices/lib/hid-framing'
	)
],

from ledger-live.

Thank you @elbywan I will take this into account and modify the doc as soon as possible.

from ledger-live.

FWIW @ledgerhq/hw-transport and @ledgerhq/hw-transport-webhid work when pinned to the previous exact version 6.27.1 (published 2022-04-13), and this error is encountered with the latest release (6.27.2, published ~ a week ago, 2022-07-28).

from ledger-live.

@jordansexton Tried that but it did not work

from ledger-live.

You'll know you did it right if you check your yarn.lock file and see only 6.27.1: https://github.com/solana-labs/wallet-adapter/blob/5437f957740e8651467b9eb74bf1d7ef77817f8f/yarn.lock#L1906-L1938

from ledger-live.

So to sum it up.

Following this PR #364 @ledgerhq/device is now transpiled to commonjs and esm (in the /lib and /lib-es folders respectively).

Subpath exports have thus been added to use the same path (without /lib and /lib-es) in imports and allow consuming bundlers to declare which flavour of the dependency they want.

✅ For users of node.js@14+, webpack@5, esbuild, rollup, vite.js or any build tool that support subpath exports everything should be working fine.

⚠️ For users of other bundlers (parcel for instance - or webpack@4) you can either:

• upgrade your bundler
• configure your bundler to map @ledgerhq/devices to @ledgerhq/devices/lib-es (or @ledgerhq/devices/lib, depending if you want the commonjs or esm flavour).
• use another bundler

With webpack@4 adding the following line to the config should make it work:

resolve: {
  alias: {
    "@ledgerhq/devices": "@ledgerhq/devices/lib-es",
  },
},

With parcel, adding an alias to the package.json:

"alias": {
  "@ledgerhq/devices": "@ledgerhq/devices/lib-es"
}

Bottom line, I do not see anything wrong in the library from what has been posted so far.

Users stuck with webpack@4 or using other bundlers can add a single configuration line to map to the right path, and other users should upgrade anyway (there are only a few breaking changes between v4 and v5 - released 2 years ago).

If I missed something and you think the problem comes from anything other than what I posted feel free to comment the issue.

Otherwise please follow the instructions above.

The following demonstrate that the lib works fine with a compatible bundler.

• npx create-react-app hw-transport-webhid-test
• cd hw-transport-webhid-test
• npm i @ledgerhq/hw-transport-webhid buffer
• Add the following code:

// src/App.js
import TransportWebHID from "@ledgerhq/hw-transport-webhid";
console.log(TransportWebHID);

// src/polyfill.js
import { Buffer } from "buffer";
window.Buffer = Buffer;

// src/index.js
import "./polyfill";

• npm start

Builds and prints:

from ledger-live.

Sounds like this should have been a breaking change, not just a minor patch.

Yes, this is an oversight. @ledgerhq/devices did get a major bump but not the consuming hw-transport packages.

from ledger-live.

Just a little correction in step 2:

2. config-overrides.js in root

module.exports = function override(webpackConfig) {
     
 webpackConfig.resolve.alias = {
    ...webpackConfig.resolve.alias,
    "@ledgerhq/devices/hid-framing": "@ledgerhq/devices/lib/hid-framing",
  };

 return webpackConfig;
}

from ledger-live.

This also broke the metro bundler for react-native which does not support subpath exports (yet).

If anyone gets that problem, you need to update babel.config.js to:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['.'],
        alias: {
          '@ledgerhq/devices/hid-framing': '@ledgerhq/devices/lib/hid-framing',
        },
      },
    ],
  ],
};

Remember then to reset the cache before bulding it again: npm start -- --reset-cache

Related: facebook/metro#670

from ledger-live.

This also broke the metro bundler for react-native which does not support subpath exports (yet).

If anyone gets that problem, you need to update babel.config.js to:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['.'],
        alias: {
          '@ledgerhq/devices/hid-framing': '@ledgerhq/devices/lib/hid-framing',
        },
      },
    ],
  ],
};

Remember then to reset the cache before bulding it again: npm start -- --reset-cache

Related: facebook/metro#670

As of react native 0.72 (expo 49) metro now supports package exports
The (beta) feature needs to be enabled in your metro config

from ledger-live.

@dima-brook
yarn add @ledgerhq/devices should be the way to install that library, not yarn add @ledgerhq/devices/hid-framing

from ledger-live.

@elbywan could you shine a light on this when you are back? 🙏
I think the import works inside our stack (changed by 235de21) but causing issue outside.

from ledger-live.

Hey @dima-brook @gre 👋,

We've already found the issue.

I don't think this is a problem, @ledgerhq/devices uses package exports which should map @ledgerhq/devices/hid-framing to @ledgerhq/devices/lib/hid-framing or @ledgerhq/devices/lib-es/hid-framing depending on the bundler configuration.

I tried to reproduce by creating a new app using create-react-app (since you are using react-app-rewired) and I managed to yarn build without issues.

I tried with adding either:

yarn add @ledgerhq/hw-transport-webhid

import TransportWebHID from "@ledgerhq/hw-transport-webhid";

or:

yarn add @ledgerhq/devices

import hidFraming from "@ledgerhq/devices/hid-framing";

My guess is that your stack relies on webpack 4 (or another random bundler) which does not support subpath exports. Upgrading to webpack 5 should make it work.

In any case I don't see any issues with the library itself.

from ledger-live.

@alihalabyah pinning versions is tricky because the dependencies declare their transitive deps with ^.

Check out how we do this with exact versions and yarn resolutions here: anza-xyz/wallet-adapter@88f3576

This forces the resolved transitive deps to be pinned as well.

from ledger-live.

Quick workaround for create-react-app(react-scripts v4) :

1. package.json

"dependencies": {
    "react-app-rewired": "^2.2.1",
  },

 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
  },
  

2. config-overrides.js in root

module.exports = function override(webpackConfig) {
     
 webpackConfig.resolve.alias = {
    ...webpackConfig.resolve.alias,
    "@ledgerhq/devices/hid-framing": "@ledgerhq/devices/lib/hid-framing",
  };


}

from ledger-live.

Sounds like this should have been a breaking change, not just a minor patch.

from ledger-live.

@nebolsin Thanks, good catch 🙇 ! The tutorial needs to be updated.

@cfranceschi-ledger Sorry for the wild ping but I think you worked on this topic based on the file history. (cc: @fcipollone-ledger)

from ledger-live.