I’m encountering an issue with nodemon in my Rails esbuild application. The esbuild setup for a new rails app uses nodemon by default to watch for changes in the .scss files and trigger the CSS build process (yarn build:css) whenever changes occur. However, despite trying various configurations and troubleshooting steps, I haven’t been able to get it to work properly and the ./bin/dev keeps ending unexpectedly. I wonder if anyone else had experience with this or might have an idea on what other steps I can take to troubleshoot?

Project Setup:

I’m using Rails with esbuild for JavaScript bundling and Sass for CSS preprocessing.
My project is structured as a Rails application with the usual directory layout.

Steps Taken:

1. I initialised my project with the following command:
rails new app_name -d postgresql -j esbuild --css bootstrap

2. Then I added esbuild-rails by running (https://github.com/excid3/esbuild-rails):
yarn add esbuild-rails
3. I created an esbuild.config.js in the root folder with the following content:

const path = require("path"); 
const rails = require("esbuild-rails"); 
require("esbuild") 
  .build({ 
    entryPoints: ["application.js"],
    bundle: true,
    outdir: path.join(process.cwd(), "app/assets/builds"), 
    absWorkingDir: path.join(process.cwd(), "app/javascript"), 
    plugins: [rails()], 
  }) 
.catch(() => process.exit(1));

4. In the package.json, I changed the script to:
   "build": "node esbuild.config.js"
5. Then ran yarn build.

What I’ve Tried:

• Nodemon comes installed by default with Rails esbuild, but I encountered issues where it exits with code 1 without triggering the CSS build process or a log with more info about the error.

• I tried switching to chokidar as an alternative file watcher, but encountered the same issue.

• I verified the installation of both nodemon and chokidar and ensured they were accessible from my project directory.

• I reviewed my project configuration files (package.json, esbuild.config.js, etc.) for any syntax errors or typos.

• I uninstalled nodemon globally and reinstalled it locally in my project to ensure it was using the correct version.

• I’ve checked the compatibility of my Node.js version, nodemon, and other dependencies to ensure they were compatible. Here are the versions being used:

  • npm -v: 10.5.0
  • yarn -v: 1.22.22
  • node -v: v21.7.3
  • nvm -v: 0.39.1
  • rails -v: Rails 7.1.3.2
  • nodemon -v: 3.1.0

• When running yarn build:css manually, it works fine without any issues:

yarn build:css
$ yarn run v1.22.22
$ yarn build:css:compile && yarn build:css:prefix
$ sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules
$ postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css
✨  Done in 3.72s.

Current behaviour:

When running ./bin/dev to start my Rails application, nodemon starts watching for changes in my .scss files but exits with code 1 without triggering the CSS build process (yarn build:css).

Expected Behavior:

I expect nodemon to watch for changes in my .scss files and trigger the CSS build process (yarn build:css) whenever changes occur, without exiting prematurely.

Additional Information:

I’ve tried adding –verbose and –inspect flags next to nodemon in the script, but still didn’t receive any error messages.

12:20:17 web.1  | started with pid 38513
12:20:17 js.1   | started with pid 38514
12:20:17 css.1  | started with pid 38515
12:20:18 js.1   | yarn run v1.22.22
12:20:18 css.1  | yarn run v1.22.22
12:20:18 js.1   | $ node esbuild.config.js --watch
12:20:18 css.1  | $ nodemon --watch ./app/assets/stylesheets/ --ext scss --exec "yarn build:css"
12:20:18 css.1  | [nodemon] 3.1.0
12:20:18 css.1  | [nodemon] to restart at any time, enter `rs`
12:20:18 css.1  | [nodemon] watching path(s): app/assets/stylesheets/**/*
12:20:18 css.1  | [nodemon] watching extensions: scss
12:20:18 css.1  | [nodemon] starting `yarn build:css`
12:20:18 js.1   | Done in 0.55s.
12:20:18 js.1   | exited with code 0
12:20:18 system | sending SIGTERM to all processes
12:20:18 css.1  | exited with code 1
12:20:18 web.1  | terminated by SIGTERM

Here’s the full package.json file for context:

{
  "name": "app",
  "private": true,
  "dependencies": {
    "@hotwired/stimulus": "^3.2.2",
    "@hotwired/turbo-rails": "^8.0.4",
    "@popperjs/core": "^2.11.8",
    "autoprefixer": "^10.4.19",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3",
    "esbuild": "^0.20.2",
    "esbuild-rails": "^1.0.7",
    "nodemon": "^3.1.0",
    "postcss": "^8.4.38",
    "postcss-cli": "^11.0.0",
    "sass": "^1.75.0"
  },
  "scripts": {
    "build": "node esbuild.config.js",
    "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
    "build:css": "yarn build:css:compile && yarn build:css:prefix",
    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec "yarn build:css""
  },
  "browserslist": [
    "defaults"
  ]
}

Any insights or suggestions on how to resolve this issue would be greatly appreciated. Thank you in advance for your help!