Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jon4syth opened this issue Mar 29, 2023 · 3 comments
Open

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

jon4syth opened this issue Mar 29, 2023 · 3 comments
Labels
bug Something isn't working

Comments

@jon4syth
Copy link

I received this error when running mix phx.server for step 5 under the section "Compile Elm via esbuild". I found the same issue on Stack Overflow here https://stackoverflow.com/questions/75221520/invalid-option-in-build-call-watch which indicates that the watch: option was removed starting from esbuild version 0.16.0. The solution I used was to removed the node_modules subfolder in assets/elm and install esbuild via:

node install -D esbuild@0.15.18

I suggest this be added to the README or the instructions updated to use the newer "context" option for esbuild.build() which I admittedly haven't tried yet.

@nelsonic nelsonic added the bug Something isn't working label Mar 29, 2023
@tauling
Copy link
Contributor

tauling commented Apr 27, 2023

I managed to use esbuild 0.17.17 by changes the following files.

assets/elm/build.js

const esbuild = require('esbuild');
const ElmPlugin = require('esbuild-plugin-elm');

async function watch() {
  const ctx = await esbuild.context({
    entryPoints: ['src/index.js'],
    bundle: true,
    outdir: '../js',
    //watch: process.argv.includes('--watch'),
    plugins: [
      ElmPlugin({
        debug: true,
        clearOnWatch: true,
      }),
    ],
  }).catch(_e => process.exit(1))
  await ctx.watch()

  const { host, port } = await ctx.serve({
    servedir: '../',
  })
  console.log(`Access http://localhost:${port} for live reloading.`)
}
watch()

This starts an esbuild live reloading endpoint. In order to connect to the Elm frontend, i created an index.html in the assets directory.

assets/index.html

<html>
<head>
  <meta charset="UTF-8">
  <title>Main</title>
</head>

<body>
  <div id="myapp"></div>
  <script src="js/index.js"></script>
</body>
</html>

assets/elm/src/index.js

import { Elm } from "./Main.elm";

const $root = document.createElement("div");
document.body.appendChild($root);

var app = Elm.Main.init({
  node: $root,
});

// Required by esbuild live reloading server
new EventSource('/esbuild').addEventListener('change', () => location.reload())

@nelsonic
Copy link
Member

@tauling Pull Request updating the files very much welcome. 🙏

@tauling
Copy link
Contributor

tauling commented Apr 27, 2023

i will do so :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants