Uncaught ReferenceError: sapper is not defined, in main.js Svelte file

I have done the following:

• installed
  • node.js
  • Svelte
  • Sapper
• created
  • client.js
  • server.js

This is my main.js:

import App from './App.svelte';

const app = new App({
    target: document.body,
    props: {
        name: 'Acme Limited'
    }
});

export default app;

client.js:

import * as sapper from '@sapper/app';

sapper.start({
    target: document.querySelector('#sapper')
});

Top of App.svelte:

<script>
  import { writable } from 'svelte/store';
  import * as sapper from '@sapper/app';

My app was working until I added Sapper.

I tried adding this line to main.js:

import * as sapper from '@sapper/app';

The only code of mine that references is Sapper is in the index file:

<!-- src/routes/index.svelte -->
<svelte:head>
    <title>Welcome</title>
</svelte:head>

<h1>Hello, and welcome!</h1>

<nav>
    <a href=".">Home</a>
    <a href="about">About</a>
</nav>

Screenshot:

If you down vote me fine, but then at least leave a comment explaining/hinting what information is missing from my question. Otherwise I don't know what to add. "You don't know about what you don't know", as the old adage goes.

from Recent Questions - Stack Overflow https://ift.tt/3fqn35m
https://ift.tt/3fritUn