svelteを使ってちょっとしたWebアプリを作っているときにハマったのでメモ。
環境
- macOS Catalina
- Node v12.15.0
- npm v6.13.4
- rollup.js v1.20.0
- Svelte v3.0.0
事象
svelteではクイックスタート用のテンプレートが用意されており、その中でモジュールバンドラとしてRollupを利用しています（参考）。
このテンプレートを元に開発を進めていたところ、特定のnpmモジュールをインポートして動かした際に下記のエラーに遭遇しました。
Uncaught ReferenceError: stream is not defined
streamというモジュールは自分が書いたプログラムの中では使っていません。
問題点
インポートしたnpmモジュールが内部でNodeのビルトインモジュールを利用しており、ブラウザ環境ではそんなモジュールないよ!となってエラーとなっていたようです。
解決方法
下記のRollupプラグインモジュールを導入する。
インストール
npm install --save-dev rollup-plugin-node-builtins rollup-plugin-node-globals
rollup.config.jsの設定
rollup.config.js
...
+ import builtins from 'rollup-plugin-node-builtins';
+ import globals from 'rollup-plugin-node-globals';
export default {
...
plugins: [
...
resolve({
browser: true,
dedupe: ['svelte'],
}),
commonjs(),
+ globals(),
+ builtins(),
...
],
...
}
まとめ
プラグインを利用することで、Nodeのビルトインモジュール依存の処理をRollupでビルドすることができます。