• トップページ
• JavaScript

gatsby-plugin-page-transitionsはv2対応してないのでビルドが通らない

gatsbyのページ遷移アニメーションをつけるプラグインgatsby-plugin-page-transitionsは廃止されたAPIを使用しているのでgatsby buildコマンドでのビルドが通りません。(gatsby developは通ります。)

Netlifyにもデプロイできないので使うのをやめました。ちなみにエラーメッセージは以下の通りです。

error 
Your plugins must export known APIs from their gatsby-browser.js.
The following exports aren't APIs. Perhaps you made a typo or your plugin is outdated?

See https://www.gatsbyjs.org/docs/browser-apis/ for the list of Gatsby Browser APIs

- The plugin "gatsby-plugin-page-transitions@1.0.7" is exporting a variable named "replaceHistory" which isn't an API.

GatsbyでSassを使う

GatsbyでSassを使う方法を調べてみました。

インストール

npm install --save node-sass gatsby-plugin-sass

gatsby-plugin-sitemapを使う

Gatsby.jsでサイトマップを作成するプラグインgatsby-plugin-sitemapの設定方法です。

WordPressでシンタックスハイライトするのにPrismを使う

元々プラグインでシンタックスハイライトさせていたのですが、動作が重かったり表示が一昔前っぽくなってしまうのでモダンな表示になるものを探していました。今回はPrismを使って記事中のコードのシンタックスハイライトをさせてみることにしました。Prismを使ったプラグインもあるようですが今回はプラグインを使わずテーマに組み込みました。

Prismで対応している言語のリストはこちらです。大抵の言語はカバーできています。 続きを読む

Gatsbyでfaviconを変更する方法

Gatsbyでページを作成するとデフォルトのfaviconが割り当てられているので、これを自作のfaviconに変更しました。

faviconはブラウザのタブなどに表示されるアイコンです。

続きを読む

gatsby-imageで画像を表示する方法

Gatsbyを使って画像を表示する方法です。dev.toに参考になる記事があったのでこちらをもとに設定しました。

続きを読む

Gatsby + netlifyでフォームを送信する方法

netlify上でGatsbyを使ってフォームを作る方法を調べたのでメモしておきます。
続きを読む

WordPressでテーマのURLを表示させたい場合

WordPressのテーマディレクトリ(フォルダ)の中にJavaScriptや画像を置いて表示させたい場合に、テーマ内でテーマのURLを自動的に表示できると便利です。

続きを読む

Chromeでハードリロードする方法

Google ChromeでWeb開発する際にいつまでもキャッシュが残って更新内容が表示されない場合があります。このような場合に便利なのがハードリロードです。
続きを読む

【JavaScript】ES6でjQueryプラグインをimportした際にjQueryのエラーが出る場合の対策

jQueryをES6でimportしているのにもかかわらず、プラグインをimportしたときにjQueryのエラーが出る場合の対策です。

Uncaught ReferenceError: jQuery is not defined

自分のケースではfeatherlightというプラグインをrequireして実行するとChromeで上記のエラーが出ました。
続きを読む

• 新しい記事へ
• 古い記事へ