web3uikit depedency error: lodash.merge

[Hrugved]

Command: yarn dev
Output:

yarn run v1.22.15
warning ../package.json: No license field
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
error - ./node_modules/@toruslabs/http-helpers/dist/httpHelpers.esm.js:2:0
Module not found: Can't resolve 'lodash.merge'

Import trace for requested module:
./node_modules/@toruslabs/openlogin/dist/openlogin.esm.js
./node_modules/@web3auth/web3auth/dist/web3auth.esm.js
./node_modules/moralis/lib/browser/Web3Connector/Web3AuthConnector.js
./node_modules/moralis/lib/browser/MoralisWeb3.js
./node_modules/moralis/lib/browser/Parse.js
./node_modules/moralis/index.js
./node_modules/react-moralis/lib/index.esm.js
./pages/_app.js

https://nextjs.org/docs/messages/module-not-found

tried :

• yarn add lodash.merge
• downgrading web3uikit to 0.1.159

package.json

{
  "name": "dapp-lottery",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "moralis": "^1.9.0",
    "next": "12.2.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-moralis": "^1.4.0",
    "web3uikit": "0.1.159"
  },
  "devDependencies": {
    "eslint": "8.19.0",
    "eslint-config-next": "12.2.2"
  }
}

node v16.16.0

[krakxn]

Could you send the file at the following path: ./node_modules/@toruslabs/http-helpers/dist/httpHelpers.esm.js

Cheers

[Hrugved]

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import merge from 'lodash.merge';
import logLevel, { levels } from 'loglevel';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
const log = logLevel.getLogger("http-helpers");
log.setLevel(levels.INFO);
let apiKey = "torus-default";
let embedHost = ""; // #region API Keys

const gatewayAuthHeader = "x-api-key";
const gatewayEmbedHostHeader = "x-embed-host";
let sentry = null;
const tracingOrigins = [];
const tracingPaths = [];
function enableSentryTracing(_sentry, _tracingOrigins, _tracingPaths) {
  sentry = _sentry;
  tracingOrigins.push(..._tracingOrigins);
  tracingPaths.push(..._tracingPaths);
}
function setEmbedHost(embedHost_) {
  embedHost = embedHost_;
}
function clearEmbedHost() {
  embedHost = "";
}
function getEmbedHost() {
  return embedHost;
}
function setAPIKey(apiKey_) {
  apiKey = apiKey_;
}
function clearAPIKey() {
  apiKey = "torus-default";
}
function getAPIKey() {
  return apiKey;
} // #endregion

function setLogLevel(level) {
  log.setLevel(level);
}

async function fetchAndTrace(url, init) {
  let _url = null;

  try {
    _url = new URL(url);
  } catch (error) {}

  if (sentry && _url && (tracingOrigins.includes(_url.origin) || tracingPaths.includes(_url.pathname))) {
    const transaction = sentry.startTransaction({
      name: url
    });
    const span = transaction.startChild({
      op: "http"
    }); // This function returns a Span

    const response = await fetch(url, init);
    span.finish(); // Remember that only finished spans will be sent with the transaction

    transaction.finish(); // Finishing the transaction will send it to Sentry

    return response;
  }

  return fetch(url, init);
}

function getApiKeyHeaders() {
  const headers = {};
  if (apiKey) headers[gatewayAuthHeader] = apiKey;
  if (embedHost) headers[gatewayEmbedHostHeader] = embedHost;
  return headers;
}

function debugLogResponse(response) {
  log.info("Response: ".concat(response.status, " ").concat(response.statusText));
  log.info("Url: ".concat(response.url));
}

const promiseTimeout = (ms, promise) => {
  const timeout = new Promise((resolve, reject) => {
    const id = setTimeout(() => {
      clearTimeout(id);
      reject(new Error("Timed out in ".concat(ms, "ms")));
    }, ms);
  });
  return Promise.race([promise, timeout]);
};
const get = async function (url) {
  let options_ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  let customOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  const defaultOptions = {
    mode: "cors",
    headers: {}
  };

  if (customOptions.useAPIKey) {
    defaultOptions.headers = _objectSpread(_objectSpread({}, defaultOptions.headers), getApiKeyHeaders());
  }

  const options = merge(defaultOptions, options_, {
    method: "GET"
  });
  const response = await fetchAndTrace(url, options);

  if (response.ok) {
    return response.json();
  }

  debugLogResponse(response);
  throw response;
};
const post = function (url) {
  let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  let options_ = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  let customOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
  const defaultOptions = {
    mode: "cors",
    headers: {
      "Content-Type": "application/json; charset=utf-8"
    }
  };

  if (customOptions.useAPIKey) {
    defaultOptions.headers = _objectSpread(_objectSpread({}, defaultOptions.headers), getApiKeyHeaders());
  }

  const options = merge(defaultOptions, options_, {
    method: "POST"
  }); // deep merge changes the structure of form data and url encoded data ,
  // so we should not deepmerge body data

  if (customOptions.isUrlEncodedData) {
    // for multipart request browser/client will add multipart content type
    // along with multipart boundary , so for multipart request send
    // content-type: undefined or send with multipart boundary if already known
    options.body = data; // If url encoded data, this must not be the content type

    if (options.headers["Content-Type"] === "application/json; charset=utf-8") delete options.headers["Content-Type"];
  } else {
    options.body = JSON.stringify(data);
  }

  return promiseTimeout(customOptions.timeout || 60000, fetchAndTrace(url, options).then(response => {
    if (response.ok) {
      return response.json();
    }

    debugLogResponse(response);
    throw response;
  }));
};
const patch = async function (url) {
  let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  let options_ = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  let customOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
  const defaultOptions = {
    mode: "cors",
    headers: {
      "Content-Type": "application/json; charset=utf-8"
    }
  }; // for multipart request browser/client will add multipart content type
  // along with multipart boundary , so for multipart request send
  // content-type: undefined or send with multipart boundary if already known

  if (customOptions.useAPIKey) {
    defaultOptions.headers = _objectSpread(_objectSpread({}, defaultOptions.headers), getApiKeyHeaders());
  }

  const options = merge(defaultOptions, options_, {
    method: "PATCH"
  }); // deep merge changes the structure of form data and url encoded data ,
  // so we should not deepmerge body data

  if (customOptions.isUrlEncodedData) {
    // for multipart request browser/client will add multipart content type
    // along with multipart boundary , so for multipart request send
    // content-type: undefined or send with multipart boundary if already known
    options.body = data; // If url encoded data, this must not be the content type

    if (options.headers["Content-Type"] === "application/json; charset=utf-8") delete options.headers["Content-Type"];
  } else {
    options.body = JSON.stringify(data);
  }

  const response = await fetchAndTrace(url, options);

  if (response.ok) {
    return response.json();
  }

  debugLogResponse(response);
  throw response;
};
const remove = async function (url) {
  let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  let options_ = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  let customOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
  const defaultOptions = {
    mode: "cors",
    headers: {
      "Content-Type": "application/json; charset=utf-8"
    }
  }; // for multipart request browser/client will add multipart content type
  // along with multipart boundary , so for multipart request send
  // content-type: undefined or send with multipart boundary if already known

  if (customOptions.useAPIKey) {
    defaultOptions.headers = _objectSpread(_objectSpread({}, defaultOptions.headers), getApiKeyHeaders());
  }

  const options = merge(defaultOptions, options_, {
    method: "DELETE"
  });

  if (customOptions.isUrlEncodedData) {
    // for multipart request browser/client will add multipart content type
    // along with multipart boundary , so for multipart request send
    // content-type: undefined or send with multipart boundary if already known
    options.body = data; // If url encoded data, this must not be the content type

    if (options.headers["Content-Type"] === "application/json; charset=utf-8") delete options.headers["Content-Type"];
  } else {
    options.body = JSON.stringify(data);
  }

  const response = await fetchAndTrace(url, options);

  if (response.ok) {
    return response.json();
  }

  debugLogResponse(response);
  throw response;
};
const generateJsonRPCObject = (method, parameters) => ({
  jsonrpc: "2.0",
  method,
  id: 10,
  params: parameters
});
const promiseRace = function (url, options) {
  let timeout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 60000;
  return Promise.race([get(url, options), new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error("timed out"));
    }, timeout);
  })]);
};

export { clearAPIKey, clearEmbedHost, enableSentryTracing, gatewayAuthHeader, gatewayEmbedHostHeader, generateJsonRPCObject, get, getAPIKey, getEmbedHost, patch, post, promiseRace, promiseTimeout, remove, setAPIKey, setEmbedHost, setLogLevel };
//# sourceMappingURL=httpHelpers.esm.js.map

[krakxn]

The problem lies here (in that file): import merge from 'lodash.merge';

Specifying the path where lodash.merge is located explicitly should fix it. (or installing lodash.merge via npm globally) Cheers!

[Hrugved]

I dont think making changes to packages is a good idea, they are meant to work out of the box. I have lodash installed both in global and project scope. I can view the imported file in vscode as well. But still it cant resolve.

[krakxn]

I could definitely be wrong here but I definitely do not think we are changing the package. We are just making the import explicit.

[Hrugved]

update: I downloaded @PatrickAlphaC repo and ran into same error. dont know what causing this

[krakxn]

Did you explicitly include the file path? If so, did it work? If not, it is still worth trying.

[Hrugved]

didnt work. but I suspect that yarn dont pick the new changes I made to node_modules

[krakxn]

I see. That is sad. Did you try using npm?

[Hrugved]

npx create-next-app@latest --use-npm seems to work now.

I am going to take pledge of not using yarn ever again. yarn has consistently slowed down my momentum in this course.