Fatal编程技术网
  • javascript/
  • Javascript 无法读取属性'；替换儿童'；空URL的名称：webpack:///./~react dom/lib/DOMLazyTree.js

Javascript 无法读取属性'；替换儿童'；空URL的名称：webpack:///./~react dom/lib/DOMLazyTree.js

javascript cordova reactjs

Javascript 无法读取属性'；替换儿童'；空URL的名称：webpack:///./~react dom/lib/DOMLazyTree.js,javascript,cordova,reactjs,phonegap,Javascript,Cordova,Reactjs,Phonegap,我正在使用phonegap创建一个应用程序，它使用react v15和“webpack”：“^2.2.1”来捆绑所有内容。然后，我运行webpack.prod.json生成一个独立的.js文件，该文件包含在应用程序中 当我在本地安装应用程序时，我没有问题，可以运行该应用程序，但是当我通过phonegap.com/build进行构建时，问题就会出现 更奇怪的是，初始状态加载良好。当我导航到#/home时，会发生以下错误： Uncaught SyntaxError: Unexpected token

我正在使用phonegap创建一个应用程序，它使用
react v15
和
“webpack”：“^2.2.1”
来捆绑所有内容。然后，我运行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)
我遇到的问题是，这意味着应用程序加载良好，但我假设我的
#/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

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);

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>
    )
  }
};

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);

导出默认类路由扩展组件{
render（）{
返回(
)
}
};
home/index.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);

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>
    )
  }
};

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);

从“React”导入React；
从“redux”导入{bindActionCreators}
从“../shared/auth/userRedirects”导入{RequireLogin}
从“../shared/mobiscroll/mobiscroll.custom”导入mobiscroll；
从“../../actions/currentSexInfo”导入*作为currentSexInfo
从'react redux'导入{connect}；
//标题
从“../shared/Header/Header”导入头；
从“../shared/header/RightPlus”导入RightPlus；
从“../shared/Menu”导入菜单；
//风格
从“/home.css”导入HomeStyle；
类Home扩展了React.Component{
建造师（道具）{
超级（道具）；
控制台信息（道具）；
const now=新日期（）；
此.state={
设置：{
显示：“内联”，
年份变化：假，
标记：[
新日期（2017年5月4日）
]
，max:新日期（）
//，showOuterDays:false
}
};
this.selectData=this.selectData.bind（this）；
}
选择数据=（事件、指令）=>{
if（事件控制）{
此.props.DispatchChangeCurrentSexInfo（事件日期）；
window.location.hash='sextypeselection'；
}
};
ON位置=（ev）=>{
设$=mobiscroll.$，
monthCont=$（'.mbsc-cal-anim-c'，ev.target），
计算高度=document.body.offsetHeight-375；
月台高度（“”）；
蒙特康特高度（calHeight）；
};
render（）{
返回(
我的日历
选择要查看的日期
输入您的信息

);
}
}
功能匹配DispatchToprops（调度）{
返回{DispatchChangeCurrentSexInfo:bindActionCreators（currentSexInfo.changeCurrentSexInfo，dispatch）}
}
导出默认连接（空，matchDispatchToProps）（主）；
遗憾的是，最终它很简单，我怀疑任何人都会遇到同样的问题，但最终它是
JSON.parse
试图处理
未定义的
项

修复方法：


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



不幸的是，最终它很简单，我怀疑任何人都会有同样的问题，但最终它是
JSON.parse
试图处理
未定义的
项

修复方法：


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


这里

在库中>>
DOMLazyTree.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);



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>
    )
  }
};



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);



oldNode
get in null，因此
parentNode
get in undefind for
replaceChild
函数


function replaceChildWithTree(oldNode, newTree) {
  oldNode.parentNode.replaceChild(newTree.node, oldNode);
  insertTreeChildren(newTree);
}


因此，请确保使用所需的数据满足
oldNode.parentNode
。
此处

在库中>>
DOMLazyTree.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);



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>
    )
  }
};



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);



oldNode
get in null，因此
parentNode
get in undefind for
replaceChild
函数


function replaceChildWithTree(oldNode, newTree) {
  oldNode.parentNode.replaceChild(newTree.node, oldNode);
  insertTreeChildren(newTree);
}


因此，请确保使用所需的数据满足
oldNode.parentNode