Skip to content

Instantly share code, notes, and snippets.

@phucpnt

phucpnt/01-console.log

Last active December 18, 2017 15:27
Show Gist options
  • Save phucpnt/8f86d947317bf7f2a954cf8728c0cc66 to your computer and use it in GitHub Desktop.
Save phucpnt/8f86d947317bf7f2a954cf8728c0cc66 to your computer and use it in GitHub Desktop.
Download ZIP
Uniforms: react-hot-loader/babel. Issue with getModel on `BaseForm`
Raw
01-console.log
BaseForm.js:53 Uncaught ReferenceError: getModel is not defined
at AutoValidatedQuickAntDForm.__getModel__REACT_HOT_LOADER__ (BaseForm.js:53)
at AutoValidatedQuickAntDForm.BaseForm._this.getModel (BaseForm.js:44)
at AutoValidatedQuickAntDForm.getChildContextModel (BaseForm.js:84)
at AutoValidatedQuickAntDForm.getChildContext (BaseForm.js:63)
at processChildContext (react-dom.development.js:5456)
at invalidateContextProvider (react-dom.development.js:5506)
at finishClassComponent (react-dom.development.js:7889)
at updateClassComponent (react-dom.development.js:7850)
at beginWork (react-dom.development.js:8225)
at performUnitOfWork (react-dom.development.js:10224)
__getModel__REACT_HOT_LOADER__ @ BaseForm.js:53
BaseForm._this.getModel @ BaseForm.js:44
getChildContextModel @ BaseForm.js:84
getChildContext @ BaseForm.js:63
processChildContext @ react-dom.development.js:5456
invalidateContextProvider @ react-dom.development.js:5506
finishClassComponent @ react-dom.development.js:7889
updateClassComponent @ react-dom.development.js:7850
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
render @ index.js:9
(anonymous) @ index.js:21
Promise resolved (async)
./src/front/index.js @ index.js:20
__webpack_require__ @ bootstrap 2ba1425da69421036bc1:712
fn @ bootstrap 2ba1425da69421036bc1:117
./src/index.site.js @ index.site.js:2
__webpack_require__ @ bootstrap 2ba1425da69421036bc1:712
fn @ bootstrap 2ba1425da69421036bc1:117
1 @ fetch.js:41
__webpack_require__ @ bootstrap 2ba1425da69421036bc1:712
webpackJsonpCallback @ bootstrap 2ba1425da69421036bc1:25
(anonymous) @ main.js:1
Raw
02-BaseForm.js
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
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; }; }();
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
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; }
import PropTypes from 'prop-types';
import React from 'react';
import cloneDeep from 'lodash/cloneDeep';
import get from 'lodash/get';
import set from 'lodash/set';
import { Component } from 'react';
import changedKeys from './changedKeys';
import createSchemaBridge from './createSchemaBridge';
import randomIds from './randomIds';
var BaseForm = function (_Component) {
_inherits(BaseForm, _Component);
function BaseForm() {
_classCallCheck(this, BaseForm);
var _this = _possibleConstructorReturn(this, (BaseForm.__proto__ || Object.getPrototypeOf(BaseForm)).apply(this, arguments));
_this.state = { bridge: createSchemaBridge(_this.props.schema), changed: null, changedMap: {}, resetCount: 0 };
_this.delayId = false;
_this.randomId = randomIds(_this.props.id);
_this.onReset = _this.reset = _this.onReset.bind(_this);
_this.onChange = _this.change = _this.onChange.bind(_this);
_this.onSubmit = _this.submit = _this.onSubmit.bind(_this);
// TODO: It shouldn't be here
var getModel = _this.getModel.bind(_this);
_this.getModel = function () {
return _this.__getModel__REACT_HOT_LOADER__.apply(_this, arguments);
};
return _this;
}
_createClass(BaseForm, [{
key: '__getModel__REACT_HOT_LOADER__',
value: function __getModel__REACT_HOT_LOADER__() {
var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
// **NOTE** the following lines will throw the error above.
var model = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getModel(mode);
return mode !== null && this.props.modelTransform ? this.props.modelTransform(mode, model) : model;
}
}, {
key: 'getChildContext',
value: function getChildContext() {
return {
uniforms: {
name: this.getChildContextName(),
error: this.getChildContextError(),
model: this.getChildContextModel(),
state: this.getChildContextState(),
schema: this.getChildContextSchema(),
onChange: this.getChildContextOnChange(),
randomId: this.randomId
}
};
}
}, {
key: 'getChildContextName',
value: function getChildContextName() {
return [];
}
}, {
key: 'getChildContextError',
value: function getChildContextError() {
return this.props.error;
}
}, {
key: 'getChildContextModel',
value: function getChildContextModel() {
return this.getModel('form');
}
}, {
key: 'getChildContextState',
value: function getChildContextState() {
return {
changed: !!this.state.changed,
changedMap: this.state.changedMap,
label: !!this.props.label,
disabled: !!this.props.disabled,
placeholder: !!this.props.placeholder,
showInlineError: !!this.props.showInlineError
};
}
}, {
key: 'getChildContextSchema',
value: function getChildContextSchema() {
return this.state.bridge;
}
}, {
key: 'getChildContextOnChange',
value: function getChildContextOnChange() {
return this.onChange;
}
}, {
key: 'getModel',
value: function getModel() /* mode */{
return this.props.model;
}
}, {
key: 'componentWillMount',
value: function componentWillMount() {
var _this2 = this;
this.setState(function () {
return {};
}, function () {
return _this2.setState(function () {
return { changed: false, changedMap: {} };
});
});
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(_ref) {
var schema = _ref.schema;
if (this.props.schema !== schema) {
this.setState(function () {
return { bridge: createSchemaBridge(schema) };
});
}
}
}, {
key: 'render',
value: function render() {
return React.createElement('form', this.getNativeFormProps());
}
}, {
key: 'getChangedKeys',
value: function getChangedKeys(root, valueA, valueB) {
return changedKeys(root, valueA, valueB);
}
}, {
key: 'getNativeFormProps',
value: function getNativeFormProps() {
var _props = this.props,
autosave = _props.autosave,
autosaveDelay = _props.autosaveDelay,
disabled = _props.disabled,
error = _props.error,
label = _props.label,
model = _props.model,
modelTransform = _props.modelTransform,
onChange = _props.onChange,
onSubmit = _props.onSubmit,
onSubmitFailure = _props.onSubmitFailure,
onSubmitSuccess = _props.onSubmitSuccess,
placeholder = _props.placeholder,
schema = _props.schema,
showInlineError = _props.showInlineError,
props = _objectWithoutProperties(_props, ['autosave', 'autosaveDelay', 'disabled', 'error', 'label', 'model', 'modelTransform', 'onChange', 'onSubmit', 'onSubmitFailure', 'onSubmitSuccess', 'placeholder', 'schema', 'showInlineError']);
return _extends({}, props, {
onSubmit: this.onSubmit,
key: 'reset-' + this.state.resetCount
});
}
}, {
key: 'onChange',
value: function onChange(key, value) {
var _this3 = this;
// Do not set `changed` before componentDidMount
if (this.state.changed !== null) {
this.state.changed = true;
this.getChangedKeys(key, value, get(this.getModel(), key)).forEach(function (key) {
return _this3.setState(function (state) {
return { changedMap: set(cloneDeep(state.changedMap), key, {}) };
});
});
}
if (this.props.onChange) {
this.props.onChange(key, value);
}
// Do not call `onSubmit` before componentDidMount
if (this.state.changed !== null && this.props.autosave) {
if (this.delayId) {
this.delayId = clearTimeout(this.delayId);
}
if (this.props.autosaveDelay > 0) {
this.delayId = setTimeout(this.onSubmit, this.props.autosaveDelay);
} else {
this.onSubmit();
}
}
}
}, {
key: 'onReset',
value: function onReset() {
this.setState(function (state) {
return { changed: false, changedMap: {}, resetCount: state.resetCount + 1 };
});
}
}, {
key: 'onSubmit',
value: function onSubmit(event) {
if (event) {
event.preventDefault();
event.stopPropagation();
}
var promise = Promise.resolve(this.props.onSubmit && this.props.onSubmit(this.getModel('submit')));
return promise.then(this.props.onSubmitSuccess, this.props.onSubmitFailure);
}
}]);
return BaseForm;
}(Component);
BaseForm.displayName = 'Form';
BaseForm.defaultProps = {
model: {},
label: true,
autosave: false,
autosaveDelay: 0,
noValidate: true
};
BaseForm.propTypes = {
error: PropTypes.object,
model: PropTypes.object,
schema: PropTypes.any.isRequired,
modelTransform: PropTypes.func,
onChange: PropTypes.func,
onSubmit: PropTypes.func,
onSubmitFailure: PropTypes.func,
onSubmitSuccess: PropTypes.func,
label: PropTypes.bool,
disabled: PropTypes.bool,
placeholder: PropTypes.bool,
showInlineError: PropTypes.bool,
autosave: PropTypes.bool,
autosaveDelay: PropTypes.number
};
BaseForm.childContextTypes = {
uniforms: PropTypes.shape({
name: PropTypes.arrayOf(PropTypes.string).isRequired,
error: PropTypes.object,
model: PropTypes.object.isRequired,
schema: PropTypes.shape({
getError: PropTypes.func.isRequired,
getErrorMessage: PropTypes.func.isRequired,
getErrorMessages: PropTypes.func.isRequired,
getField: PropTypes.func.isRequired,
getInitialValue: PropTypes.func.isRequired,
getProps: PropTypes.func.isRequired,
getSubfields: PropTypes.func.isRequired,
getType: PropTypes.func.isRequired,
getValidator: PropTypes.func.isRequired
}).isRequired,
state: PropTypes.shape({
changed: PropTypes.bool.isRequired,
changedMap: PropTypes.object.isRequired,
label: PropTypes.bool.isRequired,
disabled: PropTypes.bool.isRequired,
placeholder: PropTypes.bool.isRequired,
showInlineError: PropTypes.bool.isRequired
}).isRequired,
onChange: PropTypes.func.isRequired,
randomId: PropTypes.func.isRequired
}).isRequired
};
var _default = BaseForm;
export default _default;
;
var _temp = function () {
if (typeof __REACT_HOT_LOADER__ === 'undefined') {
return;
}
__REACT_HOT_LOADER__.register(BaseForm, 'BaseForm', '/Users/phucpnt/projects/community/uniforms/packages/uniforms/src/BaseForm.js');
__REACT_HOT_LOADER__.register(_default, 'default', '/Users/phucpnt/projects/community/uniforms/packages/uniforms/src/BaseForm.js');
}();
;
//////////////////
// WEBPACK FOOTER
// ../community/uniforms/packages/uniforms/src/BaseForm.js
// module id = ../community/uniforms/packages/uniforms/src/BaseForm.js
// module chunks = 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment