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?