`No loader configured for ".vue" files` with `serve`

[luopio]

I have a very simple setup with an example Vue app. Replacing the vue-cli tooling with esbuild was a breeze. Build works fine, but I'm failing to get serve working.

My build script that works just fine (also a version with watch has no issues):

const vuePlugin = require("esbuild-plugin-vue3");
const manifestPlugin = require("esbuild-plugin-manifest");

const BUILD_OPTIONS = {
  entryPoints: ['src/App.vue'],
  bundle: true,
  outfile: 'dist/app.js',
  plugins: [vuePlugin(), manifestPlugin()],
  loader: { '.png': 'binary' },
}

require('esbuild').build(
  BUILD_OPTIONS
).catch(() => process.exit(1))

module.exports = { BUILD_OPTIONS };

My failing serve.js is this:

const { BUILD_OPTIONS } = require("./build");

require('esbuild').serve(
  {
    servedir: 'dist',
    port: 8000,
  },
  BUILD_OPTIONS
  ).then(server => {
    console.log("Server stopped")
    server.stop()
  })

When I run it I get:

$ node serve.js                             
Server stopped
 > error: No loader is configured for ".vue" files: src/App.vue

Any tips would be very much appreciated.

$ ./node_modules/.bin/esbuild --version
0.12.26

[evanw]

This is caused by starting the server and then stopping it immediately. This causes the plugins to be unregistered while a build is still happening, which causes the error about no plugin being registered for .vue files. I can try to handle server shutdowns better within esbuild itself.

However, in this case but you'll still want to not stop the server immediately after you start it if you want to be able to use the server. So you should do something like this:

 require('esbuild').serve(
   {
     servedir: 'dist',
     port: 8000,
   },
   BUILD_OPTIONS
   ).then(server => {
-    console.log("Server stopped")
-    server.stop()
   })

You may also want to consider not having serve.js both do a build and start a server (doing a build is currently a side effect of requiring build.js). That will avoid doing wasted work. One way to fix that would be something like this:

+if (require.main === module) {
   require('esbuild').build(
     BUILD_OPTIONS()
   ).catch(() => process.exit(1))
+}