Question

在React / Redux应用程序中，使用Webpack我在尝试进行热重新加载时遇到此类型错误（第一次工作，但我得到一个错误，然后停止工作）。

该应用程序是基于这个入门套件构建的：https://github.com/davezuko/react-redux-starter-kit/tree/v1.0.1，但我想库的某些更新破坏了一些东西。

错误：

React Transform HMR] There was an error updating /www/src/containers/Root.js
index.js:60 TypeError: modules[moduleId].call is not a function(…)

应用程序的完全剥离版本，但在HRM中仍然出错。

根文件（即：https://github.com/davezuko/react-redux-starter-kit/blob/v1.0.1/src/containers/Root.js）接收如下路由：

import React from 'react';
import { Route, IndexRoute, Redirect } from 'react-router';

import WelcomeLayout from 'layouts/WelcomeLayout/WelcomeLayout';
import NotFoundView from 'views/NotFoundView/NotFoundView';

export default (
    <Route>
        <Route component={WelcomeLayout} path='/'>
            <IndexRoute component={NotFoundView} />
        </Route>
        <Redirect from='*' to='/'/>
    </Route>
);

NotFoundView：

import React from 'react';
import { Link } from 'react-router';

export class NotFoundView extends React.Component {
    render () {
        return (
            <div>
                <h1>Page not found - 404!</h1>
                <hr />
                <Link to='/'>Back</Link>
            </div>
        );
    }
}

export default NotFoundView;

的package.json：

{
  "name": "App",
  "version": "0.0.1",
  "description": "myApp",
  "private": true,
  "main": "index.js",
  "engines": {
    "node": ">=4.2.0",
    "npm": "^3.0.0"
  },
  "scripts": {
    "clean": "rm -rf dist",
    "compile": "node -r dotenv/config --harmony bin/compile",
    "lint": "eslint . ./",
    "lint:fix": "npm run lint -- --fix",
    "start": "better-npm-run start",
    "dev": "better-npm-run dev",
    "dev:nw": "npm run dev -- --nw",
    "dev:no-debug": "npm run dev -- --no_debug",
    "test": "better-npm-run test",
    "test:dev": "npm run test -- --watch",
    "deploy": "better-npm-run deploy"
  },
  "betterScripts": {
    "dev": {
      "command": "nodemon -r dotenv/config bin/server",
      "env": {
        "NODE_ENV": "development"
      }
    },
    "deploy": {
      "command": "npm run clean && npm run compile",
      "env": {
        "NODE_ENV": "production"
      }
    },
    "start": {
      "command": "node -r dotenv/config bin/server"
    },
    "test": {
      "command": "node -r dotenv/config ./node_modules/karma/bin/karma start bin/karma.js",
      "env": {
        "NODE_ENV": "test"
      }
    }
  },
  "dependencies": {
    "better-npm-run": "0.0.5",
    "debug": "^2.2.0",
    "dotenv": "^1.2.0",
    "es6-promise": "^3.0.2",
    "history": "^2.0.0-rc2",
    "isomorphic-fetch": "^2.2.1",
    "koa": "^2.0.0-alpha.3",
    "koa-connect-history-api-fallback": "^0.3.0",
    "koa-convert": "^1.2.0",
    "koa-static": "^2.0.0",
    "react": "^0.14.0",
    "react-bootstrap": "^0.28.2",
    "react-dom": "^0.14.0",
    "react-redux": "^4.0.0",
    "react-router": "^2.0.0-rc5",
    "redux": "^3.0.0",
    "redux-actions": "^0.9.0",
    "redux-simple-router": "^2.0.2",
    "redux-thunk": "^1.0.0",
    "url": "^0.11.0",
    "yargs": "^3.18.0"
  },
  "devDependencies": {
    "babel-core": "^6.3.17",
    "babel-eslint": "^5.0.0-beta6",
    "babel-loader": "^6.2.0",
    "babel-plugin-add-module-exports": "^0.1.1",
    "babel-plugin-transform-runtime": "^6.3.13",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-react-hmre": "^1.0.0",
    "babel-preset-stage-0": "^6.3.13",
    "babel-register": "^6.3.13",
    "babel-runtime": "^6.3.19",
    "chai": "^3.4.1",
    "chai-as-promised": "^5.1.0",
    "css-loader": "^0.23.0",
    "cssnano": "^3.3.2",
    "eslint": "^1.10.3",
    "eslint-config-standard": "^4.4.0",
    "eslint-config-standard-react": "^1.2.1",
    "eslint-loader": "^1.1.1",
    "eslint-plugin-babel": "^3.0.0",
    "eslint-plugin-react": "^3.14.0",
    "eslint-plugin-standard": "^1.3.1",
    "extract-text-webpack-plugin": "^1.0.0",
    "fetch-mock": "^4.0.1",
    "fetch-mock-forwarder": "^1.0.0",
    "file-loader": "^0.8.4",
    "fs-extra": "^0.26.3",
    "html-webpack-plugin": "^1.6.1",
    "isparta-loader": "^2.0.0",
    "json-loader": "^0.5.4",
    "karma": "^0.13.8",
    "karma-chai": "^0.1.0",
    "karma-chai-as-promised": "^0.1.2",
    "karma-chai-sinon": "^0.1.5",
    "karma-coverage": "^0.5.0",
    "karma-mocha": "^0.2.0",
    "karma-phantomjs-launcher": "^0.2.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.23",
    "karma-webpack": "^1.7.0",
    "mocha": "^2.2.5",
    "node-sass": "^3.3.3",
    "nodemon": "^1.8.1",
    "phantomjs-prebuilt": "^2.1.3",
    "phantomjs-polyfill": "0.0.1",
    "postcss-loader": "^0.8.0",
    "react-addons-test-utils": "^0.14.0",
    "react-shallow-testutils": "^0.7.1",
    "redux-devtools": "^3.0.0",
    "redux-devtools-dock-monitor": "^1.0.1",
    "redux-devtools-log-monitor": "^1.0.1",
    "redux-mock-store": "0.0.6",
    "sass-loader": "^3.0.0",
    "sinon": "^1.17.2",
    "sinon-chai": "^2.8.0",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.6",
    "webpack": "1.12.9",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0"
  }
}

任何可能导致此问题的想法？

Answer 1

删除节点模块文件夹并使用npm install修复热模块替换重新安装所有库。因此，它必须是某个模块的失败安装或由于更新库而发生的一些冲突。

Answer 2

您的Root组件导出看起来很时髦。您正在导出运行Route声明表达式的返回值：

<Route>
    <Route component={WelcomeLayout} path='/'>
        <IndexRoute component={NotFoundView} />
    </Route>
    <Redirect from='*' to='/'/>
</Route>

您可能应该导出React组件。了解他们如何在Root中创建react-redux-starter-kit组件：https://github.com/davezuko/react-redux-starter-kit/blob/v1.0.1/src/containers/Root.js

// Root file

export default class Root extends React.Component {
    render() {
        return (
            <Router>
                <Route component={WelcomeLayout} path='/'>
                    <IndexRoute component={NotFoundView} />
                </Route>
                <Redirect from='*' to='/'/>
            </Router>
        );
    }
}

当您可能打算使用<Route>然后将<Router>组件放在其中时，您似乎也使用了<Route>作为react-router包装器？

反应HMR失败：modules [moduleId] .call不是函数

2 个答案: