Sapper with webpack

[helloalbin]

Hi,
How can I use this with sapper and webpack?

Regards
-Albin

[3CordGuy]

@thirtysixmm I just got this working for me last night in webpack like this

Note: I have a preprocess plugin I am using for tailwind, so you may not need the array for preprocess like I have.

Also, I have this in my client and server configs.

...
module: {
      rules: [
        {
          test: /\.(svelte|html)$/,
          use: {
            loader: 'svelte-loader',
            options: {
              dev,
              hydratable: true,
              hotReload: false, // pending https://github.com/sveltejs/svelte/issues/2377
              preprocess: [
                require('svelte-preprocess')(preprocessOptions),
                require('svelte-image')(options),
              ],
            },
          },
        },
      ],
    },
...

[happysalada]

Thanks a lot for that config! it definitely works for me on dev.
I can't figure out how to make it work on export. Still fiddling with stuff, will update if I find a solution.

[happysalada]

I gave up trying to use it with webpack. If you look in the /dev directory there is a decent rollup config that worked no problem.

[berndartmueller]

I'm also struggling with svelte-image and SSR. I have following webpack config, client and server the same:

const svelteImageOptions = {
  placeholder: 'blur',
};
...
{
  test: /\.(svelte|html)$/,
  use: {
    loader: 'svelte-loader',
    options: {
      dev,
      hydratable: true,
      hotReload: false,
      preprocess: [require('svelte-image')(svelteImageOptions)],
    },
  },
}

It works great on client rendering, but inspecting the SSR html shows missing a image:

<div class="wrapper   svelte-142y8oi" style="min-height: 100px; width: 100%"></div>

Any idea? Thanks a lot!

EDIT: It seems SSR does simply not work with svelte-waypoint

[webspilka]

I have same problem, but my image is missing only for window width from 1700 to 1741 px.
When i reduced the size of the browser window, the picture starts to display
https://share.getcloudapp.com/jkuek50r
https://www.test.c.co.ua/

<div class="svelte-142y8oi wrapper" style=min-height:100px;width:100%></div>

[webspilka]

I have same problem, but my image is missing only for window width from 1700 to 1741 px.

offset="200" - fix my problem

<Image offset="200" src="/images/hero.png" />