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'),
    },
  };
};