Сборка ReactJS несовместима между средами

Question

Я предполагаю, что это может быть вопрос, специфичный для моей рабочей среды, но я был бы признателен за некоторую проницательность и совет, где смотреть дальше, потому что я схожу с ума в этой точке.

Я использую React 0.14 и режим эмуляции IE11 для IE8.

В среде разработки ошибка, приведенная ниже, обычно выдавалась, прежде чем key={index} это анти-паттерн и исправление - замена index с уникальными значениями, взятыми из каждого отдельного элемента, например "product_" + product.id + "_" + product.value, Это может стать проблемой для динамически генерируемого списка, так как он перерисовывается при каждом изменении (см. Ниже). Теперь все работает и не выдается никакой ошибки.

SCRIPT5022: processUpdates (): невозможно найти дочерний элемент 9 элемента. Это, вероятно, означает, что DOM был неожиданно мутирован (например, браузером), обычно из-за того, что забыл <tbody> при использовании таблиц вложенные теги, такие как <form>, <p>, или же <a>или используя не-SVG элементы в <svg> Родитель. Попробуйте проверить дочерние узлы элемента с помощью React ID .0,

Примечание: нет вложенных <form>, <p>, или же <a> теги и я не забыл <tbody> тег (без элементов таблицы). нет <svg> родители тоже.

Однако при загрузке одной и той же сборки в тестовой среде приведенная выше ошибка генерируется постоянно - очевидно, для любого компонента с некоторыми динамически генерируемыми элементами HTML. Кажется, что обе среды имеют одинаковую конфигурацию. Разница лишь в том, кто может получить доступ к каждой среде.

Пример компонента списка (элементы списка извлекаются из службы и затем загружаются в состояние Redux):

import * as React from "react";

interface SuggestionProps extends React.HTMLProps<HTMLDivElement>{
    // props
};

const SuggestionInput = (allProps: SuggestionProps) => {
    const {...props} = allProps;

    return (
    <div className="form-group">
        <input 
            className="form-control" 
            type="text" 
            name={name} 
            value={value} 
            autoComplete="off"
            onChange={()=>changeAction(params)} 
            onBlur={()=>blurAction(params)} />
        <ul className="list-group suggestions">
        {
          listDisplay?
            suggestionList.map(function(elem: ListItem){
                return (
                    <li 
                      key={"list_item_" + elem.value + "_" + elem.zip} 
                      className="list-group-item" 
                      onClick={(e)=>listAction(e.currentTarget.value)}>
                            {elem.display}
                     </li>
                );
            })
          : null
        }
        </ul>
    </div>
    )
};

export default SuggestionInput;

Еще один динамический компонент:

import * as React from "react";
import {isObjectEmpty} from '../utils/HelperMethods';

interface ProductProps extends React.HTMLProps<HTMLDivElement>{
    // props
};

const Product = (allProps: ProductProps) => {
    const {...props} = allProps;

    return (
        <div className={divClasses}>
            <label className={labelClasses}>
                <input 
                    name={name}                    
                    type="checkbox"
                    value={value} 
                    checked={checked} 
                    onClick={(e) => clickAction(e.currentTarget.value)}
                />
                {labelText}

                {   
                    extended?
                        !isObjectEmpty(extended) && selected?
                                <div style={{"fontSize": "8pt"}}>
                                    {extended.label}
                                    <input 
                                        id={extended.name + value}
                                        name={extended.name + value}
                                        type="text"
                                        size={3}
                                        value={extended.value? extended.value : ""}
                                        onChange={(e)=>secondaryAction(e.currentTarget.value) }
                                    />
                                    {
                                        Object.keys(extended[extended.key].inputNames).map((e, index) => {
                                            return (
                                                <input 
                                                key={extended[extended.key].inputNames[e] + value} 
                                                type="hidden" 
                                                name={ extended[extended.key].inputNames[e] + value } 
                                                value={ extended[extended.key][e] } 
                                                />
                                            )
                                        })
                                    }
                                </div>
                        : null
                    : null
                }                
            </label>
        </div>
    )  
};

export default Product;

Пожалуйста, попросите любую информацию, которая вам нужна, но не предоставлена. Заранее спасибо.