· 2 min read
Rollup Error Encountered When Using Svelte with apollo-boost
This article was auto-translated from Chinese. Some nuances may be lost in translation.
I originally wanted to try playing around with Svelte and GraphQL to see how it felt. Apollo’s built-in Observable Query pairs really easily with reactive scenarios.
I imported ApolloClient inside Svelte:
import ApolloClient from 'apollo-boost';
Unexpectedly, after getting everything installed, Rollup failed to compile:
[!] 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 checked the issue and found similar problems reported elsewhere. I didn’t feel like digging deeper for a workaround right now since I had other ideas I wanted to finish first, so I had to retreat to my comfort zone and stick with React. Taking a quick note here to revisit later.
Related Posts
- Things to Keep in Mind When Using Images in Frontend Development Expanding on Jake Archibald's article, this post organizes how modern responsive images should be written: why width/height are still necessary, when to use CSS aspect-ratio, how to choose between AVIF and WebP, and using picture/source/srcset for art direction on mobile devices.
- CSS field-sizing — Auto-resize Form Elements with a Single Line of CSS Previously, auto-resizing a textarea required listening to scrollHeight in JavaScript. With CSS field-sizing: content, a single line replaces it all, supporting textarea, input, and select. This article covers the pain points of older approaches and how to use field-sizing.
- Make Your Link Underlines Look Better: text-underline-offset By default, underlines sit very close to the text. Some designers dislike this look, and personally, I don't think it looks great either.
- Why the Web Shouldn't Strive for Pixel Perfection You should only focus on pixel perfection when it truly matters; otherwise, it often results in a lose-lose situation.