· 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.
Related Posts
- CSS field-sizing — Auto-Resize Form Elements with One Line of CSSMaking a textarea auto-resize used to require JavaScript to watch scrollHeight. CSS field-sizing: content replaces all of that in one line, supporting textarea, input, and select.
- Make Your Hyperlink Underlines Look Better: text-underline-offsetBy default, underlines sit very close to the text, and some designers dislike this style. Personally, I don’t think it looks very good either.
- Why Web Design Shouldn’t Chase Pixel PerfectOnly pay attention to Pixel Perfect when it really matters; otherwise, it often leads to a lose-lose situation.
- Let’s Write Colors with CSS HSL! (And a Better Way)In web development, the traditional HEX and RGB color notations are widely used, but they are not very readable or intuitive, and their capabilities are limited in wider color spaces such as P3. HSL (Hue, Saturation, Lightness) provides a more intuitive way to define colors, making it easier for developers to understand and adjust them. By describing colors through the three dimensions of hue, saturation, and lightness, HSL makes color adjustment more human-friendly. In design systems in particular, HSL can better represent lightness variations in a color palette.