observablehq / inspector

The Observable standard inspector.
ISC License
143 stars 20 forks source link

(!) Circular dependencies #178

Closed j2l closed 3 years ago

j2l commented 3 years ago

Hi,

Trying https://observablehq.com/d/b031b9acc6db3c72 with up to date svelte template, when I run npm run dev I get:

bundles src/main.js → public/build/bundle.js...
(!) Circular dependencies
node_modules/@observablehq/inspector/src/collapsed.js -> node_modules/@observablehq/inspector/src/expanded.js -> node_modules/@observablehq/inspector/src/collapsed.js
node_modules/@observablehq/inspector/src/inspect.js -> node_modules/@observablehq/inspector/src/collapsed.js -> node_modules/@observablehq/inspector/src/expanded.js -> node_modules/@observablehq/inspector/src/inspect.js
node_modules/@observablehq/inspector/src/inspect.js -> node_modules/@observablehq/inspector/src/collapsed.js -> node_modules/@observablehq/inspector/src/inspect.js
...and 3 more

in App.svelte I pasted from the example:

<script>
    import { onMount } from 'svelte'
    import {Runtime, Inspector} from '@observablehq/runtime'
    import notebook from "https://api.observablehq.com/d/b031b9acc6db3c72.tgz?v=3";

    let animationRef

    onMount(() => {
        const runtime = new Runtime()
        runtime.module(notebook, name => {
            if (name === "animation") {
        return new Inspector(animationRef)
      }
    })
  })
</script>

I also tried with another local script and no inspector

<script>
    import { onMount } from 'svelte'
    import {Runtime} from '@observablehq/runtime'
    import define from "./d86e75dcb11eba71@319.js";

    onMount(() => {
        const runtime = new Runtime()
        runtime.module(define, name => {
        })
    })
</script>

without luck.

No idea why the Inspector throws this error or how to make this example work. Any idea?

mbostock commented 3 years ago

The circular dependencies are just noise that Rollup generates and do not affect the behavior of the code.

It looks like you are trying to import from a .tgz URL. Did you meant to say .js here?

import notebook from "https://api.observablehq.com/d/b031b9acc6db3c72.tgz?v=3"; 

Also for this to work, you’ll need to publish your notebook (unlisted, if you like). Alternatively you can use the Download code action in the notebook menu to get a local copy.

If you need further assistance please ask for help at https://talk.observablehq.com. Thanks!

j2l commented 3 years ago

Thanks @mbostock FTR, I also noted that import { Runtime, Inspector } from "./runtime"; with the runtime.js from the tgz doesn't throw errors. Maybe ObesrvableHQ should evaluate Svelte to export. There are so close and on different markets. :smiley_cat: