So I'm completing a task in a language(Optimizely and React) I have never used before.
As you can see below I have 2 different if statements depending on the returned value, the value returned is fine. I can see that is fine while debugging, so the Optimizely side of this seems to be working. What seems to be happening is the main function is ending before the .then is done, causing an error:
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Home`.
So I need to try and get the if statements to run before the function finishes.
Any help would be appreciated, the end goal for this is 2 have 2 bits of code running for 2 different users.
(function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = __webpack_require__(327);
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
//If original set to 874 if not then set to 884
var _enums = __webpack_require__(623);
var _enums2 = _interopRequireDefault(_enums);
var uuidv4 = __webpack_require__(676);
var user = { key: uuidv4() }
var _optimizely_manager = __webpack_require__(631);
var _optimizely_manager2 = _interopRequireDefault(_optimizely_manager);
_optimizely_manager2.default.getInstance().then(function (optimizelyInstance) {
const variation = optimizelyInstance.activate(_enums2.default.EXPERIMENT_KEYS.CAT_ABOVE_TITLE, user.key)
if(variation === _enums2.default.VARIATION_KEYS.ABOVE_TITLE_ORIGINAL){
var _item_list_item = __webpack_require__(874);
var _item_list_item2 = _interopRequireDefault(_item_list_item);
var ShoeListComponent = function (_React$Component) {
_inherits(ShoeListComponent, _React$Component);
function ShoeListComponent() {
_classCallCheck(this, ShoeListComponent);
return _possibleConstructorReturn(this, (ShoeListComponent.__proto__ || Object.getPrototypeOf(ShoeListComponent)).apply(this, arguments));
}
_createClass(ShoeListComponent, [{
key: 'render',
value: function render() {
var items = this.props.items;
return _react2.default.createElement(
'ul',
null,
Object.keys(items).map(function (itemId) {
return _react2.default.createElement(_item_list_item2.default, {
key: itemId,
item: items[itemId]
});
})
);
}
}]);
return ShoeListComponent;
}(_react2.default.Component);
exports.default = ShoeListComponent;
}
else if(variation === _enums2.default.VARIATION_KEYS.ABOVE_TITLE_VARIATION){
var _item_list_item = __webpack_require__(884);
var _item_list_item2 = _interopRequireDefault(_item_list_item);
var ShoeListComponent = function (_React$Component) {
_inherits(ShoeListComponent, _React$Component);
function ShoeListComponent() {
_classCallCheck(this, ShoeListComponent);
return _possibleConstructorReturn(this, (ShoeListComponent.__proto__ || Object.getPrototypeOf(ShoeListComponent)).apply(this, arguments));
}
_createClass(ShoeListComponent, [{
key: 'render',
value: function render() {
var items = this.props.items;
return _react2.default.createElement(
'ul',
null,
Object.keys(items).map(function (itemId) {
return _react2.default.createElement(_item_list_item2.default, {
key: itemId,
item: items[itemId]
});
})
);
}
}]);
return ShoeListComponent;
}(_react2.default.Component);
exports.default = ShoeListComponent;
}
});
}),
This is the demo app I am using.
https://github.com/optimizely/isomorphic-react-demo-app
What the task is, the task is to actually modify the order of the view. So one person will see View A and one person View B, so the if statement for 874 is the original code and the 884 is the code in which I took 874 and modified it to look how they want. I know the look is correct as if I make the change in 874 it changes the view to how I want. I'm just having the issue of having both options possibly being returned.
I may even be barking up the wrong tree in how to do it, but this is how I assumed it would have been done.
