[plugin-svelte] rollup-plugin-svelte needs to get passed pluginOptions (probably)

[m4rrc0]

Hey,

I am so sorry that I don't have time to expand on this and test thoroughly but if I don't post now I will never do it...

The issue is there.

  snowpackConfig.installOptions.rollup.plugins.push(
-    svelteRollupPlugin({include: '**/node_modules/**'}),
+    svelteRollupPlugin({include: '**/node_modules/**', ...pluginOptions}),
  );

I think this is only relevant when we start playing with SSR and we import components from node_modules.
If we don't do that, we get <Component> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules.

I am not using Snowpack the way most people do so this info should be verified in a more typical context.

[m4rrc0]

In fact, it should even be placed after we merge all svelteOptions from the svelte.config.js file, there.

module.exports = function plugin(snowpackConfig, pluginOptions = {}) {
  let svelteOptions;
  let preprocessOptions;
  const userSvelteConfigLoc = path.join(process.cwd(), "svelte.config.js");
  if (fs.existsSync(userSvelteConfigLoc)) {
    const userSvelteConfig = require(userSvelteConfigLoc);
    const { preprocess, ..._svelteOptions } = userSvelteConfig;
    preprocessOptions = preprocess;
    svelteOptions = _svelteOptions;
  }
  // Generate svelte options from user provided config (if given)
  svelteOptions = {
    dev: process.env.NODE_ENV !== "production",
    css: false,
    ...svelteOptions,
    ...pluginOptions,
  };

  // Support importing Svelte files when you install dependencies.
  snowpackConfig.installOptions.rollup.plugins.push(
    svelteRollupPlugin({ include: "**/node_modules/**", ...svelteOptions })
  );

...........

[FredKSchott]

I'm curious, if you comment out that plugin entirely:

//  snowpackConfig.installOptions.rollup.plugins.push(
//    svelteRollupPlugin({include: '**/node_modules/**'}),
//  );

what happens? The error that you're seeing ("review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules") seems to indicate that this would work.

[FredKSchott]

This fix may be a bit tricky, but necessary as a part of SSR work. It's tricky because we haven't yet considered that SSR would require a different set of dependencies from the non-SSR build.

PS: do you know about the wip-ssr branch that we're testing SSR work on? You'll see a few fixes and improvements there vs. the latest version published to npm.

[m4rrc0]

I am currently testing with svelte-routing because I know it supports SSR and I have it working with the fix mentioned above.

I'm curious, if you comment out that plugin entirely

It doesn't work.
I either get <Router> is not a valid SSR component. or Failed to load node_modules/svelte-routing/src/Router.svelte depending on how I try to import things.

What seem to work for me, both on the client and SSR, is the fix mentioned above and import { Router, Link, Route } from 'svelte-routing';

I am curious to understand why you think skipping the rollup-plugin-svelte should work. I am happy to make more tests if I understand where you are going with this.

I should mention that I am using SSR compiled components to create static html files during build. I am not really 'server-rendering' the website. I don't know if it has an impact on the idea you were suggesting.

PS: do you know about the wip-ssr branch that we're testing SSR work on? You'll see a few fixes and improvements there vs. the latest version published to npm.

I didn't. Is there an outline somewhere of what you are trying to accomplish and how?
I have just had a look at the svelte plugin on that branch. Do you process dependencies differently somewhere else in the code base with the SSR flag? If not, it seems to me you should suffer from the problem I mention here...

Well, I'll go on with my experimentations and report back if I have news.