search

zodern / melte

Svelte compiler for Meteor with built in tracker integration and HMR
MIT License
33 stars 14 forks source link

server side rendering is not working. #20

Closed Sergeant61 closed 2 years ago

Sergeant61 commented 2 years ago

Hi I'm new to Svelte and trying to learn. In general, I developed a simple chat application Meteor+Svelte. The application I'm extending is a SPA while I was looking at how to convert it to an SSR application, I looked at the example you gave here. I wanted to try it simply using the server-render package, unfortunately zodern:melte is not used here. When I try with this package, I get the following error.

W20220122-09:17:31.228(3)? (STDERR) Error: Cannot find package "zodern:melte". Try "meteor add zodern:melte".
W20220122-09:17:31.228(3)? (STDERR)     at makeInstallerOptions.fallback (packages/modules-runtime.js:611:13)
W20220122-09:17:31.228(3)? (STDERR)     at Module.require (packages/modules-runtime.js:244:14)
W20220122-09:17:31.228(3)? (STDERR)     at Module.moduleLink [as link] (/Users/recepozen/.meteor/packages/modules/.0.18.0.10yctwz.y5qa++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/@meteorjs/reify/lib/runtime/index.js:52:22)
W20220122-09:17:31.229(3)? (STDERR)     at module (imports/app/public/components/Messages.svelte:84:18)
W20220122-09:17:31.229(3)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:336:7)
W20220122-09:17:31.229(3)? (STDERR)     at Module.require (packages/modules-runtime.js:238:14)
W20220122-09:17:31.229(3)? (STDERR)     at Module.moduleLink [as link] (/Users/recepozen/.meteor/packages/modules/.0.18.0.10yctwz.y5qa++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/@meteorjs/reify/lib/runtime/index.js:52:22)
W20220122-09:17:31.229(3)? (STDERR)     at module (imports/app/public/pages/chat/Chat.svelte:24:43)
W20220122-09:17:31.229(3)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:336:7)
W20220122-09:17:31.229(3)? (STDERR)     at Module.require (packages/modules-runtime.js:238:14)
W20220122-09:17:31.229(3)? (STDERR)     at Module.moduleLink [as link] (/Users/recepozen/.meteor/packages/modules/.0.18.0.10yctwz.y5qa++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/@meteorjs/reify/lib/runtime/index.js:52:22)
W20220122-09:17:31.229(3)? (STDERR)     at module (imports/app/public/components/Rooms.svelte:73:19)
W20220122-09:17:31.229(3)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:336:7)
W20220122-09:17:31.229(3)? (STDERR)     at Module.require (packages/modules-runtime.js:238:14)
W20220122-09:17:31.229(3)? (STDERR)     at Module.moduleLink [as link] (/Users/recepozen/.meteor/packages/modules/.0.18.0.10yctwz.y5qa++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/@meteorjs/reify/lib/runtime/index.js:52:22)
W20220122-09:17:31.229(3)? (STDERR)     at module (imports/app/public/components/Rooms.svelte:73:19)
W20220122-09:17:31.229(3)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:336:7)
W20220122-09:17:31.229(3)? (STDERR)     at Module.require (packages/modules-runtime.js:238:14)
W20220122-09:17:31.229(3)? (STDERR)     at Module.moduleLink [as link] (/Users/recepozen/.meteor/packages/modules/.0.18.0.10yctwz.y5qa++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/@meteorjs/reify/lib/runtime/index.js:52:22)
W20220122-09:17:31.229(3)? (STDERR)     at module (imports/app/user/pages/dashboard/Dashboard.svelte:8:5)
W20220122-09:17:31.230(3)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:336:7)
W20220122-09:17:31.230(3)? (STDERR)     at Module.require (packages/modules-runtime.js:238:14)

The code I added for SSR;

Client ;

import App from '../imports/app/App.svelte';
import { onPageLoad } from 'meteor/server-render';

onPageLoad(() => {
  new App({
    target: document.querySelector('#app'),
    hydrate: true
  });
});

Server;

import { onPageLoad } from 'meteor/server-render'
import App from '/imports/app/App.svelte'

onPageLoad((sink) => {
  console.log(sink);
  const { html, css } = App.render();

  sink.appendToHead(`<style>${css.code}</style>`);
  sink.renderIntoElementById('root', html);
});

My code without SSR is available here, how can I provide SSR support with zodern:melte. Is this possible? If possible, how should I do it?

zodern commented 2 years ago

Thanks for opening the issue @Sergeant61. This is fixed in version 1.5.1.