本文介绍了反应 HMR 失败:modules[moduleId].call 不是函数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在 React/Redux 应用程序中,使用 Webpack 尝试进行热重载时出现此 TypeError(第一次有效,但我在下面显示错误,然后停止工作).

该应用程序基于此入门套件构建:https://github.com/davezuko/react-redux-starter-kit/tree/v1.0.1,但我猜库的某些更新破坏了某些东西.

错误:

React Transform HMR] 更新/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) 接收这样的路由:

从'react'导入React;import { Route, IndexRoute, Redirect } from 'react-router';从布局/欢迎布局/欢迎布局"导入欢迎布局;从'views/NotFoundView/NotFoundView'导入NotFoundView;导出默认值 (<路线><Route component={WelcomeLayout} path='/'><IndexRoute 组件={NotFoundView}/></路线><重定向从='*'到='/'/></路线>);

NotFoundView:

从'react'导入React;从反应路由器"导入{链接};导出类 NotFoundView 扩展了 React.Component {使成为 () {返回 (<div><h1>未找到页面 - 404!</h1><小时/><链接到='/'>返回</链接>

);}}导出默认的 NotFoundView;

package.json:

{"name": "应用程序",版本":0.0.1","description": "myApp",私人":真的,"main": "index.js",引擎": {节点":> = 4.2.0","npm": "^3.0.0"},脚本":{"干净": "rm -rf dist","compile": "node -r dotenv/config --harmony bin/compile","lint": "eslint ../","lint:fix": "npm 运行 lint -- --fix","start": "更好的 npm-run 开始","dev": "更好的 npm-run dev","dev:nw": "npm run dev -- --nw","dev:no-debug": "npm run dev -- --no_debug","test": "更好的 npm 运行测试","test:dev": "npm 运行测试 -- --watch",部署":更好的 npm 运行部署"},更好的脚本":{开发":{"command": "nodemon -r dotenv/config bin/server",环境":{"NODE_ENV": "开发"}},部署": {"command": "npm run clean && npm run compile",环境":{"NODE_ENV": "生产"}},开始": {命令":节点 -r dotenv/config bin/server"},测试": {"command": "node -r dotenv/config ./node_modules/karma/bin/karma start bin/karma.js",环境":{"NODE_ENV": "测试"}}},依赖关系":{"更好的 npm-run": "0.0.5","调试": "^2.2.0","dotenv": "^1.2.0","es6-promise": "^3.0.2","历史": "^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",反应":^0.14.0",反应引导":^0.28.2","react-dom": "^0.14.0","react-redux": "^4.0.0",反应路由器":^ 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"},开发依赖":{"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","柴": "^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","文件加载器": "^0.8.4","fs-extra": "^0.26.3","html-webpack-plugin": "^1.6.1","isparta-loader": "^2.0.0","json-loader": "^0.5.4","业力": "^0.13.8","karma-chai": "^0.1.0","karma-chai-as-promised": "^0.1.2","karma-chai-sinon": "^0.1.5","业力覆盖": "^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","摩卡": "^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"}}

任何可能导致这种情况的想法?

解决方案

使用 npm install 固定热模块替换,删除节点模块文件夹并重新安装所有库.所以一定是某个模块安装失败,或者是因为更新了库而发生了一些冲突.

In React/Redux application, using Webpack I am getting this TypeError when trying to do a hot reload (first time works, but I get an error displayed bellow and afterwards stops working).

The app is build on this starter kit: https://github.com/davezuko/react-redux-starter-kit/tree/v1.0.1, but I guess that some update of the library broke something.

Error:

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

Totally stripped version of app bellow, but still error in HRM.

Root file (that is this: https://github.com/davezuko/react-redux-starter-kit/blob/v1.0.1/src/containers/Root.js) receives routes like this:

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"
  }
}

Any ideas what could cause this?

解决方案

Removing the node modules folder and reinstalling all the libraries with npm install fixed hot module replacement. So it have must been either a failing install of some module or some conflict that happened because of updated library.

这篇关于反应 HMR 失败:modules[moduleId].call 不是函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 19:25