· 2分で読了
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 — たった1行のCSSでフォーム要素を自動リサイズする かつてtextareaの自動高さ調整は、JavaScriptでscrollHeightを監視するしかなかった。しかしCSSのfield-sizing: contentなら、わずか1行で代替でき、textarea、input、selectに対応している。本記事では従来のやり方のペインポイントと、field-sizingの使い方をまとめる。
- リンクの下線をもっと見栄え良くする:text-underline-offset デフォルトでは下線と文字が近すぎて、このスタイルを好まないデザイナーもいるし、僕自身もあまり綺麗ではないと感じていた。
- なぜウェブで Pixel Perfect を追求すべきではないのか Pixel Perfect はそれが本当に重要な場合にのみ意識すべきであり、そうでなければ往々にしてお互い損をする結果に陥ってしまう。