Support ESBuild in serve mode

[jasonwilliams]

When esbuild runs in serve mode it builds and references the main index.html in memory.

this means the relative files it refers to don’t work properly.

here is an example of an error:

✘ [ERROR] [plugin html] Build failed with 1 error:
src/2.js:1:7: ERROR: Could not resolve "./ui-assets/1-7YBC7F6V.js"

  This error came from the "onLoad" callback registered here:

    ../node_modules/esbuild/lib/main.js:845:22:
      845 │         let promise = setup({
          ╵                       ^

    at onTransform (file:///../node_modules/@chialab/esbuild-rna/lib/index.js:469:20)
    at setup (file:///../node_modules/@chialab/esbuild-plugin-html/dist/index.js:61:162844)
    at handlePlugins (/../node_modules/esbuild/lib/main.js:845:23)
    at Object.buildOrServe (/../node_modules/esbuild/lib/main.js:1139:7)
    at /../node_modules/esbuild/lib/main.js:2080:17
    at new Promise (<anonymous>)
    at Object.build (/../node_modules/esbuild/lib/main.js:2079:14)
    at Object.build (/../node_modules/esbuild/lib/main.js:1929:51)
    at file:///../cms/build.mjs:97:9

Error: Build failed with 1 error:
error: Build failed with 1 error:
src/2.js:1:7: ERROR: Could not resolve "./ui-assets/1-7YBC7F6V.js"
    at failureErrorWithLog (/../node_modules/esbuild/lib/main.js:1605:15)
    at /../node_modules/esbuild/lib/main.js:1251:28
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  errors: [
    {
      detail: [Error],
      location: null,
      notes: [Array],
      pluginName: 'html',
      text: 'Build failed with 1 error:\n' +
        'src/2.js:1:7: ERROR: Could not resolve "./ui-assets/1-7YBC7F6V.js"'
    }
  ],
  warnings: []
}

one solution I’ve seen is to accept a new option serve, which will use data URLs for assets instead of generating files.

This may be a workaround until esbuild provides better support.

More info:

• Provide virtual input file system to .build() evanw/esbuild#690 (comment)
• How can I know whether the process is running in esbuild.serve in a plugin? evanw/esbuild#1402

[edoardocavazza]

Latest version of the plugin works with esbuild.serve through the servedir option:

import esbuild from 'esbuild';
import htmlPlugin from '@chialab/esbuild-plugin-html';

await esbuild.serve({
    port: 8000,
    servedir: 'public',
}, {
    entryPoints: ['src/index.html'],
    outdir: 'public',
    plugins: [htmlPlugin()],
    sourcemap: true,
    bundle: true,
});

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.