woutdp / live_svelte

Svelte inside Phoenix LiveView with seamless end-to-end reactivity
https://hexdocs.pm/live_svelte
MIT License
1.01k stars 37 forks source link

Unable to run the example project #109

Closed samrat closed 5 months ago

samrat commented 5 months ago

Hello, I'm trying to run the example_project using the steps listed in the README, but I get the following error:

Done in 181ms.
1 error
[watch] build finished, watching for changes...
1 error
[watch] build finished, watching for changes...
/Users/samrat/code/live_svelte/example_project/assets/node_modules/esbuild/lib/main.js:1604
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 1 error:
js/server.js:2:24: ERROR: Could not resolve "live_svelte"
    at failureErrorWithLog (/Users/samrat/code/live_svelte/example_project/assets/node_modules/esbuild/lib/main.js:1604:15)
    at /Users/samrat/code/live_svelte/example_project/assets/node_modules/esbuild/lib/main.js:1056:28
    at runOnEndCallbacks (/Users/samrat/code/live_svelte/example_project/assets/node_modules/esbuild/lib/main.js:1476:61)
    at buildResponseToResult (/Users/samrat/code/live_svelte/example_project/assets/node_modules/esbuild/lib/main.js:1054:7)
    at /Users/samrat/code/live_svelte/example_project/assets/node_modules/esbuild/lib/main.js:1166:14
    at responseCallbacks.<computed> (/Users/samrat/code/live_svelte/example_project/assets/node_modules/esbuild/lib/main.js:701:9)
    at handleIncomingPacket (/Users/samrat/code/live_svelte/example_project/assets/node_modules/esbuild/lib/main.js:756:9)
    at Socket.readFromStdout (/Users/samrat/code/live_svelte/example_project/assets/node_modules/esbuild/lib/main.js:677:7)
    at Socket.emit (node:events:527:28)
    at addChunk (node:internal/streams/readable:324:12) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 24,
        file: 'js/server.js',
        length: 13,
        line: 2,
        lineText: 'import {getRender} from "live_svelte"',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: {
            column: 18,
            file: 'node_modules/live_svelte/package.json',
            length: 34,
            line: 22,
            lineText: '        "import": "./priv/static/live_svelte.esm.js",',
            namespace: '',
            suggestion: ''
          },
          text: 'The module "./priv/static/live_svelte.esm.js" was not found on the file system:'
        },
        {
          location: null,
          text: 'You can mark the path "live_svelte" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "live_svelte"'
    }
  ],
  warnings: []
}

Node.js v18.0.0
[error] Task #PID<0.510.0> started from ExampleWeb.Endpoint terminating
** (stop) :watcher_command_error
    (phoenix 1.7.10) lib/phoenix/endpoint/watcher.ex:55: Phoenix.Endpoint.Watcher.watch/2
    (elixir 1.16.0) lib/task/supervised.ex:101: Task.Supervised.invoke_mfa/2
Function: &Phoenix.Endpoint.Watcher.watch/2
    Args: ["node", ["build.js", "--watch", {:cd, "/Users/samrat/code/live_svelte/example_project/assets"}]]
✘ [ERROR] Could not resolve "live_svelte"

    js/server.js:2:24:
      2 │ import {getRender} from "live_svelte"
        ╵                         ~~~~~~~~~~~~~

  The module "./priv/static/live_svelte.esm.js" was not found on the file system:

    node_modules/live_svelte/package.json:22:18:
      22 │         "import": "./priv/static/live_svelte.esm.js",
         ╵                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

✘ [ERROR] Could not resolve "live_svelte"

    js/app.js:25:23:
      25 │ import {getHooks} from "live_svelte"
         ╵                        ~~~~~~~~~~~~~

  The module "./priv/static/live_svelte.esm.js" was not found on the file system:

    node_modules/live_svelte/package.json:22:18:
      22 │         "import": "./priv/static/live_svelte.esm.js",
         ╵                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

Is there anything else I need to run to get the project running?

woutdp commented 5 months ago

You might need to run mix assets.build in the root directory (one level aboce the example_project directory). If that works let me know, I'll update the readme

samrat commented 5 months ago

That worked. Thanks!