reuters-graphics/graphics-svelte-components

Path issue with dynamic import in the ai2svelte component

Closed this issue ยท 5 comments

I get this error when I tried to use the component in the boilerplate rig project.

Screenshot 2021-09-29 at 4 04 43 PM

Take a screenshot of your src/ directory for me. Should be something like:

src/
  lib/
    ai2html/
      ai-chart.svelte
    Page.svelte

If so, we may be screwed, b/c the path is searching for ./ai2html inside node_modules where the component is.

This is what it looks like in my boilerplate project. It does seem like the path is searching for ./ai2html inside node_modules

Screenshot 2021-09-29 at 5 12 42 PM

Yeah, more I look at the rules, I think that's exactly what's happening.

This is now relative to node_modules not our src/lib:

Ai2svelteGraphic = (await import(`./ai2html/${componentName}.svelte`)).default;

... so what if we did this instead:

We basically can't package this component in our components lib b/c of that pathing blocker. Instead let's put it directly in our ai2html directory with the example components. This is going to apply to a scrolly version, too, so we'd end up with something like this:

src/
  lib/
    ai2html/
      ai-chart.svelte
      ai-scroller-chart-1.svelte
      ai-scroller-chart-2.svelte
      ai-scroller-chart-3.svelte
      Ai2svelte.svelte # ๐Ÿ‘ˆ
      Ai2svelteScroller.svelte # ๐Ÿ‘ˆ

And then our dynamic imports will look like this within those components:

Ai2svelteGraphic = (await import(`./${componentName}.svelte`)).default;

Sounds good. will add the component back to the boilerplate and delete it from this repo.
fyi, onMount is unnecessary for dynamic loading (I thought it was), so I'll nix onMount too, unless you think otherwise. Taking out onMount makes the graphic load a little faster.

Closing this in favour of the Ai2svelte and Scroller components added in 283294f