Next.jsにおけるReferenceError: self is not defined global objectへの対応方法

category
date
Jan 26, 2023
slug
nextjs-self-is-not-defined-global-object
status
Published
summary
Next.jsで生のJavaScriptを読み込んだときにReferenceError: self is not defined global objectが発生した場合の対処方法
type
Post

発生現象

先日とあるプロジェクトで提供された古めかしいJavaScript SDKをNext.jsプロジェクトで読み込んだ時のこと。
// next.config.json

...
webpack: (config) => {
  config.resolve.alias.playersdk = path.join(
    __dirname,
    `src/lib/古めかしい.js`
  );
  return config;
},
...
 
本番ビルドで以下のようなエラーが発生した。
...
ReferenceError: self is not defined global object
 
一旦selfが定義されていればいいのではと思い、`node-self` を使ってみたところ、よくあるwindows is not defined global obejectに変わったので、結局グローバルオブジェクトへの参照があるjsファイルをサーバー処理で呼ぶ可能性があると、本番ビルド時にこのエラーが発生する。
 

対処法

そのjsを使用している対象のコンポーネントをdynamicインポートする
default exportの書き方なのでご注意を。
import dynamic from 'next/dynamic';
// import TargetComponent from './TargetComponent';

const WrapperComponent = ({ playlistID, ...props }: ProgramRouting) => {
  const TargetComponent = dynamic(() => import('./TargetComponent'));
  return (
    <TargetComponent
      {...props}
    />
  );
};

export default WrapperComponent;

© Titch 2022 - 2024