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

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"
  }
}

You can use NormalModuleReplacementPlugin if you stuck with webpack 4.

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

We’ve already found the issue. It is here: https://github.com/LedgerHQ/ledger-live/blob/cf80564ef12eef7b6919c52886cd91b673c54112/libs/ledgerjs/packages/hw-transport-webhid/src/TransportWebHID.ts#L7

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

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

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

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: https://github.com/facebook/metro/issues/670

Just a little correction in step 2:

1. 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;
}

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.

So to sum it up.

Following this PR https://github.com/LedgerHQ/ledger-live/pull/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:

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

@jordansexton Tried that but it did not work

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).