Webpack micro-frontend compilation freezes during CI/CD pipeline Docker container build

Other Questions Github
1

I’m working on a micro-frontend project using Webpack and it’s causing me major headaches. The build process gets stuck when running inside Docker containers during our CI pipeline. It just sits there doing nothing until the timeout kicks in after 15 minutes.

My Docker setup:

FROM node:18-alpine AS compile
WORKDIR /workspace

COPY package*.json ./
RUN npm install

COPY . .
RUN npm run compile  # This is where everything freezes

CI Pipeline configuration:

name: Deploy Application

on:
  push:
    branches: [master]

jobs:
  deploy:
    runs-on: ubuntu-22.04
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
    
    - name: Setup Node environment
      uses: actions/setup-node@v3
      with:
        node-version: 18
    
    - name: Docker login
      uses: docker/login-action@v2
      with:
        username: ${{ secrets.REGISTRY_USER }}
        password: ${{ secrets.REGISTRY_TOKEN }}
    
    - name: Build container image
      uses: docker/build-push-action@v4
      with:
        context: .
        push: true
        tags: myapp:${{ github.sha }}
      timeout-minutes: 20

webpack.config.js:

const { defineConfig } = require('webpack');
const ModuleFederationPlugin = require('@module-federation/webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      filename: 'moduleEntry.js',
      exposes: {
        './components': './src/components/index.js',
        './utils': './src/utils/helpers.js',
        './hooks': './src/hooks/custom.js'
      },
      remotes: {
        dashboard: 'http://localhost:3001/moduleEntry.js'
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  optimization: {
    splitChunks: false
  }
};

I’ve tried increasing timeouts and disabling watch mode but nothing works. The same build runs fine on my local machine outside of Docker. Anyone know what could be causing this freeze during containerized builds?

2

This is probably happening because ModuleFederationPlugin is trying to resolve remote modules during the build. Your webpack config points to dashboard: 'http://localhost:3001/moduleEntry.js' - that URL won’t work inside the Docker container during CI.

I hit this same issue last year. Fixed it by making the remotes conditional based on environment. You can wrap your remotes config in a function that returns an empty object during build time, or use webpack’s DefinePlugin for different environments.

Also check if your CI runner has enough memory. Module federation builds can be pretty memory-hungry during compilation.

3

This freeze happens when webpack gets stuck checking circular dependencies during module federation builds. I’ve hit this exact issue when the container can’t resolve DNS or access the network during compilation. Try --network=host on your docker build command or fix your CI networking. Module federation validates remote entry points at build time, which causes these hangs. What worked for me: set stats: 'errors-only' in webpack config and add --verbose to npm run compile so you can see where it dies. Sometimes it’s not frozen - just stuck on dependency resolution without showing anything. You could also build your micro-frontends separately and copy the assets instead of running the full federation build in one container.

4

your dockerfile might have signal handling issues. node apps in docker often ignore sigterm, causing webpack to hang. add --init to your docker run command or use tini in the dockerfile. the webpack terser plugin also freezes without proper signal handling in containers.

5

had the same webpack freeze in docker. try adding --max-old-space-size=4096 to your npm run compile command and set NODE_OPTIONS="--max-old-space-size=4096" in your Dockerfile. also, check for file watchers - they might cause hangs in containers.

6

Check your Docker build context size - webpack hangs when it’s processing huge node_modules directories in containers. I hit this when my .dockerignore wasn’t excluding dev dependencies properly. Alpine images also have limited entropy, which makes webpack’s random number generation block forever. Add --platform=linux/amd64 to your docker build and install haveged in your dockerfile before the npm commands. Another thing that kills performance is webpack trying to create persistent caches that clash with container filesystem layers. Set cache: false in your webpack config for CI builds, or use a dedicated cache volume. Module federation builds get exponentially slower when they can’t write cache files properly in containers.