· 2 min read

Rollup error encountered with Svelte with apollo-boost

# Frontend
This article was auto-translated from Chinese. Some nuances may be lost in translation.

I originally wanted to experiment with Svelte alongside GraphQL to see what the experience would be like. The Observable Query provided by Apollo is very easy to integrate into reactive scenarios.

I imported ApolloClient in Svelte:

import ApolloClient from 'apollo-boost';

However, after everything was set up, I found that Rollup compilation failed:

[!] 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/kalan/code/github-tool/node_modules/rollup/dist/shared/node-entry.js:5400:30)
    at Module.error (/Users/kalan/code/github-tool/node_modules/rollup/dist/shared/node-entry.js:9824:16)
    at tryParse (/Users/kalan/code/github-tool/node_modules/rollup/dist/shared/node-entry.js:9717:23)
    at Module.setSource (/Users/kalan/code/github-tool/node_modules/rollup/dist/shared/node-entry.js:10080:33)
    at Promise.resolve.catch.then.then.then (/Users/kalan/code/github-tool/node_modules/rollup/dist/shared/node-entry.js:12366:20)

I looked up the issue and found that similar problems occur elsewhere. I’m currently not inclined to keep searching for a solution because I have other ideas I want to finish first. So, I’ll just return to my comfort zone and continue using React for now. I’ll make a note of this and revisit it later.