onMount not being called with esbuild

[douglasward]

I experienced this problem whilst putting together #217 but it always went away again if I did a clean install of @Elderjs.

Now however, even if I clone the template as stated in the documentation with npx degit Elderjs/template elderjs-app, the onMount hook from svelte still isn't called when running the local server with esbuild. Resulting in the clock not ticking for example.

I have tried different node versions (12, 14, 17) and tried downgrading esbuild (even back to 0.12.4) but nothing seems to help.

Using rollup with yarn dev works fine...

Do you have any idea what the problem might be? Or where I could carry on digging?

[nickreese]

Sorry for the delay on the PR. Been OOO a lot recently.

Make sure you’re in. A Svelte component and not a route or layout svelte file. Try that if you can.

[douglasward]

No worries, but good to know you've seen it!

Well it is the default template that I am currently "testing" with. The clock component there is definitely a Svelte component and you use it to demonstrate component hydration...

... which was working for me perfectly 2 weeks ago, apart from my adventures into changing the default src directory for esbuild.

But now, with a fresh checkout and install, it doesn't. Only if you use rollup instead of esbuild.

[douglasward]

Just asked a colleague to try as well and he confirmed, esbuild doesn't call the onMount hook.

I'm thinking it must be a dependency that has updated seeing as nothing in elderjs has changed. My first bet was esbuild itsself, but unless I did something wrong, downgrading it didn't solve the problem.

[nickreese]

Super strange, fresh repo to test and can't recreate.

Any errors in the console?

Can you find the mount code?

It looks like so in the default for me:

   <script type="module">
            const requestIdleCallback = window.requestIdleCallback || ( cb => window.setTimeout(cb,1) );
      
const $$ejs = (par,eager)=>{
  const $ejs = function(_ejs){return _ejs};
  const prefix = '/_elderjs';
  const initComponent = (target, component) => {
    const propProm = ((typeof component.props === 'string') ? fetch(prefix+'/props/'+ component.props).then(p => p.json()).then(r => $ejs(r)) : new Promise((resolve) => resolve($ejs(component.props))));
    const compProm = import(prefix + '/svelte/components/' + component.component);

    Promise.all([compProm,propProm]).then(([comp,props])=>{
      new comp.default({ 
        target: target,
        props: props,
        hydrate: true
      });
    });
  };
  const IO = ('IntersectionObserver' in window) ? new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        observer.unobserve(entry.target);
        const selected = par[entry.target.id];
        initComponent(entry.target,selected)
      }
    });
  }, { rootMargin: "200px",threshold: 0}) : undefined;
  Object.keys(par).forEach(k => {
    const el = document.getElementById(k);
    if (!eager && IO) {
        IO.observe(el);
    } else {
        initComponent(el,par[k]);
    }
  });
};

      
      requestIdleCallback(function(){
        $$ejs({'clockJZtQvlQQKb' : { 'component' : 'Clock.4YSKKBRU.js', 'props' : {}},})}, {timeout: 1000});</script>

[nickreese]

Can you confirm that esbuild is outputting the code into your [distDir]/_elderjs/svelte/components/ folder for the clock?

[nickreese]

OK, got it to happen. Weird. Appears to be some sort of weird race condition caused by the browser reload plugin.

Try this in your elder.config.js:

    '@elderjs/plugin-browser-reload': {
      // this reloads your browser when nodemon restarts your server.
      port: 8080,
      delay: 1000,
      reload: true, // if you are having issues with reloading not working, change to true.
    },

Next time it happens, try to manually reload the page and see if it is still happening. For me that is how I caught the issue.

[douglasward]

I definitely tried manually reloading the page and hard refreshing. I'll check the other things now

[douglasward]

Mount code is there:

    <script type="module">
            const requestIdleCallback = window.requestIdleCallback || ( cb => window.setTimeout(cb,1) );
      
const $$ejs = (par,eager)=>{
  const $ejs = function(_ejs){return _ejs};
  const prefix = '/_elderjs';
  const initComponent = (target, component) => {
    const propProm = ((typeof component.props === 'string') ? fetch(prefix+'/props/'+ component.props).then(p => p.json()).then(r => $ejs(r)) : new Promise((resolve) => resolve($ejs(component.props))));
    const compProm = import(prefix + '/svelte/components/' + component.component);

    Promise.all([compProm,propProm]).then(([comp,props])=>{
      new comp.default({ 
        target: target,
        props: props,
        hydrate: true
      });
    });
  };
  const IO = ('IntersectionObserver' in window) ? new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        observer.unobserve(entry.target);
        const selected = par[entry.target.id];
        initComponent(entry.target,selected)
      }
    });
  }, { rootMargin: "200px",threshold: 0}) : undefined;
  Object.keys(par).forEach(k => {
    const el = document.getElementById(k);
    if (!eager && IO) {
        IO.observe(el);
    } else {
        initComponent(el,par[k]);
    }
  });
};

      
      requestIdleCallback(function(){
        $$ejs({'clockMmFnFfsVmX' : { 'component' : 'Clock.536SFERD.js', 'props' : {}},})}, {timeout: 1000});</script>

and setting a breakpoint in the instance function of the clock also gets triggered, but a breakpoint in onMount doesn't.

function instance($$self, $$props, $$invalidate) {
	let hours;
	let minutes;
	let seconds;
	let time = new Date();

	onMount(() => {
		const interval = setInterval(
			() => {
				$$invalidate(3, time = new Date());
			},
			1000
		);
...

Can you confirm that esbuild is outputting the code into your [distDir]/_elderjs/svelte/components/ folder for the clock?

yes, it is

[douglasward]

I read somewhere about deduping svelte... just a shot in the dark, but could this have something to do with it?

[nickreese]

Can you run npx envinfo --system --npmPackages svelte,rollup --binaries --browsers ? I'm wondering if the new version of Svelte could be causing it.

[douglasward]

  System:
    OS: macOS 11.6
    CPU: (8) x64 Apple M1
    Memory: 48.16 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.22.3 - ~/.asdf/installs/nodejs/12.22.3/bin/node
    Yarn: 1.22.10 - ~/.asdf/shims/yarn
    npm: 6.14.13 - ~/.asdf/installs/nodejs/12.22.3/bin/npm
  Browsers:
    Brave Browser: 93.1.29.81
    Chrome: 95.0.4638.69
    Firefox: 94.0.1
    Safari: 15.0
  npmPackages:
    rollup: ^2.41.1 => 2.59.0
    svelte: 3.43.2 => 3.43.2

[douglasward]

yes!!! downgrading to 3.42.6 fixes it for me

[douglasward]

going to 3.43.0 breaks it again. So something must've changed in that version that is causing this behaviour

[eight04]

elderjs/src/esbuild/esbuildBundler.ts

Line 158 in bf528f1

platform: 'node',

This should be "browser".