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
...+importbuiltinsfrom'rollup-plugin-node-builtins';+importglobalsfrom'rollup-plugin-node-globals';exportdefault{...plugins:[...resolve({browser:true,dedupe:['svelte'],}),commonjs(),+globals(),+builtins(),...],...}まとめ
プラグインを利用することで、Nodeのビルトインモジュール依存の処理をRollupでビルドすることができます。