Sapper: "fetch is not defined" server error when using fetch client-side

[PierBover]

Describe the bug
I'm using fetch client-side which works as expected but keep getting the ReferenceError: fetch is not defined on the terminal whenever a request is made.

I'm on npm run dev.

This is the component located at src/routes/test.svelte:

<script>
    let response;

    try {
        response = fetch('http://www.mocky.io/v2/5e84118f3000005d81cf40da');
    } catch (error) {
        console.log(error);
    }
</script>

{#await response}
    <pre>
        Awaiting...
    </pre>
{:then result}
    <h2>OK</h2>
    <pre>
        {JSON.stringify(result, null, '  ')}
    </pre>
{:catch error}
    <h2>Error</h2>
    <pre>
        {error.toString()}
    </pre>
{/await}

Someone suggested on Discourse it could be a Rollup config thing. I'm using the Sapper default template and only added some aliases. This is the server part:

    server: {
        input: config.server.input(),
        output: config.server.output(),
        plugins: [
            alias(aliasConfig),
            replace({
                'process.browser': false,
                'process.env.NODE_ENV': JSON.stringify(mode)
            }),
            svelte({
                generate: 'ssr',
                dev,
                preprocess
            }),
            resolve({
                dedupe: ['svelte']
            }),
            commonjs()
        ],
        external: Object.keys(pkg.dependencies).concat(
            require('module').builtinModules || Object.keys(process.binding('natives'))
        ),

        onwarn,
    }

Stacktraces

Stack trace

ReferenceError: fetch is not defined
at create_ssr_component (/Volumes/Data/Git/pluma-monorepo/dashboard-sapper/__sapper__/dev/server/server.js:600:3)
at Object.$$render (/Volumes/Data/Git/pluma-monorepo/dashboard-sapper/__sapper__/dev/server/server.js:120:22)
at Object.default (/Volumes/Data/Git/pluma-monorepo/dashboard-sapper/__sapper__/dev/server/server.js:741:86)
at create_ssr_component (/Volumes/Data/Git/pluma-monorepo/dashboard-sapper/__sapper__/dev/server/server.js:643:77)
at Object.$$render (/Volumes/Data/Git/pluma-monorepo/dashboard-sapper/__sapper__/dev/server/server.js:120:22)
at create_ssr_component (/Volumes/Data/Git/pluma-monorepo/dashboard-sapper/__sapper__/dev/server/server.js:738:40)
at $$render (/Volumes/Data/Git/pluma-monorepo/dashboard-sapper/__sapper__/dev/server/server.js:120:22)
at Object.render (/Volumes/Data/Git/pluma-monorepo/dashboard-sapper/__sapper__/dev/server/server.js:128:26)
at handle_page (/Volumes/Data/Git/pluma-monorepo/dashboard-sapper/__sapper__/dev/server/server.js:3116:36)

Information about your Sapper Installation:

• I've tested this on multiple browsers (Brave, Firefox, Safari, Chrome).

• I'm on macOS Mojave 10.14.6

• Sapper version 0.27.12

• Svelte version 3.20.1

• Node v10.16.0

• Running on npm run dev

• Rollup

Severity
Client side everything is working fine... I'm not sure how much of an issue this could be.

[PierBover]

So I changed the fetch line to:

if (process.browser) response = fetch('http://www.mocky.io/v2/5e84118f3000005d81cf40da');

It solves the issue but shouldn't this be unnecessary?

[Conduitry]

This is expected. There's no fetch global in Node, and so there's an exception when running that code there. If you want to handle server- and client-rendered pages in the same way, see preloading. If you only need to make the request on the client, make sure you're doing something to stop it from being run on the server.

[PierBover]

Thanks for clarifying @Conduitry . So the code in <script> is being run on the server because of SSR, is this it?

[arxpoetica]

@PierBover yes. There are a few different ways of navigating this, such as in onMount which is a browser-only life cycle event or via the process.browser replaced variables.

[PierBover]

Thanks @arxpoetica

I was under the impression that it would only get executed client-side since it's part of the component and not <script context="module">.

I imagine if I intend to export this Sapper project to a static site I can ignore this error since there would not be any SSR.

[Fanda36]

Or you can use https://github.com/lquixada/cross-fetch - its cross platform fetch.

import fetch from 'cross-fetch';