createKeccakHash is not a function

[Digtyarenk0]

Describe the bug When creating an sdk instance I get an error inside @rarible/protocol-ethereum-sdk/build/config/mainnet.js

Error:

keccak.ts:10 Uncaught (in promise) TypeError: createKeccakHash is not a function
    at keccak.ts:10:1
    at hash-utils.ts:7:1
    at keccak (hash.ts:19:1)
    at keccak256 (hash.ts:38:1)
    at id32 (id.js:11:1)
    at ./node_modules/@rarible/protocol-ethereum-sdk/build/config/mainnet.js (mainnet.js:29:1)
    at options.factory (react refresh:6:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)

What causes the error:

 const putEvmSDK = async () => {
    const sdk = createRaribleSdk(undefined, 'testnet'); // I get an error here
    console.log({ sdk });
  };

To Reproduce Installed packages

Dependencies:

"@rarible/sdk": "0.13.57",
"react": "^18.2.0",

Additional context Add any other context about the problem here.

• Babel version npm list @babel/core = 7.22
• npm v = 8.19.2
• node v = v16.18.1

I also use react-app-rewired And here are my webpack loaders

  const typescriptLoader = {
    test: [/\.ts?$/, /\.tsx?$/],
    loader: 'ts-loader',
    exclude: /node_modules/,
  };

  const babelLodaer = {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        compact: true,
        presets: [
          '@babel/preset-flow',
          [
            '@babel/preset-env',
            {
              targets: {
                esmodules: true,
              },
            },
          ],
          '@babel/preset-modules',
          '@babel/preset-react',
          '@babel/preset-typescript',
        ],
        plugins: [
          'macros',
          '@babel/plugin-proposal-class-properties',
          '@babel/plugin-proposal-nullish-coalescing-operator',
          '@babel/plugin-syntax-dynamic-import',
          '@babel/plugin-proposal-private-methods',
          '@babel/plugin-proposal-private-property-in-object',
          '@babel/plugin-syntax-flow',
          isDev && require.resolve('react-refresh/babel'),
        ].filter(Boolean),
      },
    },
  };

  const laoders = [fileLoader, svgLoader, babelLodaer, typescriptLoader, cssLoader, resolveMJSLoader];
};

[evgenynacu]

@Digtyarenk0 it seems there is some problem with other dependencies Could you probably attach yarn.lock?

[Digtyarenk0]

@evgenynacu Here is my yarn.lock file yarn.txt

[evgenynacu]

@ex1st0r could you pls suggest what can go wrong here?

[ex1st0r]

Looks like you have some troubles with "keccak" package. Check existing and version of this package.

[Digtyarenk0]

"keccak" is not installed directly in the project (package.json)

[evgenynacu]

@ex1st0r keccak has 3.0.4 version installed In one of my test project the same version is installed and everything's fine

Any other ideas?

[evgenynacu]

@Digtyarenk0 here's my yarn.lock from test project Could you check also if you see any anomalies in your? yarn.txt

[Digtyarenk0]

I didn't notice any anomalies in your package. As you can see in the error, it comes from @rarible/protocol-ethereum-sdk and goes to ethereum-cryptography. Which is version 0.1.3. This ethereum-cryptography contains keccak version 3.0.0. Here are the contents of the file at keccak.ts:10:1

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var hash_utils_1 = require("./hash-utils");
var createKeccakHash = require("keccak");
exports.keccak224 = hash_utils_1.createHashFunction(function () {
    return createKeccakHash("keccak224");
});
exports.keccak256 = hash_utils_1.createHashFunction(function () {
    return createKeccakHash("keccak256");
});
exports.keccak384 = hash_utils_1.createHashFunction(function () {
    return createKeccakHash("keccak384");
});
exports.keccak512 = hash_utils_1.createHashFunction(function () {
    return createKeccakHash("keccak512");
});
//# sourceMappingURL=keccak.js.map

As far as I understand, it imports keccak from the modules of my project, where keccak 3.0.4 is located. Maybe the error is somehow related to the react-app-rewired config?

[vanya2h]

I see few problems here:

1. Why you need two typescript loaders at the same time? Babel typescript and pure typescript loader. Try to remove pure loader and use only babel
2. Not sure but you set esmodules as a target in babel preset env options, probably you can play with it
3. The problem seems in general resolution of modules. Try to install keccak directly probably you just need to install it as a dependency in your project. If not, try to play with typescript config, probably you can set moduleResolution to "bundler", make sure your esModuleInterop is also true

[vanya2h]

And what is resolve mjs loader that you use? Seems also like a cause

[Digtyarenk0]

I tried installing keccak directly and switching moduleResolution in the typescript config. But the error persists Here is the new config:

const svgLoader = {
    test: /\.svg$/,
    issuer: /\.[jt]sx?$/,
    use: ['@svgr/webpack'],
  };

  const cssLoader = {
    test: /\.s[ac]ss$/i,
    use: [
      isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
      'css-modules-typescript-loader',
      {
        loader: 'css-loader',
        options: {
          modules: {
            auto: /\.module\.scss$/i,
            localIdentName: isDev ? '[path][name]__[local]' : '[hash:base64:8]',
          },
        },
      },
      'sass-loader',
    ],
  };

  const fileLoader = {
    test: /\.(png|jpe?g|gif|woff2|woff)$/i,
    use: [
      {
        loader: 'file-loader',
      },
    ],
  };

  const babelLodaer = {
    test: /\.(js|jsx|tsx|ts)$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        compact: true,
        presets: [
          '@babel/preset-flow',
          [
            '@babel/preset-env',
            {
              targets: {
                esmodules: true,
              },
            },
          ],
          '@babel/preset-modules',
          ['@babel/preset-react', { runtime: 'automatic' }],
          '@babel/preset-typescript',
        ],
        plugins: [
          'macros',
          '@babel/plugin-proposal-class-properties',
          '@babel/plugin-proposal-nullish-coalescing-operator',
          '@babel/plugin-syntax-dynamic-import',
          '@babel/plugin-proposal-private-methods',
          '@babel/plugin-proposal-private-property-in-object',
          '@babel/plugin-syntax-flow',
          isDev && require.resolve('react-refresh/babel'),
        ].filter(Boolean),
      },
    },
  };

  const resolveMJSLoader = {
    test: /\.mjs/,
    include: /node_modules/,
    type: 'javascript/auto',
    resolve: {
      fullySpecified: false,
    },
  };

  const laoders = [fileLoader, svgLoader, babelLodaer, cssLoader, resolveMJSLoader];

[Digtyarenk0]

I also tried changing the config but it didn't work. Maybe there are some ideas? Attached my config: config-overrides.txt devServer.txt fallback.txt loaders.txt plugins.txt resolvers.txt tsconfig.txt

[evgenynacu]

@ex1st0r @vanya2h do you have any ideas?

[vanya2h]

@Digtyarenk0 one more idea:

1. Install keccak ^3.0.0 directly in your package.json
2. Create new file keccak.js with following content:

   module.exports = require("keccak") 
   // OR module.exports = require("keccak").default

3. Add to your buildResolvers new alias

   alias: {
   "keccak": path.resolve(__dirname, "keccak.js"),
   },

Let's see how it's going to work..

[Digtyarenk0]

@vanya2h Installed in dependencies "keccak": "3.0.0", I tried both the require("keccak") option and a couple of alias declaration options. But it did not help

const path = require('path');

const alias = require('react-app-rewire-alias');

module.exports = function buildResolvers(config, paths) {
  // Alias
  // alias.alias({
  //   'magic-sdk': path.resolve(__dirname, 'node_modules/magic-sdk/dist/cjs/index.js'),
  //   keccak: path.resolve(__dirname, 'keccak.js'),
  // })(config);

  return {
    ...config.resolve,
    extensions: ['.tsx', '.ts', '.js'],
    preferAbsolute: true,
    preferRelative: true,
    modules: [paths.src, 'node_modules'],
    mainFiles: ['index'],
    alias: {
      ...config.resolve.alias,
      keccak: path.resolve(__dirname, 'keccak.js'),
    },
  };
};

[Digtyarenk0]

@evgenynacu @ex1st0r @vanya2h I created a repository where you can recreate this bug https://github.com/Digtyarenk0/test-rarible-with-config/tree/main

npm ls keccak
/app
├─┬ @metaplex-foundation/js@0.19.5
│ └─┬ @bundlr-network/client@0.8.9
│   └─┬ arbundles@0.6.23
│     └── keccak@3.0.4 deduped
├─┬ @rarible/connector-helper@0.13.57
│ ├─┬ @imtbl/imx-sdk@2.1.1
│ │ └─┬ ethereumjs-wallet@1.0.2
│ │   └─┬ ethereum-cryptography@0.1.3
│ │     └── keccak@3.0.4 deduped
│ ├─┬ @rarible/tezos-sdk@0.1.46
│ │ └── keccak@3.0.4 deduped
│ └─┬ @rarible/web3-ethereum@0.13.57
│   └─┬ web3-utils@1.8.2
│     └─┬ ethereumjs-util@7.1.5
│       └─┬ ethereum-cryptography@0.1.3
│         └── keccak@3.0.4 deduped
├─┬ @rarible/ethers-ethereum@0.13.57
│ ├─┬ @rarible/ethereum-provider@0.13.56
│ │ └─┬ eth-sig-util@3.0.1
│ │   └─┬ ethereumjs-abi@0.6.8 invalid: "git+https://github.com/ethereumjs/ethereumjs-abi.git" from node_modules/eth-sig-util (git+ssh://git@github.com/ethereumjs/ethereumjs-abi.git)
│ │     └─┬ ethereumjs-util@6.2.1
│ │       └─┬ ethereum-cryptography@0.1.3
│ │         └── keccak@3.0.4 deduped
│ └─┬ ethereumjs-util@7.1.5
│   └─┬ ethereum-cryptography@0.1.3
│     └── keccak@3.0.4 deduped
├─┬ @rarible/sdk@0.13.57
│ └─┬ @rarible/protocol-ethereum-sdk@0.13.57
│   └─┬ ethereumjs-util@7.1.5
│     └─┬ ethereum-cryptography@0.1.3
│       └── keccak@3.0.4 deduped
├─┬ @solana/wallet-adapter-wallets@0.17.2
│ └─┬ @solana/wallet-adapter-torus@0.11.28
│   └─┬ @toruslabs/solana-embed@0.3.4
│     └─┬ @toruslabs/openlogin-jrpc@3.2.0
│       └─┬ @toruslabs/openlogin-utils@3.0.0
│         └── keccak@3.0.4 deduped
├─┬ @walletconnect/web3-provider@1.8.0
│ └─┬ web3-provider-engine@16.0.1
│   ├─┬ ethereumjs-util@5.2.1
│   │ └─┬ ethereum-cryptography@0.1.3
│   │   └── keccak@3.0.4 deduped
│   └─┬ ethereumjs-vm@2.6.0
│     └─┬ ethereumjs-util@6.2.1
│       └─┬ ethereum-cryptography@0.1.3
│         └── keccak@3.0.4 deduped
├─┬ @web3modal/ethereum@2.7.1
│ └─┬ @wagmi/core@1.4.6
│   └─┬ @wagmi/connectors@3.1.4
│     └─┬ @coinbase/wallet-sdk@3.7.2
│       └── keccak@3.0.4 deduped
├── keccak@3.0.4
└─┬ web3@1.10.3
  └─┬ web3-eth@1.10.3
    └─┬ web3-eth-accounts@1.10.3
      ├─┬ @ethereumjs/common@2.6.5
      │ └─┬ ethereumjs-util@7.1.5
      │   └─┬ ethereum-cryptography@0.1.3
      │     └── keccak@3.0.4 deduped
      └─┬ @ethereumjs/tx@3.5.2
        └─┬ ethereumjs-util@7.1.5
          └─┬ ethereum-cryptography@0.1.3
            └── keccak@3.0.4 deduped

[Digtyarenk0]

Also, when installing dependencies yarn install, there are these warnings:

warning " > @rarible/api-client@0.16.4" has incorrect peer dependency "@rarible/types@>=0.10.0 <0.11.0".
warning "@rarible/sdk > @rarible/api-client@0.16.5-alpha.2" has incorrect peer dependency "@rarible/types@>=0.10.0 <0.11.0".
warning " > @rarible/sdk@0.13.61" has incorrect peer dependency "axios@^0.26.1".
warning "@rarible/sdk > @rarible/protocol-ethereum-sdk@0.13.61" has incorrect peer dependency "axios@^0.26.1".
warning "@rarible/sdk > @rarible/solana-sdk > @metaplex/js@4.12.0" has incorrect peer dependency "@metaplex-foundation/mpl-core@^0.0.2".
warning "@rarible/sdk > @rarible/solana-sdk > @metaplex/js@4.12.0" has incorrect peer dependency "@metaplex-foundation/mpl-token-metadata@^0.0.2".
warning "@rarible/sdk-wallet > @rarible/api-client@0.16.2-beta1" has incorrect peer dependency "@rarible/types@>=0.10.0 <0.11.0".

Why can't they influence?

[Digtyarenk0]

I rewrote the config from react-app-review to webpack and vite. I spent a lot of time and eventually found what was causing the error. There was a preferRelative line in config.resolve