Rollup not emitting build in docker-compose

Question

I'm building a react app and I'm trying to have it run though a docker-compose recipe. I have it working with

docker container run -p 3000:3000 --name node --rm -v "$PWD:/app" --init --workdir /app --entrypoint npm -it node:latest start

and decided to convert it to recipe since I'll be adding more services in the future. However, I can't get rollup to create a bundle. Here's my package.json and

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "rollup -c rollup.config.ts --configPlugin typescript -w"
  },
  "devDependencies": {
    "@babel/preset-react": "7.16.7",
    "@rollup/plugin-babel": "5.3.0",
    "@rollup/plugin-commonjs": "21.0.1",
    "@rollup/plugin-node-resolve": "13.1.3",
    "@rollup/plugin-replace": "3.0.1",
    "@rollup/plugin-typescript": "8.3.0",
    "@types/node": "17.0.13",
    "@types/react": "17.0.38",
    "@types/react-dom": "17.0.11",
    "rollup": "2.66.1",
    "rollup-plugin-livereload": "2.0.5",
    "rollup-plugin-serve": "1.1.0",
    "typescript": "4.5.5"
  },
  "dependencies": {
    "@emotion/react": "11.7.1",
    "@emotion/styled": "11.6.0",
    "@mui/material": "5.3.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

docker-compose.yml

version: '3'

services:
  frontend:
    image: node:latest
    working_dir: /app
    user: 'node'
    ports: 
      - '3000:3000'
    volumes:
      - .:/app
    entrypoint: "npm run start"

rollup.config.ts

import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import livereload from 'rollup-plugin-livereload';
import serve from 'rollup-plugin-serve';
import typescript from '@rollup/plugin-typescript';
import path from 'path';

export default {
    input: path.join(__dirname, 'src', 'index.tsx'),
    output: {
        file: path.join(__dirname, 'dist', 'bundle.js'),
        format: "iife",
        sourcemap: true
    },
    watch: {
        clearScreen: false
    },
    plugins: [
        typescript(),
        nodeResolve({ extensions: ['.js'] }),
        replace({ 
            preventAssignment: true,
            'process.env.NODE_ENV': JSON.stringify('development')
        }),
        babel({ presets: ['@babel/preset-react']}),
        commonjs(),
        serve({
            open: true,
            verbose: true,
            contentBase: ['', 'src'],
            host: '0.0.0.0',
            port: 3001
        }),
        livereload({ watch: 'dist' })
    ]
}

Running docker-compose up prints the following to stdout. I don't understand why it hangs there. I've tried running npm start inside the container and it works fine and emits a bundle but running through docker-compose fails.

WARNING: The Docker Engine you're using is running in swarm mode.

Compose does not use swarm mode to deploy services to multiple nodes in a swarm. All containers will be scheduled on the current node.

To deploy your application across the swarm, use `docker stack deploy`.

Creating network "app_1" with the default driver
Creating app_1 ... done
Attaching to app_1
frontend_1  | 
frontend_1  | > [email protected] start
frontend_1  | > rollup -c rollup.config.ts --configPlugin typescript -w
frontend_1  | 
frontend_1  | loaded rollup.config.ts with warnings
frontend_1  | (!) Plugin typescript: @rollup/plugin-typescript TS7016: Could not find a declaration file for module 'rollup-plugin-serve'. '/app/node_modules/rollup-plugin-serve/dist/index.cjs.js' implicitly has an 'any' type.
frontend_1  |   Try `npm i --save-dev @types/rollup-plugin-serve` if it exists or add a new declaration (.d.ts) file containing `declare module 'rollup-plugin-serve';`
frontend_1  | rollup.config.ts: (6:19)
frontend_1  | 
frontend_1  | 6 import serve from 'rollup-plugin-serve';
frontend_1  |                     ~~~~~~~~~~~~~~~~~~~~~
frontend_1  | 
frontend_1  | rollup v2.66.1
frontend_1  | bundles /app/src/index.tsx → dist/bundle.js...
frontend_1  | babelHelpers: 'bundled' option was used by default. It is recommended to configure this option explicitly, read more here: https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers
frontend_1  | [BABEL] Note: The code generator has deoptimised the styling of /app/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB.

Answer 1

Change your docker-compose entrypoint to

services:
  frontend:
    # ...
    entrypoint: bash -c "npm run start"

or entrypoint: ["npm", "run", "start"]

Answer 2

I've had a similar issue, but I can't promise this is the exact same.

After more than an hour of desperate debugging, I figured out that in my case the crux was terminal allocation. I got it working by adding:

services:
  frontend:
    tty: true