Static site with an endpoint fails when adding @storybook/svelte dependency

[tyom]

Describe the bug

• Create a simple app with adapter-static which loads data from a local JSON endpoint.
• Run svelte-kit build to successfully build the app
• Add @storybook/svelte (or @storybook/addon-essentials) dependency
• Run svelte-kit build to fail the build with 500 / error (same error if using incorrect endpoint name)

The issue only happens when building the app. It works as expected when running svelte-kit dev.

I'm not sure whether the issue is with Storybook or Svelte Kit. Raising it here as it seems specific to Svelte Kit.

Logs

Server log

> Using @sveltejs/adapter-static
> 500 /
Error: 500 /
    at error (file:///Users/tyom/tmp/svelte-kit-storybook/node_modules/@sveltejs/kit/dist/chunks/index6.js:526:11)
    at visit (file:///Users/tyom/tmp/svelte-kit-storybook/node_modules/@sveltejs/kit/dist/chunks/index6.js:581:5)
    at async prerender (file:///Users/tyom/tmp/svelte-kit-storybook/node_modules/@sveltejs/kit/dist/chunks/index6.js:684:5)
    at async AdapterUtils.prerender (file:///Users/tyom/tmp/svelte-kit-storybook/node_modules/@sveltejs/kit/dist/chunks/index6.js:745:4)
    at async adapt (/Users/tyom/tmp/svelte-kit-storybook/node_modules/@sveltejs/adapter-static/index.js:10:4)
    at async adapt (file:///Users/tyom/tmp/svelte-kit-storybook/node_modules/@sveltejs/kit/dist/chunks/index6.js:767:2)
    at async file:///Users/tyom/tmp/svelte-kit-storybook/node_modules/@sveltejs/kit/dist/cli.js:633:5

To Reproduce

A minimum reproduction app can be found at tyom/repro-svelte-kit-build-fail. There are two commits that show the working example (without Storybook dependency) and failing (with Storybook dependency).

Expected behavior

Svelte Kit should build the static site with Storybook present in dev dependencies.

Information about your SvelteKit Installation:

Diagnostics

  System:
    OS: macOS 11.2.3
    CPU: (8) x64 Apple M1
    Memory: 141.55 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.21.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 89.1.22.70
    Chrome: 89.0.4389.114
    Chrome Canary: 91.0.4466.0
    Firefox: 86.0.1
    Safari: 14.0.3
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.71
    svelte: ^3.37.0 => 3.37.0
    vite: ^2.1.5 => 2.1.5
  

Severity

This issue prevents me from havubg Storybook dependency in the same package.json as the Svelte app, which has local endpoints that fetch data in load function.

[benmccann]

Here's an example of getting Storybook working with SvelteKit: https://github.com/tejasag/sveltetron-9000

[tyom]

The linked example also fails to build, although for a different reason:

> Using @sveltejs/adapter-node
(node:89804) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
> Cannot use import statement outside a module
/Users/tyom/tmp/sveltetron-9000/.svelte/output/server/app.js:1
import {randomBytes, createHash} from "crypto";
^^^^^^

SyntaxError: Cannot use import statement outside a module

It runs with svelte-kit dev. Even with fixing the error (by adding "type": "module" in package.json I can still reproduce the issue.

• Use @sveltejs/adapter-static adapter.
• Add test.json.js path with the following contents

export async function get() {
  return {
    body: {
      title: 'test'
    },
  };
}

• Add context script in index.svelte with the following contents

<script context="module">
  export async function load({ fetch }) {
    const getData = (resourceName) =>
      fetch(resourceName).then((res) => res.json());

    return {
      props: {
        content: await getData(`/test.json`),
      },
    };
  }
</script>

• Run yarn build and observe the same issue 500 /.
• Remove both @storybook/svelte and @storybook/addon-essentials dependencies, re-run install and try to build. It succeeds.

[tyom]

@benmccann The issue is still there. Even in the repo you linked. In fact, the minimal repro repo I linked shows that the issue has nothing to do with how Storybook is configured. It seems to be affected by the presence of the JSON endpoint and Storybook dependency, which somehow interferes with the kit build process.

[benmccann]

Some ideas:

• Upgrade to Node 14
• Try the steps in https://github.com/sveltejs/kit/blob/master/documentation/faq/70-packages.md

[tyom]

I tried Node 14 and played with Vite's ssr.noExternal and optimizeDeps.exclude to no avail.

I followed the dependencies and starting with @storybook/svelte eliminated sub-dependencies until the build succeeded. I narrowed it down to Webpack 4. Just by adding Webpack 4 as a dependency to Svelte Kit static site project and by using the JSON endpoints it somehow ruins the build.

Note difference in the modules transformed count.

[benmccann]

Hmm. It's a bit weird to include Webpack in a Vite application as they're both bundlers and that's duplicate functionality. The solution for this probably is storybookjs/storybook#14024

In the meantime maybe you can find an alternative that doesn't depend on Webpack like https://github.com/rixo/svench

[tyom]

It is a bit odd that Webpack is included as core dependency (it's the dependency of @storybook/core-server ← @storybook/core ← @storybook/svelte).

At least I know the exact package that causes the problem. I'll keep an eye on that issue you linked. I'll also try out Svench. Never heard of it. Thanks.

[tyom]

For anyone interested.

I followed the dependencies further and narrowed it down to node-libs-browser (v2.2.1). When I add that package to the dev dependencies of min repro repo it fails to build with 500 / for the JSON endpoint. Adding that package's dependencies on their own results in the successful build. I cannot narrow it down any further.