Invalid option in build() call: "watch"

Question

I am following the example as it is described here:

https://bilalbudhani.com/chokidar-esbuild/

When I do:

node esbuild.config.js --watch

I get the message:

[ERROR] Invalid option in build() call: "watch"

I have no idea why this is happening.

Is "watch" not longer a parameter?

I also did this example:

const path = require('path')

require("esbuild").build({
  entryPoints: ["application.js", "client.js"],
  bundle: true,
  sourcemap: true,
  outdir: path.join(process.cwd(), "app/assets/builds"),
  absWorkingDir: path.join(process.cwd(), "app/javascript"),
  minify: true,
  watch: true,
})
.then(() => console.log("⚡Done"))
.catch(() => process.exit(1));

If i remove the line "watch:true", it compiles ok. But if I leave it, I get the same error:

Invalid option in build() call: "watch"

when I do: node esbuild.config.js

Execution

Which esbuild version you're using? v0.17 change quite a bit recently and docs are not up to date yet. Try with latest v0.16 – Hydnocarpate

You might be interested that esbuild now supports serve combined with watch. See github.com/evanw/esbuild/blob/main/CHANGELOG.md#0170 – Hydnocarpate

@Hydnocarpate I get now. From 0.17.4 docs: "..This change removes the incremental and watch options as well as the serve() method, and introduces a new context() method...". I used esbuild 0.17.4. Downgraded to 0.16.17 and it worked! Thank you. I use rails with esbuild and started with this config: github.com/rails/jsbundling-rails/issues/…. Anyway, you should have replied instead of commenting so I could accept you answer. Thank you again. – Execution

By the way, I have no idea how the esbuild.config.js should work with 0.17.4 new async api. – Execution

Someone was kind enough to provide a solution to this problem with esbuild 0.17x. See here: github.com/rails/jsbundling-rails/issues/… – Execution

See 0.17 release notes: github.com/evanw/esbuild/releases/tag/v0.17.0 – Rhinoplasty

Answer 1

Summing up from the comments:

esbuild <v0.16 has removed the watch option. Most tutorials and HowTos are pointing to that version. Downgrade your esbuild to that if you want to use it like described there.

Better option is to use esbuild >0.16 which has a built in live reload which combines watch and serve using the newly introduced context

Hydnocarpate

Struggling to find examples of how to use this. – Stratigraphy

What exactly? The usage of the context? live reloading? ...? – Hydnocarpate

Answer 2

TLDR:

Do

 .then((r) => {
    console.log('✨ Build succeeded.');

    r.watch();
    console.log('watching...');
  })

Then do node esbuild.config.js without the --watch

Details:

I'm on esbuild v19.12.0

I needed to change the context I get back from the .build

I learned that from reading the docs here https://esbuild.github.io/api/#watch under the JS docs

And altogether if you need... my build.js is

  const envFilePlugin = require('esbuild-envfile-plugin');
const esbuild = require('esbuild');

esbuild
  .context({
    logLevel: 'info',
    entryPoints: ['app/javascript/entrypoints/*.*'],
    bundle: true,
    sourcemap: true,
    outdir: 'app/assets/builds',
    publicPath: 'assets',
    loader: {
      '.png': 'file',
      '.svg': 'file',
      '.jpeg': 'file',
      '.jpg': 'file',
    },
    plugins: [envFilePlugin],
  })
  .then((r) => {
    console.log('✨ Build succeeded.');

    r.watch();
    console.log('watching...');
  })
  .catch(() => process.exit(1));

Platyhelminth