npmモジュールをインポートしてRollupでビルドしたときに○○ is not definedが出たときの対処

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プラグインモジュールを導入する。

• rollup-plugin-node-builtins
• rollup-plugin-node-globals

インストール

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