Update to Webpacker 5.1.1

Gemfile

@@ -18,7 +18,7 @@ gem 'sassc', '~> 2.0', '>= 2.0.1'
 gem 'stripe', '~> 1.58' # January 19, 2017 version of the Stripe API https://stripe.com/docs/api
 gem 'uglifier', '~> 4.1', '>= 4.1.20'
 gem 'ffi', '~> 1.11', '>= 1.11.1'
-gem 'webpacker', '~> 5.1'
+gem 'webpacker', '~> 5.1.1'
 
 gem 'httparty', '~> 0.17.0' # https://github.com/jnunemaker/httparty
 gem 'rack-attack', '~> 5.2' # for blocking ip addressses

Gemfile.lock

@@ -522,7 +522,7 @@ DEPENDENCIES
   traceroute (~> 0.8.0)
   uglifier (~> 4.1, >= 4.1.20)
   webmock (~> 3.6, >= 3.6.2)
-  webpacker (~> 5.1)
+  webpacker (~> 5.1.1)
   wisper (~> 2.0)
   wisper-activejob (~> 1.0.0)
   wisper-rspec (~> 1.1.0)

app/javascript/legacy/components/nonprofit-branding.js

@@ -1,5 +1,5 @@
 // License: LGPL-3.0-or-later
-import nonprofitBranding from '../../../../javascripts/src/lib/nonprofitBranding';
+import nonprofitBranding from '../../legacy_react/src/lib/nonprofitBranding';
 
 export default nonprofitBranding(app.nonprofit.brand_color)
 

app/javascript/legacy/recurring_donations/edit/custom-nonprofit-branding.es6

@@ -1,4 +1,4 @@
 // License: LGPL-3.0-or-later
-import nonprofitBranding from '../../../../../javascripts/src/lib/nonprofitBranding';
+import nonprofitBranding from '../../../legacy_react/src/lib/nonprofitBranding';
 
 module.exports = nonprofitBranding

app/javascript/legacy_react/api/api/NonprofitsApi.ts

@@ -15,7 +15,7 @@ import * as $ from 'jquery';
 import * as models from '../model/models';
 import { Configuration } from '../configuration';
 
-const page_info = require('../../../app/javascript/page_info.js.erb')
+const page_info = require('../../../page_info.js.erb')
 
 /* tslint:disable:no-unused-variable member-ordering */
 
@@ -89,11 +89,11 @@ export class NonprofitsApi {
         }
 
         if (extraJQueryAjaxSettings) {
-            requestOptions = (<any>Object).assign(requestOptions, extraJQueryAjaxSettings);
+            requestOptions = Object.assign(requestOptions, extraJQueryAjaxSettings);
         }
 
         if (this.defaultExtraJQueryAjaxSettings) {
-            requestOptions = (<any>Object).assign(requestOptions, this.defaultExtraJQueryAjaxSettings);
+            requestOptions = Object.assign(requestOptions, this.defaultExtraJQueryAjaxSettings);
         }
 
         let dfd = $.Deferred();
@@ -104,7 +104,7 @@ export class NonprofitsApi {
                     if(false){}
                     else if (xhr.status == 200 && 200 >= 400)
                     {
-                        dfd.reject(new models.NonprofitException(<models.Nonprofit>xhr.responseJSON))
+                        dfd.reject(new models.NonprofitException(xhr.responseJSON as models.Nonprofit))
                     }
 
                     else
@@ -161,11 +161,11 @@ export class NonprofitsApi {
         }
 
         if (extraJQueryAjaxSettings) {
-            requestOptions = (<any>Object).assign(requestOptions, extraJQueryAjaxSettings);
+            requestOptions = Object.assign(requestOptions, extraJQueryAjaxSettings);
         }
 
         if (this.defaultExtraJQueryAjaxSettings) {
-            requestOptions = (<any>Object).assign(requestOptions, this.defaultExtraJQueryAjaxSettings);
+            requestOptions = Object.assign(requestOptions, this.defaultExtraJQueryAjaxSettings);
         }
 
         let dfd = $.Deferred();
@@ -176,12 +176,12 @@ export class NonprofitsApi {
                     if(false){}
                     else if (xhr.status == 201 && 201 >= 400)
                     {
-                        dfd.reject(new models.NonprofitException(<models.Nonprofit>xhr.responseJSON))
+                        dfd.reject(new models.NonprofitException(xhr.responseJSON as models.Nonprofit))
                     }
 
                     else if (xhr.status == 400 && 400 >= 400)
                     {
-                        dfd.reject(new models.ValidationErrorsException(<models.ValidationErrors>xhr.responseJSON))
+                        dfd.reject(new models.ValidationErrorsException(xhr.responseJSON as models.ValidationErrors))
                     }
 
                     else

app/javascript/legacy_react/api/api/UsersApi.ts

@@ -15,7 +15,7 @@ import * as $ from 'jquery';
 import * as models from '../model/models';
 import { Configuration } from '../configuration';
 
-const page_info = require('../../../app/javascript/page_info.js.erb')
+const page_info = require('../../../page_info.js.erb')
 
 /* tslint:disable:no-unused-variable member-ordering */
 
@@ -93,11 +93,11 @@ export class UsersApi {
         }
 
         if (extraJQueryAjaxSettings) {
-            requestOptions = (<any>Object).assign(requestOptions, extraJQueryAjaxSettings);
+            requestOptions = Object.assign(requestOptions, extraJQueryAjaxSettings);
         }
 
         if (this.defaultExtraJQueryAjaxSettings) {
-            requestOptions = (<any>Object).assign(requestOptions, this.defaultExtraJQueryAjaxSettings);
+            requestOptions = Object.assign(requestOptions, this.defaultExtraJQueryAjaxSettings);
         }
 
         let dfd = $.Deferred();
@@ -107,7 +107,7 @@ export class UsersApi {
             (xhr: JQueryXHR, textStatus: string, errorThrown: string) => {
                     if (xhr.status == 422)
                     {
-                        dfd.reject(new models.ValidationErrorsException(<models.ValidationErrors>xhr.responseJSON))
+                        dfd.reject(new models.ValidationErrorsException(xhr.responseJSON as models.ValidationErrors))
                     }
 
                     else

app/javascript/legacy_react/javascripts/app/create_new_offsite_payment_pane.tsx

@@ -0,0 +1,33 @@
+// License: LGPL-3.0-or-later
+// require a root component here. This will be treated as the root of a webpack package
+import Root from "../../src/components/common/Root"
+import CreateOffsitePaymentPane from "../../src/components/create_offsite_payment_pane/CreateOffsitePaymentPane"
+
+import * as ReactDOM from 'react-dom'
+import * as React from 'react'
+
+export interface FundraiserInfo {
+  id: number
+  name: string
+}
+
+function LoadReactPage(element:HTMLElement, campaigns: FundraiserInfo[],
+                       events: FundraiserInfo[],
+  nonprofitId: number,
+  supporterId:number,
+  preupdateDonationAction:() => void,
+  postUpdateSuccess: () => void,
+
+  //from ModalProps
+  onClose: () => void,
+  modalActive: boolean,
+  nonprofitTimezone?: string) {
+  ReactDOM.render(<Root><CreateOffsitePaymentPane campaigns={campaigns}
+    events={events} onClose={onClose}
+     modalActive={modalActive} nonprofitTimezone={nonprofitTimezone}
+    postUpdateSuccess={postUpdateSuccess}
+    preupdateDonationAction={preupdateDonationAction} nonprofitId={nonprofitId} supporterId={supporterId}/></Root>, element)
+}
+
+
+(window as any).LoadReactCreateOffsiteDonationPane = LoadReactPage

app/javascript/legacy_react/javascripts/app/edit_payment_pane.tsx

@@ -0,0 +1,27 @@
+// License: LGPL-3.0-or-later
+// require a root component here. This will be treated as the root of a webpack package
+import Root from "../../src/components/common/Root"
+import EditPaymentPane, {FundraiserInfo} from "../../src/components/edit_payment_pane/EditPaymentPane"
+
+import * as ReactDOM from 'react-dom'
+import * as React from 'react'
+
+function LoadReactPage(element:HTMLElement, data:any, campaigns:FundraiserInfo[],
+                       events:FundraiserInfo[],
+                       onClose:() => void,
+                       modalActive:boolean,
+                       preupdateDonationAction: () => void,
+                       postUpdateSuccess: () => void,
+                       nonprofitTimezone?:string
+
+                        ) {
+  ReactDOM.render(<Root><EditPaymentPane data={data} campaigns={campaigns}
+                                         events={events} onClose={onClose}
+                                          modalActive={modalActive} nonprofitTimezone={nonprofitTimezone}
+                                         postUpdateSuccess={postUpdateSuccess}
+                                         preupdateDonationAction={preupdateDonationAction}
+  /></Root>, element)
+}
+
+
+(window as any).LoadReactEditPaymentPane = LoadReactPage

app/javascript/legacy_react/javascripts/app/registration_page.tsx

@@ -0,0 +1,16 @@
+// License: LGPL-3.0-or-later
+
+// require a root component here. This will be treated as the root of a webpack package
+import Root from "../../src/components/common/Root"
+import RegistrationPage from "../../src/components/registration_page/RegistrationPage"
+
+import * as ReactDOM from 'react-dom'
+import * as React from 'react'
+
+function LoadReactPage(element:HTMLElement) {
+  ReactDOM.render(<Root><RegistrationPage/></Root>, element)
+}
+
+
+(window as any).LoadReactPage = LoadReactPage
+

app/javascript/legacy_react/src/components/common/DefaultCloseButton.tsx

@@ -1,8 +1,8 @@
-import React = require("react");
+import * as React from "react";
 import { action, observable } from "mobx";
 import { Transition } from "react-transition-group";
 import { CloseButton } from "./svg/CloseButton";
-import color = require("color");
+import color from "color";
 import { observer } from "mobx-react";
 import ScreenReaderOnlyText from "./ScreenReaderOnlyText";
 

app/javascript/legacy_react/src/components/common/Modal.tsx

@@ -1,7 +1,7 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import AriaModal = require('react-aria-modal');
+import AriaModal from 'react-aria-modal';
 import { DefaultCloseButton } from './DefaultCloseButton';
 import BootstrapWrapper from './BootstrapWrapper';
 import { Row, Column } from './layout';

app/javascript/legacy_react/src/components/common/Root.tsx

@@ -10,7 +10,7 @@ import {CSRFInterceptor} from "../../lib/csrf_interceptor";
 import * as CustomAPIS from "../../lib/apis"
 
 const enLocaleData = require('react-intl/locale-data/en');
-const I18n = require('../../../../app/javascript/i18n.js.erb')
+const I18n = require('../../../../i18n.js.erb')
 const localeData = [...enLocaleData]
 Object.keys(I18n.translations).filter((i:string) => i !== 'en').forEach((i:string) => {
   const data  = [...require(`react-intl/locale-data/${i}`)]

app/javascript/legacy_react/src/components/common/fields.tsx

@@ -1,7 +1,7 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
 import { observer } from "mobx-react";
-import { Field } from "../../../../types/mobx-react-form";
+import { Field } from "../../../../../../types/mobx-react-form";
 import LabeledFieldComponent from "./LabeledFieldComponent";
 import { HoudiniField } from "../../lib/houdini_form";
 import ReactInput from "./form/ReactInput";

app/javascript/legacy_react/src/components/common/form/ReactSelect.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import {InjectedIntlProps, injectIntl} from 'react-intl';
-import {Field} from "../../../../../types/mobx-react-form";
+import {Field} from "../../../../../../../types/mobx-react-form";
 import {InputHTMLAttributes} from "react";
 import {action, observable} from "mobx";
 import {SelectHTMLAttributes} from "react";

app/javascript/legacy_react/src/components/common/form/ReactTextarea.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import {InjectedIntlProps, injectIntl} from 'react-intl';
-import {Field} from "../../../../../types/mobx-react-form";
+import {Field} from "../../../../../../../types/mobx-react-form";
 import {InputHTMLAttributes, ReactText, TextareaHTMLAttributes} from "react";
 import {action, observable} from "mobx";
 import {ReactInputProps} from "./react_input_props";

app/javascript/legacy_react/src/components/common/svg/CloseButton.tsx

@@ -1,5 +1,5 @@
 // License: LGPL-3.0-or-later
-import React = require("react");
+import * as React from "react";
 interface CloseButtonProps {
   backgroundCircleStyle:React.CSSProperties
   foregroundCircleStyle:React.CSSProperties

app/javascript/legacy_react/src/components/common/wizard/RAT/Wrapper.ts

@@ -5,7 +5,7 @@ import {TabManagerParent} from "./abstract_tabcomponent_state";
 import {observer} from 'mobx-react';
 import specialAssign from "./specialAssign";
 
-import PropTypes = require('prop-types');
+const PropTypes = require ('prop-types');
 
 interface WrapperProps {
   manager: TabManagerParent

app/javascript/legacy_react/src/components/common/wizard/RAT/abstract_tabcomponent_state.ts

@@ -1,6 +1,6 @@
 // License: LGPL-3.0-or-later
 import {action, computed, observable, reaction, runInAction} from "mobx";
-import _ = require("lodash");
+import * as _ from "lodash";
 
 const createFocusGroup = require('focus-group');
 

app/javascript/legacy_react/src/components/common/wizard/abstract_wizard_state.ts

@@ -1,7 +1,7 @@
 // License: LGPL-3.0-or-later
 import {computed, reaction} from "mobx";
 import {AbstractTabComponentState, AbstractTabPanelState} from "./RAT/abstract_tabcomponent_state";
-import _ = require("lodash");
+import * as _ from "lodash";
 
 export abstract class AbstractWizardState<PanelStateType extends AbstractWizardTabPanelState = AbstractWizardTabPanelState>
   extends AbstractTabComponentState<PanelStateType> {

app/javascript/legacy_react/src/components/common/wizard/wizard_state.ts

@@ -1,7 +1,7 @@
 // License: LGPL-3.0-or-later
 import {observable, action, computed, toJS, reaction, runInAction} from "mobx";
 import {Field, Form, FieldDefinition, FieldHandlers, FieldHooks} from "mobx-react-form";
-import _ = require("lodash");
+import * as _ from "lodash";
 import {AbstractWizardState, AbstractWizardTabPanelState} from "./abstract_wizard_state";
 
 interface SubFormDefinition {

app/javascript/legacy_react/src/components/create_offsite_payment_pane/CreateOffsitePaymentPane.tsx

@@ -9,7 +9,7 @@ import {BasicField, CurrencyField, SelectField, TextareaField} from "../common/f
 import ProgressableButton from "../common/ProgressableButton";
 import {action, computed} from "mobx";
 import {NonprofitTimezonedDates} from "../../lib/date";
-import {Field, FieldDefinition} from "../../../../types/mobx-react-form";
+import {Field, FieldDefinition} from "../../../../../../types/mobx-react-form";
 import {createFieldDefinition} from "../../lib/mobx_utils";
 import {centsToDollars, dollarsToCents} from "../../lib/format";
 import {Validations} from "../../lib/vjf_rules";
@@ -18,9 +18,9 @@ import {ApiManager} from "../../lib/api_manager";
 import * as CustomAPIS from "../../lib/apis";
 import {CSRFInterceptor} from "../../lib/csrf_interceptor";
 import {CreateOffsiteDonation, CreateOffsiteDonationModel} from "../../lib/api/create_offsite_donation";
-import blacklist = require("validator/lib/blacklist");
+import blacklist from "validator/lib/blacklist";
-import * as _ from 'lodash'
+import * as _ from 'lodash';
-import moment = require('moment');
+import moment from 'moment';
 import { castToUndefinedIfBlank } from '../../lib/utils';
 import ReactInput from "../common/form/ReactInput";
 

app/javascript/legacy_react/src/components/edit_payment_pane/EditPaymentPane.tsx

@@ -15,9 +15,9 @@ import {CSRFInterceptor} from "../../lib/csrf_interceptor";
 import {BasicField, CurrencyField, SelectField, TextareaField} from '../common/fields';
 import {TwoColumnFields} from "../common/layout";
 import {Validations} from "../../lib/vjf_rules";
-import _ = require("lodash");
+import * as _ from 'lodash'
 import {Dedication, parseDedication, serializeDedication} from '../../lib/dedication';
-import blacklist = require("validator/lib/blacklist");
+import blacklist from "validator/lib/blacklist";
 import {createFieldDefinition} from "../../lib/mobx_utils";
 import Modal from "../common/Modal";
 import ReactInput from "../common/form/ReactInput";

app/javascript/legacy_react/src/components/registration_page/NonprofitInfoForm.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import {InjectedIntlProps, injectIntl} from 'react-intl';
-import {Field, FieldDefinition} from "../../../../types/mobx-react-form";
+import {Field, FieldDefinition} from "../../../../../../types/mobx-react-form";
 import {BasicField} from "../common/fields";
 import {ThreeColumnFields, TwoColumnFields} from "../common/layout";
 import {Validations} from "../../lib/vjf_rules";

app/javascript/legacy_react/src/components/registration_page/RegistrationWizard.tsx

@@ -20,7 +20,7 @@ import {
   PostNonprofitUser
 } from "../../../api";
 
-import {initializationDefinition} from "../../../../types/mobx-react-form";
+import {initializationDefinition} from "../../../../../../types/mobx-react-form";
 import {ApiManager} from "../../lib/api_manager";
 import {HoudiniForm, StaticFormToErrorAndBackConverter} from "../../lib/houdini_form";
 import {WebUserSignInOut} from "../../lib/api/sign_in";