magic-js: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

@Ethella I have a fix for react using CRACO

const path = require("path");

module.exports = {
  reactScriptsVersion: "react-scripts" /* (default value) */,

  webpack: {
    alias: {
      "magic-sdk": path.resolve(
        __dirname,
        "node_modules/magic-sdk/dist/cjs/index.js"
      ),
    },
  },
};

For pure webpack I believe alias is nested with resolve … resolve.alias...

These would be helpful to add to your documentation

I was about to say I found no issues reported during the build because you already fixed it 🚀.

I’ll update our doc to reflect your suggestion. Thx a lot!

Thank you for the code sample @Adamj1232. I’m off-the-clock this week but will make time for this early next week.

@Adamj1232 It worked! Thanks again. Here is the full snippet for node js using webpack (make sure to update mode, entry, and output per your project).

const path = require("path");

module.exports = {
  mode: "production",
  entry: "./lib/engine.mjs",
  output: {
    library: "engine",
    libraryTarget: "umd",
    globalObject: "this",
    umdNamedDefine: true,
    filename: "engine.js",
  },
  resolve: {
    alias: {
      "magic-sdk": path.resolve(
        __dirname,
        "node_modules/magic-sdk/dist/cjs/index.js"
      ),
    },
  },
};

@andreisucman you would have to look into the documentation for the compiler you are using.

After digging into this issue a bit, the warning appears to be related to this code being inlined into magic-sdk’s ESM output:

var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
}) : x)(function(x) {
  if (typeof require !== "undefined")
    return require.apply(this, arguments);
  throw new Error('Dynamic require of "' + x + '" is not supported');
});

This could either be resolved at the ESBuild layer, but can be worked around for your individual purpose by adjusting your bundler config to resolve magic-sdk to its CommonJS entrypoint (magic-sdk/dist/cjs/index.js), which won’t manifest this warning. It is also valid to ignore this warning using whatever API/plugin your bundler provides to silence noisy logs. This warning in context of magic-sdk will not manifest any bugs at runtime.