なぜHTML属性はDOMに異なって設定されるのですか？

数時間掘り下げた後、次の問題について誰かが助けてくれることを期待して、SOに関する質問をすることに決めました。

1. Webアプリケーションの1つとして、Reactサポートライブラリと一緒にOnsen UI jsフレームワークを使用しました
2. 開発環境でアプリケーションをレンダリングしようとすると、すべてが正しく機能しているように見えますが、ステージング環境でそれを試みると、一部のコンポーネントの動作が異なります

3. これまでに見つけたもの：ステージング環境では、一部のHTML属性がDOMに別様に設定されているようです：

   |----------------|---------------|--------------|
   | HTML attribute |    DEV ENV    | STAGING ENV  |
   |----------------|---------------|--------------|
   | fixed-content  | fixed-content | fixedcontent |
   |----------------|---------------|--------------|
   | active-index   | active-index  |     index    |
   |----------------|---------------|--------------|
   

このため、OnsenフレームワークはHTML要素の属性を見つけることができず、以下に関係なく異なる動作をします。

1. 私たちは同じブラウザーを使用しています（Chrome、Edge、Firefoxで確認）
2. 両方の環境に同じJSコードがロードされています

環境間の違いは何ですか？

1. JSファイルは、開発マシンとステージング環境のS3にローカルに保存されます。
2. ステージング環境で暗号化された接続を使用します
3. Accept-Encodingヘッダーはgzip, deflateローカルとgzip, deflate, brステージングにあります
4. たぶん何か他に探す必要がありますか？

ここで何が起こっているのか誰か知っていますか？

私たちは実際に問題を発見し、それを見つけるのに何時間もかかりましたが、解決策は非常に単純です。

ステージング/実稼働環境では、Babelプラグインを使用しtransform-react-remove-prop-typesてReactプロップタイプを削除します。

残念ながら、Onsen UI Reactサポートライブラリは、コンポーネントの定義されたプロップタイプに依存しているため、それらが取り除かれると、ライブラリの動作が異なります。

我々のしたこと：

1. オプション0.3.3を使用できるように、babelプラグインをバージョンに更新しましたignoreFilenames

2. Onsen UI Reactライブラリのコードを含むファイルをスキップしました

   if (cli.production) {
       config.babel.plugins.push([
           'transform-react-remove-prop-types',
           {
               ignoreFilenames: ['projectleader']
           }
       ]);
   }