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

[maneetgoyal]

• Rollup Plugin Name:
• Rollup Plugin Version: @rollup/plugin-commonjs
• Rollup Version: 11.1.0
• Operating System (or Browser): Mac OS
• Node Version: 12.13.1

How Do We Reproduce?

• This issue was raised earlier too: 'import' and 'export' may only appear at the top level rollup-plugin-commonjs#90
• Some change via Dynamic require #206 or feat(commonjs): export properties defined using Object.defineProperty(exports, ..) #222 might be causing this issue

Expected Behavior

Bundling worked with lodash-es without any issues till v. 11.0.2.

Actual Behavior

!] Error: 'import' and 'export' may only appear at the top level
abc: ../../node_modules/lodash-es/isBuffer.js (1:0)
abc: 1: import root from './_root.js';
abc:    ^
abc: 2: import stubFalse from './stubFalse.js';
abc: Error: 'import' and 'export' may only appear at the top level
abc:     at error (/xxx/node_modules/rollup/dist/shared/rollup.js:10399:30)
abc:     at Module.error (/xxx/node_modules/rollup/dist/shared/rollup.js:14789:16)
abc:     at tryParse (/xxx/node_modules/rollup/dist/shared/rollup.js:14682:23)
abc:     at Module.setSource (/xxx/node_modules/rollup/dist/shared/rollup.js:15080:30)
abc:     at /xxx/node_modules/rollup/dist/shared/rollup.js:17086:20
abc:     at runNextTicks (internal/process/task_queues.js:58:5)
abc:     at processImmediate (internal/timers.js:412:9)
abc:     at async Promise.all (index 114)
abc:     at async Promise.all (index 5)
abc:     at async Promise.all (index 0)
abc: error Command failed with exit code 1.

[ceigey]

I am having this issue with the Svelte Sapper template (sveltejs/sapper-template).

Had followed the same process a couple of days ago and very recently, which is:

npx degit "sveltejs/sapper-template#rollup" my-app
npm i
npm run dev

The first project (with no major alterations; kept for reference) continued to run happily; second project (the one I intended to build on properly) installed today came up with the following error when trying to run the dev server:

$ npx 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;

Checked the differences in package-lock.json with Meld, made a guess about which package is probably causing the issue, looked at the version in the working example (11.0.2 vs 11.1.0), and ran:

npm i @rollup/plugin-commonjs@11.0.2

Now works fine.

Let me know if this should be broken out into a separate issue - I figured the root cause might be the same given all the coincidental similarities.

Rollup Plugin Name: @rollup/plugin-commonjs
Rollup Plugin Version: 11.1.0 (vs working 11.0.2)
Rollup Version: 1.32.1 (both working & not-working cases)
Operating System (or Browser): Manjaro 19.0.2
Node Version: 13.10.1

[mattpilott]

Also seeing this on a Sapper project as of 11.1.0

[shellscape]

Thanks for opening an issue. Citing the issue template:

Issues without minimal reproductions will be closed! Please provide one by:

1. Using the REPL.it plugin reproduction template at https://repl.it/@rollup/rollup-plugin-repro
2. Provide a minimal repository link (Read https://git.io/fNzHA for instructions).
   These may take more time to triage than the other options.
3. Using the REPL at https://rollupjs.org/repl/

Please add a reproduction and we'll be happy to triage further.

Please refrain from +1 replies. They'll be removed.

[CadenP]

Here's a reproduction with the specific package (not a direct dependency) that's causing me issues:
https://repl.it/repls/PoliticalTestyMegahertz

Note that @rollup/plugin-commonjs@11.0.2 works, but @rollup/plugin-commonjs@11.1.0 fails.

[shellscape]

Thanks for adding that repro.

[Conduitry]

There's another helpful-sounding comment here that tries to dig a little more into what's happening.

[tiefenb]

I have a similar issue with react:

site/templates/scripts/master.js → site/templates/scripts/master..js...
(!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/react/index.js: (8:0)
[!] Error: 'import' and 'export' may only appear at the top level
node_modules/react/index.js (8:0)
6:   module.exports = require('./cjs/react.development.js');
7: }
Error: 'import' and 'export' may only appear at the top level
    at error (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:10152:30)
    at Module.error (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:14487:16)
    at tryParse (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:14380:23)
    at Module.setSource (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:14779:30)
    at /usr/local/lib/node_modules/rollup/dist/shared/rollup.js:16777:20
    at async Promise.all (index 0)
    at async Promise.all (index 7)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at async Promise.all (index 0)

Using this config:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import nodePolyfills from 'rollup-plugin-node-polyfills';

const config = {
	input: 'site/templates/scripts/master.js',
	output: [
		{
			file: 'site/templates/scripts/master..js',
			format: 'es'
		}
	],
	plugins: [
        resolve({
            jsnext: true,
            main: true,
            browser: true,
            preferBuiltins: false
        }),
        nodePolyfills(),
        commonjs({
            include: 'node_modules/**',
            namedExports: {
                'react': [ 'Component', 'PropTypes', 'Children', 'createElement' ],
                'react-dom': [ 'render' ]
            }
        }),
        babel({
            babelrc: true,
            exclude: 'node_modules/**'
        }),
		terser()
	],
};

export default config;

[shellscape]

@tiefenb Please don't add +1 comments to issues in this repo. If you have a reproduction to add, please do share it but use one of the methods mentioned above.

[eswat2]

Rollup Plugin Name: @rollup/plugin-commonjs
Rollup Plugin Version: 11.1.0
Rollup Version: 2.6.1
Operating System: Mac OS (10.15.4)
Browser: Chrome (83.0.4103.7)
Node Version: 12.16.1

i have a small Svelte demo that i keep up to date with the latest toolchains and i found that it fails to build when i updated @rollup/plugin-commonjs from "11.0.2" to "11.1.0" this weekend.

works -- https://github.com/eswat2/s4e-autos
broken -- https://github.com/eswat2/s4e-autos/tree/broken-build-compile-error-import-export

The only difference between these 2 is the version of @rollup/plugin-commonjs in package.json.

Running yarn build in master for this repo, you see what you'd expect:

➜  s4e-autos git:(master) yarn build
yarn run v1.22.4
warning ../package.json: No license field
$ rollup -c

src/main.js → public/build/bundle.js...
created public/build/bundle.js in 10.6s
✨  Done in 11.15s.

Now, running yarn build in the branch gives this:

➜  s4e-autos git:(broken-build-compile-error-import-export) yarn build
yarn run v1.22.4
warning ../package.json: No license field
$ rollup -c

src/main.js → public/build/bundle.js...
[!] Error: 'import' and 'export' may only appear at the top level
node_modules/symbol-observable/es/index.js (2:0)
1: /* global window */
2: import ponyfill from './ponyfill.js';
   ^
3:
4: var root;
Error: 'import' and 'export' may only appear at the top level
    at error (/Users/richardhess/github/zeit/s4e-autos/node_modules/rollup/dist/shared/rollup.js:10399:30)
    at Module.error (/Users/richardhess/github/zeit/s4e-autos/node_modules/rollup/dist/shared/rollup.js:14789:16)
    at tryParse (/Users/richardhess/github/zeit/s4e-autos/node_modules/rollup/dist/shared/rollup.js:14682:23)
    at Module.setSource (/Users/richardhess/github/zeit/s4e-autos/node_modules/rollup/dist/shared/rollup.js:15080:30)
    at /Users/richardhess/github/zeit/s4e-autos/node_modules/rollup/dist/shared/rollup.js:17086:20
    at async Promise.all (index 3)
    at async Promise.all (index 1)
    at async Promise.all (index 1)
    at async Promise.all (index 1)
    at async Promise.all (index 0)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I hope this example helps you resolve the issue...

Richard

UPDATE: 2020.04.14

i refactored master to use svql instead of svelte-apollo and after i got it all working i upgraded to @rollup/plugin-commonjs 11.1.0 and it all works like a charm. The branch is still broken if i try to upgrade, but master is working fine with all the latest npm packages.

Not sure if this helps or hurts your attempt to solve the problem, but it's another insight into the problem...