AngularやReact、VueといったモダンなフレームワークでNCMBを利用する場合、WebPack周りでエラーが出ることがあります。そんな時の対処法を紹介します。
解決策
先に解決策を紹介します。それはNCMBのJavaScript SDKをフォークした、こちらのライブラリを利用することです。
npm install github:NCMBMania/ncmb_js#master
このJavaScript SDKは3.1.1(2021年03月時点の最新版)をベースとしています。公式とは次の点が異なります。
- Node.js用のLocalStorageを除外しています
- Babelを開発用の依存ライブラリに変更しています
- レガシーなWebブラウザをサポートする Babel Polyfill も開発用の依存ライブラリへ変更、コードから除外しています
次に webpack.config.js を開いて、下記を修正します。
// 元 { test: /\.json$/, loader: 'json-loader', } // 修正後 { test: /\.json$/, loader: 'json-loader', type: 'javascript/auto' }
後は import で利用できます。
import * as NCMB from 'ncmb'; const ncmb = new NCMB('YOUR_APPLICATION_KEY', 'YOUR_CLIENT_KEY');
問題
通常のJavaScript SDKをインストールして利用しようとすると、次のエラーが発生します。
ERROR in ./node_modules/node-localstorage/LocalStorage.js Module not found: Error: Can't resolve 'fs' in
これはWebPackで事前にコードのトランスパイルが走った際に、Node.js側のコード(node-localstorage)が問題になっています。Webブラウザ上で実行する限りは不要なのですが、読み込みが発生してしまっています。
そこで、フォークしたライブラリではこのコードを除外しています。
注意点
Babelを除外していますので、レガシーなWebブラウザでは動作しない可能性があります。なお、Monacaアプリの場合はモダンなWebブラウザのレンダリングエンジンを利用していますので、問題はないでしょう。
まとめ
公式のJavaScript SDKはTypeScriptで作られていませんので、コード補完などは利用できません。もしTypeScriptで利用したい場合には ncmb_ts - npm をご利用ください。AngularやReact、VueでもぜひNCMBを役立ててください!