NX workspace with Module Federation vs. axios-retry: No version specified and unable to automatically determine one

39 Views Asked by At

I have an NX workspace (latest version) in which I have implemented a React app. The workspace uses Webpacks Module Federation, since the React app is later to be exposed as a micro frontend.

I am currently getting this error message:

WARNING in shared module axios-retry -> /Users/codehan/Documents/repos/frontend/node_modules/axios-retry/lib/esm/index.js No version specified and unable to automatically determine one. No version in description file (usually package.json). Add version to description file /Users/codehan/Documents/repos/frontend/node_modules/axios-retry/lib/esm/package.json, or manually specify version in shared config.

Here is my webpack config (webpack.config.js):

const { composePlugins, withNx } = require('@nx/webpack');
const { withReact } = require('@nx/react');
const { withModuleFederation } = require('@nx/react/module-federation');

const baseConfig = require('./module-federation.config');

const config = {
  ...baseConfig,
};

module.exports = composePlugins(withNx(), withReact(), withModuleFederation(config));

module-federation.config.js:

module.exports = {
  name: 'my-frontend',
  exposes: {
    './Module': './src/remote-entry.ts',
  },
};

And here you can see how I use axios-retry:

import { Configuration } from '@azure/msal-browser';
import axios, { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios';
import axiosRetry from 'axios-retry';

import { AuthenticationService } from '@services';
import { ApiClientProps } from '@types';

export type ApiClient = {
  http: AxiosInstance;
  retry: void;
  authenticationService: AuthenticationService;
};

export const createAxiosConfig = (baseUrl: string, subscriptionKey: string) => {
  const config: AxiosRequestConfig = {
    baseURL: baseUrl,
    headers: {
      'Ocp-Apim-Subscription-Key': subscriptionKey,
      'Content-Type': 'application/json',
    },
    withCredentials: false,
  };

  return config;
};

export const createAzureStorageAxiosConfig = (storageVersion = '2023-06-08') => {
  const config: AxiosRequestConfig = {
    headers: {
      'x-ms-version': storageVersion,
    },
    withCredentials: false,
  };

  return config;
};

export const createApiClient = (
  config: AxiosRequestConfig,
  loginScope: string,
  msalConfig: Configuration,
  apiClientProps: ApiClientProps,
): ApiClient => {
  const axiosInstance = axios.create(config);

  const retry = axiosRetry(axiosInstance, {
    retries: 3,
    retryCondition: (error) => handleError(error),
  });

  const authenticationService: AuthenticationService = new AuthenticationService({
    loginScope: [loginScope],
    apiClientProps,
    msalConfig,
  });

  const handleError = async (error: AxiosError) => {
    if (error.response.status === 401) {
      await authenticationService.refreshScopeToken();
    }
    return true; // retry no matter what
  };

  return {
    http: axiosInstance,
    retry: retry,
    authenticationService: authenticationService,
  };
};

If I remove this function withModuleFederation(config) from my webpack config, the error message disappears. How do I have to extend/adjust withModuleFederation(config) so that Webpack is also happy with axios-retry?

0

There are 0 best solutions below