ReactJS Reduxフォームの未定義エラーのプロパティ 'parentNode'を読み取ることができません

Question

基本的には、reactxでreduxを使用してサインアップまたは登録フォームを実装します。

Cannot read property 'parentNode' of undefined at Object.r (bundle.js:61207) 
    at t (bundle.js:61183) 
    at Object.<anonymous> (bundle.js:61207) 
    at t (bundle.js:61183) 
    at o (bundle.js:61183) 
    at bundle.js:61183 
    at n (bundle.js:61183) 
    at Object.defineProperty.value (bundle.js:61183) 
    at __webpack_require__ (bundle.js:679) 
    at fn (bundle.js:89) 

これはSignUp.jsファイルは次のとおりです：これはshowResultは

import React, { Component } from 'react'; 
import ReactDOM from "react-dom"; 
import { Provider } from "react-redux"; 
import { Values } from "redux-form-website-template"; 
import store from "./store"; 
import showResults from "./showResults"; 
import FieldLevelValidationForm from "./FieldLevelValidationForm"; 
const rootEl = document.getElementById("root"); 
export class SignUp extends Component { 
    render() { 
    return (
     <Provider store={store}> 
     <div style={{ padding: 15 }}> 
      <h2>Field-Level Validation</h2> 
      <FieldLevelValidationForm onSubmit={showResults} /> 
      <Values form="fieldLevelValidation" /> 
     </div> 
     </Provider>, 
     rootEl 
    ); 
    } 
} 

である（これは、このフォルダの指標である）アプリケーションを実行しながら、しかし、私は、ブラウザのコンソールにエラーを取得しています.jsファイル：

import React from 'react'; 
import { Field, reduxForm } from 'redux-form'; 
const required = value => (value ? undefined : 'Required') 
const maxLength = max => value => 
    value && value.length > max ? `Must be ${max} characters or less` : undefined 
const maxLength15 = maxLength(15) 
export const minLength = min => value => 
    value && value.length < min ? `Must be ${min} characters or more` : undefined 
export const minLength2 = minLength(2) 
const number = value => 
    value && isNaN(Number(value)) ? 'Must be a number' : undefined 
const minValue = min => value => 
    value && value < min ? `Must be at least ${min}` : undefined 
const minValue18 = minValue(18) 
const email = value => 
    value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) 
    ? 'Invalid email address' 
    : undefined 
const tooOld = value => 
    value && value > 65 ? 'You might be too old for this' : undefined 
const aol = value => 
    value && /.+@aol\.com/.test(value) 
    ? 'Really? You still use AOL for your email?' 
    : undefined 
const alphaNumeric = value => 
    value && /[^a-zA-Z0-9 ]/i.test(value) 
    ? 'Only alphanumeric characters' 
    : undefined 
export const phoneNumber = value => 
    value && !/^(0|[1-9][0-9]{9})$/i.test(value) 
    ? 'Invalid phone number, must be 10 digits' 
    : undefined 
const renderField = ({ 
    input, 
    label, 
    type, 
    meta: { touched, error, warning } 
}) => (
    <div> 
    <label>{label}</label> 
    <div> 
     <input {...input} placeholder={label} type={type} /> 
     {touched && 
     ((error && <span>{error}</span>) || 
      (warning && <span>{warning}</span>))} 
    </div> 
    </div> 
) 
const FieldLevelValidationForm = props => { 
    const { handleSubmit, pristine, reset, submitting } = props 
    return (
    <form onSubmit={handleSubmit}> 
     <Field 
     name="username" 
     type="text" 
     component={renderField} 
     label="Username" 
     validate={[required, maxLength15, minLength2]} 
     warn={alphaNumeric} 
     /> 
     <Field 
     name="email" 
     type="email" 
     component={renderField} 
     label="Email" 
     validate={email} 
     warn={aol} 
     /> 
     <Field 
     name="age" 
     type="number" 
     component={renderField} 
     label="Age" 
     validate={[required, number, minValue18]} 
     warn={tooOld} 
     /> 
     <Field 
     name="phone" 
     type="number" 
     component={renderField} 
     label="Phone number" 
     validate={[required, phoneNumber]} 
     /> 
     <div> 
     <button type="submit" disabled={submitting}> 
      Submit 
     </button> 
     <button type="button" disabled={pristine || submitting} onClick={reset}> 
      Clear Values 
     </button> 
     </div> 
    </form> 
) 
} 

export default reduxForm({ 
    form: 'fieldLevelValidation' // a unique identifier for this form 
})(FieldLevelValidationForm) 

：

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); 
export default (async function showResults(values) { 
    await sleep(500); // simulate server latency 
    window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`); 
}); 

これはFieldLevelValidationForm.jsファイルです

これはstore.jsファイルです：

import { createStore, combineReducers } from 'redux'; 
import { reducer as reduxFormReducer } from 'redux-form'; 
const reducer = combineReducers({ 
    form: reduxFormReducer, // mounted under "form" 
}); 
const store = (window.devToolsExtension 
    ? window.devToolsExtension()(createStore) 
    : createStore)(reducer); 
export default store; 

のindex.html：

<!DOCTYPE html> 
    <html> 
     <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Events Across</title> 
     <!-- Bootstrap --> 
     <link href="./assets/css/bootstrap.min.css" rel="stylesheet"></link> 
     </head> 
     <body> 
     <div id="app"></div> 
     <script src="/app/bundle.js"></script> 
     </body> 
    </html> 

index.js：

import React, {Component} from "react"; 
import {render} from "react-dom"; 
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'; 
import {createStore} from 'redux'; 

import {Home} from "./components/Home/Home"; 
import {SignIn} from "./components/SignIn/SignIn"; 
import {SignUp} from "./components/SignUp/SignUp"; 
import {GuestHeader} from "./components/GuestHeader"; 
import {CreateEvent} from "./components/CreateEvent/CreateEvent"; 


export class App extends React.Component { 
    render() { 
    return (
     <Router> 
     <div> 
      <div> 
      <nav className="navbar navbar-inverse"> 
      <div className="container-fluid"> 
       <div className="navbar-header"> 
       <Link to="/" className="navbar-brand">Events Across</Link> 
       </div> 
       <ul className="nav navbar-nav"> 
       <li><a href="/CreateEvent">Create an Event</a></li> 
       <li><a href="#">We are Hiring</a></li> 
       <li><a href="#">Blog</a></li> 
       </ul> 
       <ul className="nav navbar-nav navbar-right"> 
       <li><Link to="/SignUp"><span className="glyphicon glyphicon-user"></span> Sign Up</Link></li> 
       <li><Link to="/SignIn"><span className="glyphicon glyphicon-log-in"></span> Sign In</Link></li> 
       </ul> 
      </div> 
      </nav> 
      </div> 
      <Route exact path="/" component={Home} /> 
      <Route path={"/SignUp"} component={SignUp} /> 
      <Route path={"/SignIn"} component={SignIn} /> 
      <Route path={"/CreateEvent"} component={CreateEvent} /> 
     </div> 
     </Router> 
    ); 
    } 
} 

render(
    <App />, 
    window.document.getElementById("app") 
); 

これは、サインアップログインフォームのための私の完全なコードです。ここでRedux Formを使用しています。しかし、私は "未定義のparentNodeプロパティを読み取ることができません"というエラーが表示されます。

Answer 1

この行を削除：

import { Values } from "redux-form-website-template";