esbuild 0.17 build & watch steps work completely differently

[aiwaiwa]

esbuild broke the way build works starting with 0.17.0 and I'm trying to make it work with live_svelte.

• Phoenix 1.7.2
• Win11
• esbuild "^0.17.19"

I did a bit of fiddling and tried to:

1. remove any "watch" in optClient and optsServer in build.js:

//
// Comment out usage of "watch" in optClient and optsServer
//    // watch,
//

// const client = esbuild.build(optsClient)
// const server = esbuild.build(optsServer)

// if (watch) {
//     client.then(_result => {
//         process.stdin.on("close", () => process.exit(0))
//         process.stdin.resume()
//     })

//     server.then(_result => {
//         process.stdin.on("close", () => process.exit(0))
//         process.stdin.resume()
//     })
// }
const ctx0 = esbuild.context(optsClient)

ctx0.then(v => {
    if (watch) {
        v.watch().then(v => {

        })
        v.dispose();
    }
});

const ctx1 = esbuild.context(optsServer)

ctx1.then(v => {
    if (watch) {
        v.watch().then(v => {

        })
        v.dispose();
    }
});

(I know I would want to use "await" but esbuild is not happy that it's top-level)

I also ended up adding a bunch of dependencies to package.json not mentioned in the README:

{
  "devDependencies": {
  },
  "dependencies": {
    "esbuild": "^0.17.19",

    "esbuild-svelte": "^0.7.3",
    "esbuild-plugin-import-glob": "^0.1.1",
    "svelte-preprocess": "^5.0.4",

    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view"
  }
}

I feel I'm close. The only error I'm getting is this one:

mix.bat phx.server
[info] Running ProjectWeb.Endpoint with cowboy 2.10.0 at 127.0.0.1:4000 (http)
[info] Access ProjectWeb.Endpoint at http://localhost:4000
[watch] build finished, watching for changes...
[watch] build finished, watching for changes...
X [ERROR] Could not resolve "live_svelte"

    js/app.js:31:25:
      31 Γöé import { getHooks } from "live_svelte"
         Γò╡                          ~~~~~~~~~~~~~

  You can mark the path "live_svelte" as external to exclude it from the bundle, which will remove this error.

1 error

Rebuilding...

Done in 454ms.

So I wonder if there's any hints for me. I love where this project is going VERY much! Now I would love it to actually work too 🥇

[woutdp]

Make sure you have live_svelte as a dependency in your package.json:

"dependencies": {
    "live_svelte": "file:../deps/live_svelte",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view"
}

I think that will fix the last error you're having. Let me know if this works and I'll close the issue.

As for the new esbuild version, it's something I'm aware of but haven't gotten around to fixing yet, the issue is being tracked here https://github.com/woutdp/live_svelte/issues/29. The reason was that it wasn't working on fly.io for some reason for me. This might be specific to me though. Feel free to use the latest version esbuild in your own setup if it works for you!

I'll be using live_svelte in production probably in the coming weeks, I'll experiment with the latest version of esbuild and if it works then I'll be updating the esbuild in LiveSvelte.

Happy you're enjoying the project :)

[aiwaiwa]

Hey thank you, adding "live_svelte" made it at lease pass the error compilation stage!

I ended up having this config:

  "dependencies": {
    "esbuild": "^0.17.19",

    "live_svelte": "file:../deps/live_svelte",

>    "esbuild-svelte": "^0.7.3",
>    "esbuild-plugin-import-glob": "^0.1.1",
>    "svelte-preprocess": "^5.0.4",

    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view"
  }

Without esbuild-svelte I encounter:

iex> [error] Task #PID<0.734.0> started from ProjectWeb.Endpoint terminating
** (stop) :watcher_command_error
    (phoenix 1.7.2) lib/phoenix/endpoint/watcher.ex:55: Phoenix.Endpoint.Watcher.watch/2
    (elixir 1.14.4) lib/task/supervised.ex:89: Task.Supervised.invoke_mfa/2
    (stdlib 4.0.1) proc_lib.erl:240: :proc_lib.init_p_do_apply/3
Function: &Phoenix.Endpoint.Watcher.watch/2
    Args: ["node", ["build.js", "--watch", {:cd, "c:/Users/user/Desktop/Projects/project/assets"}]]
iex> node:internal/modules/cjs/loader:1085
  throw err;
  ^

Error: Cannot find module 'esbuild-svelte'
Require stack:
- c:\Users\user\Desktop\Projects\project\assets\build.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1082:15)
    at Module._load (node:internal/modules/cjs/loader:928:27)
    at Module.require (node:internal/modules/cjs/loader:1149:19)
    at require (node:internal/modules/helpers:121:18)
    at Object.<anonymous> (c:\Users\user\Desktop\Projects\project\assets\build.js:2:22)
    at Module._compile (node:internal/modules/cjs/loader:1267:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1321:10)
    at Module.load (node:internal/modules/cjs/loader:1125:32)
    at Module._load (node:internal/modules/cjs/loader:965:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ 'c:\\Users\\user\\Desktop\\Projects\\project\\assets\\build.js' ]
}

[woutdp]

You do need esbuild-svelte

Here's an example of a package.json file: https://github.com/woutdp/live_svelte/blob/master/example_project/assets/package.json#L7

[aiwaiwa]

Thank you!