Sapper: 'import' and 'export' may only appear at the top level

[TheBeachMaster]

Describe the bug
On fresh Sapper project , running sapper dev results into an unknown error 'import' and 'export' may only appear at the top level

Running sapper build proceeds with no fail

Logs

$ yarn run dev
yarn run v1.22.4
warning package.json: No license field
$ sapper dev
✗ client
'import' and 'export' may only appear at the top level
11: }
12: 
13: export function connect(port) {
    ^
14:   if (source || !window.EventSource) return;
✔ server (719ms)
✔ service worker (180ms)
> Listening on http://localhost:3000

To Reproduce

• git clone the sapper-rollup-template
  git clone https://github.com/sveltejs/sapper-template-rollup.git
• Install dependencies
  yarn or npm install
• Run develop
  yarn run dev or npm run dev

Expected behavior
Application runs with no problems

Stacktraces
If you have a stack trace to include, we recommend putting inside a <details> block for the sake of the thread's readability:

Stack trace

$ yarn run dev
yarn run v1.22.4
warning package.json: No license field
$ sapper dev
✗ client
'import' and 'export' may only appear at the top level
11: }
12: 
13: export function connect(port) {
    ^
14:   if (source || !window.EventSource) return;
✔ server (719ms)
✔ service worker (180ms)
> Listening on http://localhost:3000

Information about your Sapper Installation:

• Your browser and the version: not applicable

• Your operating system: MacOS 10.15.4

• Your hosting environment: Local

• Sapper version ^0.27.0 and ^0.27.12

• Svelte version ^3.0.0 and ^3.20.1

• dynamic application.

• Rollup

Severity

Medium

Blocking usage of Sapper as local development can not run

Additional context
sapper build works

[matt3224]

Also seeing this

[TheBeachMaster]

@matt3224 My current hack is to build and run npm start ... Not a fun way to develop

[matt3224]

I just rolled plugin-commonjs back to 11.0.2 and removed the ^ for now, will try again on the next version

[TheBeachMaster]

@matt3224 Excellent hack... Thanks 👍

[flayks]

Same issue here

[matt3224]

I'll link to the issue up on rollup/plugins https://github.com/rollup/plugins/issues/304

[Jabher]

Just encountered same error.

Everything gets fixed if rollup-dev-server.js will be changed in the following manner:

module.exports.connect = function connect(port) {

this is happening due to transformCommonjs function in @rollup/plugin-commonjs which (probably incorrectly, but unsure) detects this file as commonjs (not mjs) and wraps it with

wrapperStart = `var ${moduleName} = ${HELPERS_NAME}.createCommonjsModule(function (${args}) {\n`;
wrapperEnd = `\n});`;

[codri]

As mentioned above, going to node_modules/sapper/sapper-dev-client.js and changing

export function connect(port) {
    if (source || !window.EventSource) return;

To

module.exports.connect = function connect(port) {
    if (source || !window.EventSource) return;

Fixes the issue locally, live reload is working after that.

[stolinski]

Also seeing this issue in a clean install of Sapper.

[acoyfellow]

For what it's worth, this error happens to me only on Node.js 10+ (10.18.1 specifically). Same version of sapper running on 8.13.0 does not have this error.

[Conduitry]

From local testing, this appears to be fixed by https://github.com/rollup/plugins/pull/355 and I am eagerly awaiting its merge, and will update sapper-template once the update is released and I've given it another test.

[arxpoetica]

Also relevant: https://github.com/sveltejs/sapper-template/issues/218

[mikenikles]

You can use the following NPM scripts until this gets fixed upstream.

"dev": "npm run dev:sapper:fix && sapper dev",
"dev:sapper:fix": "run-s dev:sapper:fix:one dev:sapper:fix:two",
"dev:sapper:fix:one": "sed -i 's/export function connect/function connect/g' ./node_modules/sapper/sapper-dev-client.js",
"dev:sapper:fix:two": "grep -qF 'exports = {connect}' ./node_modules/sapper/sapper-dev-client.js || echo 'exports = {connect}' >> ./node_modules/sapper/sapper-dev-client.js",

[nefarioustim]

If you're running the above scripts on MacOS, you'll need to change the sed command slightly:

sed -i '' -e 's/export function connect/function connect/g' ./node_modules/sapper/sapper-dev-client.js

I also needed to change the exports in dev:sapper:fix:two to be module.exports to get it to work.

And here it is in place for copy pasta goodness:

"dev": "npm run dev:sapper:fix && sapper dev",
"dev:sapper:fix": "run-s dev:sapper:fix:one dev:sapper:fix:two",
"dev:sapper:fix:one": "sed -i '' -e 's/export function connect/function connect/g' ./node_modules/sapper/sapper-dev-client.js",
"dev:sapper:fix:two": "grep -qF 'module.exports = {connect}' ./node_modules/sapper/sapper-dev-client.js || echo 'module.exports = {connect}' >> ./node_modules/sapper/sapper-dev-client.js",

[nathancahill]

This is resolved with "@rollup/plugin-commonjs": "^12.0.0"

[chovy]

how do i upgrade? I get an error when changing to ^12