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でビルドすることができます。