ヌルのプロパティ 'replaceChild'を読み取ることができません：webpack：///./~react-dom/lib/DOMLazyTree.js

Question

私はreact v15と"webpack": "^2.2.1"を使用してすべてを束ねるためにphonegapを使用してアプリケーションを作成しています。次に、私のwebpack.prod.jsonを実行して、スタンドアローン.jsファイルを生成します。このファイルは、アプリケーションに含まれています。

私はアプリケーションをローカルにインストールしても問題はなく、アプリケーションを実行できますが、問題が発生したときにはphonegap.com/buildを使用してビルドします。

さらに奇妙なことに、初期状態が正常に読み込まれます。その私はこのエラーが発生すること#/homeに移動します。次に

Uncaught SyntaxError: Unexpected token u in JSON at position 0 
    at JSON.parse (<anonymous>) 
    at RequireLogin.render (RequireLogin.js:32) 
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:799) 
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822) 
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362) 
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258) 
    at Object.mountComponent (ReactReconciler.js:46) 
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371) 
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258) 
    at Object.mountComponent (ReactReconciler.js:46) 

RequireLogin.js

import React from 'react'; 
import {connect} from 'react-redux'; 
import {Redirect} from 'react-router' 

class BlockForLoggedInUsers extends React.Component { 
    constructor(props){ 
    super(props); 
    } 
    render(){ 
    const loggedIn = this.props.user.loggedIn || JSON.parse(localStorage.LOGGED_IN); 
    if (loggedIn) { 
     return (
     <Redirect push to="/home"/> 
    ) 
    }else{ 
     return (
     <div></div> 
    ); 
    } 
    } 
} 


function mapStateToProps(state){ 
    return { 
    user: state.user 
    }; 
} 

export default connect(mapStateToProps)(BlockForLoggedInUsers); 

、私は戻ってキーを打ったとき、私は別のエラーが出る：

DOMLazyTree.js:69 Uncaught TypeError: Cannot read property 'replaceChild' of null 
    at Function.replaceChildWithTree (DOMLazyTree.js:69) 
    at Object.dangerouslyReplaceNodeWithMarkup [as replaceNodeWithMarkup] (Danger.js:41) 
    at ReactCompositeComponentWrapper._replaceNodeWithMarkup (ReactCompositeComponent.js:784) 
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:774) 
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:724) 
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:645) 
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:547) 
    at Object.receiveComponent (ReactReconciler.js:125) 
    at Object.updateChildren (ReactChildReconciler.js:109) 
    at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:213) 

これは私が持っている問題は、アプリケーションがうまくロードされていることを意味しますが、私は何かを私の#/homeコンポーネントが壊れていると仮定します私はdivを除いてこれを取り除いた。注目すべき

すべてのパッケージ：

"history": "^4.5.1", 
"react": "^15.5.0", 
"react-css-modules": "^4.1.0", 
"react-dom": "^15.5.0", 
"react-redux": "^5.0.3", 
"react-router": "^4.1.1", 
"react-router-dom": "^4.0.0", 
"react-router-redux": "^5.0.0-alpha.6", 
"react-tap-event-plugin": "^2.0.1", 
"redux": "^3.6.0", 
"webpack": "^2.2.1" 

Router.js

export default class Routes extends Component { 
    render() { 
    return (
     <div> 
     <Route exact path="/" component={Splash}/> 

     <Route path="/signin" component={SignIn} /> 
     <Route path="/logout" component={Logout} /> 

     <Route path="/home" component={Home} /> 
     <Route path="/settings" component={Settings} /> 

     <Route path="/sextypeselection" component={SexTypeSelection} /> 
     <Route path="/desire" component={Desire} /> 
     </div> 
    ) 
    } 
}; 

ホーム/ index.js

import React from 'react'; 
import { bindActionCreators } from 'redux' 
import { RequireLogin } from '../shared/auth/userRedirects' 
import mobiscroll from '../shared/mobiscroll/mobiscroll.custom'; 
import * as currentSexInfo from '../../actions/currentSexInfo' 
import {connect} from 'react-redux'; 

//Header 
import Header from '../shared/header/Header'; 
import RightPlus from '../shared/header/RightPlus'; 
import Menu from '../shared/menu'; 

//Styles 
import HomeStyle from './home.css'; 

class Home extends React.Component { 
    constructor (props){ 
    super(props); 
    console.info(props); 
    const now = new Date(); 
    this.state = { 
     settings : { 
     display: 'inline', 
     yearChange: false, 
     marked: [ 
      new Date(2017, 5, 4) 
     ] 
     , max: new Date() 
     // , showOuterDays: false 
     } 
    }; 
    this.selectData = this.selectData.bind(this); 
    } 

    selectData = (event, inst) => { 
    if(event.control) { 
     this.props.DispatchChangeCurrentSexInfo(event.date); 
     window.location.hash = 'sextypeselection'; 
    } 
    }; 

    onPosition = (ev) => { 
    let $ = mobiscroll.$, 
     monthCont = $('.mbsc-cal-anim-c', ev.target), 
     calHeight = document.body.offsetHeight - 375; 
    monthCont.height(''); 
    monthCont.height(calHeight); 
    }; 

    render(){ 
    return (
     <div> 
     <RequireLogin /> 
     <Header right={<RightPlus link="sextypeselection" />} /> 
     <div className={HomeStyle.home}> 
      <div className="pageInfo"> 
      <h1>My calender</h1> 
      <p>Select a date to view <br/> input your information</p> 
      </div> 
      <div className={"cal " + HomeStyle.calenderContainer}> 
      <mobiscroll.Calendar onPosition={this.onPosition} onSetDate={this.selectData} options={this.state.settings} {...this.props} /> 
      </div> 
     </div> 
     <Menu /> 
     </div> 
    ); 
    } 
} 

function matchDispatchToProps(dispatch){ 
    return {DispatchChangeCurrentSexInfo : bindActionCreators(currentSexInfo.changeCurrentSexInfo, dispatch)} 
} 

export default connect(null,matchDispatchToProps)(Home); 

Answer 1

悲しいことに、それは、最終的にはI簡単でした誰もがこのサムを持つだろうと疑うeの問題ですが、最終的にundefinedアイテムで作業しようとしたのはJSON.parseでした。

修正：

const storage = localStorage.LOGGED_IN || {}; 
const loggedIn = this.props.user.loggedIn || JSON.parse(JSON.stringify(storage));