Critical dependency: the request of a dependency is an expression about awilix

[jeffijoe]

I haven't used NextJS myself but you mentioned a build system? I take it you are trying to bundle something, and you are getting this error because the bundler is finding that load-module-native.js contains an import() call which can't be statically analyzed.

In that case, you need to tell your build system to use the browser build of Awilix as it does not contain references to any of the loadModules code.

[nhat-nguyen]

Thank you for your prompt response!

I did a bit research and next.js just uses webpack as its bundler. So this issue comes down to how to configure webpack to use the browser version (lib/awilix.browser.js) like you suggested.

Some googling around and I came across this article that helped: https://stackoverflow.com/questions/73195049/is-there-a-webpack-config-option-to-override-resolve-mainfields-for-specific-i

I managed to modify it a little bit to work with the next.js config. Pasting it here in case other people may run into the same issue:

/** @type {import('next').NextConfig} */

// `mainFields`: which fields you want to prioritize in the order
function resolvePackage(packageName, mainFields) {
  // Read the json of the npm package in question.
  const json = require(`${packageName}/package.json`);

  const matchedFile = mainFields.find((x) => json.hasOwnProperty(x));

  if (!mainFields) {
    throw new Error(`No matching file found for ${packageName}`);
  }

  return `${packageName}/${json[matchedFile]}`;
}

const nextConfig = {
  webpack(config, options) {
    config.resolve.alias['awilix'] = resolvePackage('awilix', ['browser']);
    return config;
  },
};

module.exports = nextConfig;

It's still quite strange though that when I created a barebone next.js app, the warnings would not show up. But at least there's a workaround for it. 😄

Thanks again for the help! I have been searching for a dependency injection library that works with next.js and awilix is the only one that works. Other libraries that rely on reflect-metadata simply do not work because there isn't a defined entry point to import reflect-metadata.

[jeffijoe]

Interesting - Webpack should have used the browser build by default, unless Next somehow changes that. Glad you figured it out.