node config/esbuild.config.mjs --watch --> don't watch

[thibpoullain]

Hi there,

I'm on a Rails app, esbuild do the work very well, but I can't make the watch mode working.

This is my files :

# package.json

{
  "name": "github",
  "private": true,
  "dependencies": {
    "@activeadmin/activeadmin": "^2.13.1",
    "@fortawesome/fontawesome-free": "^6.2.1",
    "@hotwired/stimulus": "^3.2.1",
    "@hotwired/stimulus-webpack-helpers": "^1.0.1",
    "activeadmin_addons": "^1.0.0",
    "arctic_admin": "^4.2.5",
    "body-scroll-lock": "^3.1.3",
    "chart.js": "^4.2.0",
    "chartjs-adapter-luxon": "1.1.0",
    "choices.js": "^10.2.0",
    "esbuild": "^0.19.2",
    "esbuild-rails": "^1.0.7",
    "esbuild-sass-glob": "^1.0.8",
    "esbuild-sass-plugin": "^2.15.0",
    "flatpickr": "^4.6.13",
    "geojson": "^0.5.0",
    "jquery-datepicker": "^1.12.3",
    "js-share": "^2.3.2",
    "luxon": "^3.2.1",
    "mapbox-gl": "^2.12.0",
    "micromodal": "^0.4.10",
    "select2": "^4.1.0-rc.0",
    "tippy.js": "^6.3.7",
    "underscore": "^1.13.6"
  },
  "engines": {
    "node": "16"
  },
  "scripts": {
    "build": "node config/esbuild.config.mjs",
    "watch": "node config/esbuild.config.mjs --watch --development"
  }
}

# esbuild.config.mjs

import { build } from 'esbuild'
import rails from 'esbuild-rails'
import { sassPlugin } from 'esbuild-sass-plugin';
import sassGlob from 'esbuild-sass-glob';

build({
  entryPoints: ['app/javascript/application.js', 'app/javascript/active_admin.js'],
  bundle: true,
  sourcemap: true,
  outdir: 'app/assets/builds',
  // Remove unused JS methods
  treeShaking: true,
  // Adds mapping information so web browser console can map bundle errors to the corresponding
  // code line and column in the real code
  // More information: https://esbuild.github.io/api/#sourcemap
  sourcemap: process.argv.includes('--development'),
  // Compresses bundle
  // More information: https://esbuild.github.io/api/#minify
  minify: process.argv.includes('--development') ? false : true,
  // Removes all console lines from bundle
  // More information: https://esbuild.github.io/api/#drop
  drop: process.argv.includes('--development') ? [] : ['console'],
  logLevel: 'info',
  plugins: [
    rails(),
    // Plugin to easily import Rails JS files, such as Stimulus controllers and channels
    // https://github.com/excid3/esbuild-rails
    sassPlugin({
      precompile: (source, pathname) => {
        return sassGlob(source, pathname);
      },
    })
  ],
  loader: {
    '.woff2': 'file',
    '.ttf': 'file'
  },

}).catch((e) => {
  console.error(e);
  process.exit(1);
});

The command build but stop :

# node config/esbuild.config.mjs --watch --development

  app/assets/builds/application.js                       3.1mb ⚠️
  app/assets/builds/active_admin.js                      1.3mb ⚠️
  app/assets/builds/application.css                    412.1kb
  app/assets/builds/fa-solid-900-IOUHM2FI.ttf          388.1kb
  app/assets/builds/active_admin.css                   285.3kb
  app/assets/builds/fa-brands-400-VKUOEF35.ttf         181.8kb
  app/assets/builds/fa-solid-900-OHWQFNBX.woff2        147.0kb
  app/assets/builds/fa-brands-400-BLMHWIQ3.woff2       105.1kb
  app/assets/builds/fa-regular-400-67GHR2M3.ttf         60.9kb
  app/assets/builds/fa-regular-400-BRFDG34Q.woff2       24.6kb
  app/assets/builds/fa-v4compatibility-ESCHJDOI.ttf      9.9kb
  app/assets/builds/fa-v4compatibility-HWEZLDVX.woff2    4.5kb
  app/assets/builds/application.js.map                   7.5mb
  app/assets/builds/active_admin.js.map                  2.1mb
  app/assets/builds/application.css.map                627.3kb
  app/assets/builds/active_admin.css.map               481.3kb

Done in 1.76s.

I can't find the right syntax to make it right, can you help me ? :)

Thx a lot ! <3

[evanw]

You’re showing me that you wrote some JavaScript code that only looks at the --development argument and then you’re asking me why the --watch argument doesn’t do anything. It doesn’t do anything because you didn’t write any code to make it do anything. This is not a problem with esbuild. If you want some code to read --watch then you should write some code to read --watch. I’m closing this issue because nothing is wrong with esbuild here.

[nitram-work]

I understand where the question came from, as I ended up here and someone else might I'll leave a more constructive reply:

thibpoullain, you're running your script directly through node using the esbuild API

node config/esbuild.config.mjs --watch --development

Which doesn't work the same as if you call the esbuild CLI which supports that argument

--watch               Watch mode: rebuild on file system changes (stops when
                      stdin is closed, use "--watch=forever" to ignore stdin)

# Automatically rebuild when input files are changed
esbuild app.ts --bundle --watch

Regards