· 1 分鐘閱讀
Svelte 搭配 apollo-boost 時遇到的 rollup 錯誤
# 前端原本想用 svelte 搭配 graphQL 玩玩看是什麼感覺的,apollo 本身提供的 Observable Query 非常容易搭配 Reactive 的場景。
我在 svelte 裡頭引入 ApolloClient
import ApolloClient from 'apollo-boost';
沒想到都裝好了發現 rollup 編譯沒辦法過:
[!] 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)
查了一下 issue,發現其他地方也有類似問題。目前懶得繼續找解法,因為有其他想法想先完成,所以只好回到舒適圈繼續用 React 了。先筆記一下之後再慢慢瞧。
相關文章
- 前端使用圖片時需要注意的事從 Jake Archibald 的文章延伸,整理現代響應式圖片應該怎麼寫:為什麼 width/height 還是要加、什麼時候用 CSS aspect-ratio、AVIF 跟 WebP 怎麼選,以及用 picture/source/srcset 處理手機版圖片切換。
- CSS field-sizing — 用一行 CSS 讓表單元素自動調整大小textarea 自動調整高度,以前只能靠 JavaScript 監聽 scrollHeight。CSS field-sizing: content 一行就能取代,支援 textarea、input、select。本文整理舊做法的痛點與 field-sizing 的用法。
- 讓你的超連結底線更好看:text-underline-offset預設的情況下底線跟文字很接近,有些設計師不喜歡這種樣式,我自己也覺得沒有很好看。
- 為什麼網頁不應該追求 Pixel Perfect只有在 Pixel Perfect 很重要的時候才應該關注他,否則往往會讓你得到一個雙輸的局面。