本文介绍了反应 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 不是函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!