Webpack not resolving modules on npm run build with github workflow but works from local machine npm run build?

below is my production config for a container microfrontend. When I push the changes to github and github actions run npm install and npm run build, I get the following error below. "ERROR in ./src/App.js ... Module not found: Error: Can't resolve './components/navbar/Progress' in '/home/runner/work/***/***/packages/container/src'

Error Message on Github Actions error message console log

webpack.common.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(scss)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader'
          },
        ]
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
      {
        test: /\.(png|jpg|jpeg|gif|ico)$/,
        use: [
          {
            // loader: 'url-loader',
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]?hash=[hash:20]',
              //name: '[path][name].[ext]',
              limit: 8192
            },
          },
        ],
      },
      {
        test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
        use: [
          {
            loader: 'file-loader',
          }
        ],
      },

      {
        test: /\.(ttf|eot|woff|woff2)$/,
        loader: 'file-loader',
        options: {
            name: 'fonts/[name].[ext]',
        },
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],

  resolve: {
    extensions: ['', '.js', '.jsx', '.scss', '.eot', '.ttf', '.svg', '.woff'],
    modules: ['node_modules', 'scripts', 'images', 'fonts'],
  },
};

webpack.prod.js

const { merge } = require('webpack-merge');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const commonConfig = require('./webpack.common');
const packageJson = require('../package.json');

const domain = process.env.PRODUCTION_DOMAIN;

const prodConfig = {
  mode: 'production',
  output: {
    filename: '[name].[contenthash].js',
    publicPath: '/container/latest/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'container',
      filename: 'remoteEntry.js',
      remotes: {
        marketingMfe: `marketingMod@${domain}/marketing/latest/remoteEntry.js`,
        authMfe: `authMod@${domain}/auth/latest/remoteEntry.js`,
        companyMfe: `companyMod@${domain}/company/latest/remoteEntry.js`,
      },
      exposes: {
        './Functions': './src/functions/Functions',
        './Variables': './src/data-variables/Variables'
      },
      shared: {...packageJson.dependencies, ...packageJson.peerDependencies},
    }),
  ],
};

module.exports = merge(commonConfig, prodConfig);

Container Microfrontend Directory Structure:

| config
| public
| | index.html
| src
| | assets
| | components
| | | navbar
| | | ...some components
| | data-variables
| | | Variables.js
| | functions
| | | Functions.js
| | App.js
| | bootstrap.js
| | index.js

App.js

import React, { lazy, Suspense, useState, useEffect } from 'react';
import { Router, Route, Switch, Redirect } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { createGlobalStyle } from 'styled-components';

import WebFont from 'webfontloader';

// remove comment

WebFont.load({
  google: {
    families: ['Barlow', 'Playfair Display', 'Overpass', 'Montserrat']
  }
});

import Progress from './components/navbar/Progress';
import Header from './components/Header';

const MarketingLazy = lazy(() => import('./components/MarketingApp'));
const AuthLazy = lazy(() => import('./components/AuthApp'));
const CompaniesLazy = lazy(() => import('./components/CompanyApp'));

const history = createBrowserHistory();

const GlobalStyle = createGlobalStyle`
  body {
    height: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
  }

  html {
    height: 100%;
  }
`

export default function App() {
  const [isSignedIn, setIsSignedIn] = useState(false);
  useEffect(() => {
    if (isSignedIn) {
      console.log('once?')
      history.push('/companies/last')
    }
  }, [isSignedIn]);

  return (
    <Router history={history}>
      <div>
      <GlobalStyle />
      <Header onSignOut={() => setIsSignedIn(false)} isSignedIn={isSignedIn} />
      <Suspense fallback={<Progress />} >
        <Switch>
          <Route path="/auth/*">
            <AuthLazy onSignIn={() => setIsSignedIn(true)} />
          </Route>
          <Route path="/companies/last">
            { !isSignedIn && <Redirect to="/" />}
            <CompaniesLazy />
          </Route>
          <Route path="/companies">
            { !isSignedIn && <Redirect to="/" />}
            <CompaniesLazy />
          </Route>
          <Route path="/user">
            { !isSignedIn && <Redirect to="/" />}
            <CompaniesLazy />
          </Route>
          <Route path="/" component={MarketingLazy} />
        </Switch>
      </Suspense>
    </div>
    </Router>
  );
};

Repo URL: github repository