1
我正尝试使用rect-redux-universal-hot-example构建一个同构ReactJS应用程序样板。react-hot-loader：React.createElement：类型无效 - 更新屏幕期望出现字符串错误
我使用react-hot-loader进行热模块重新加载（hmr）。
当我更改某些应用程序组件数据后，我的浏览器页面不会自动重新加载。我发现了以下错误在浏览器中：
[HMR] connected
main-32cd5038bd66f14eeceb.js:12141 [HMR] bundle rebuilding
main-32cd5038bd66f14eeceb.js:12149 [HMR] bundle rebuilt in 530ms
main-32cd5038bd66f14eeceb.js:30888 [HMR] Checking for updates on the server...
main-32cd5038bd66f14eeceb.js:1000 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
printWarning @ main-32cd5038bd66f14eeceb.js:1000
main-32cd5038bd66f14eeceb.js:30976 [HMR] Cannot check for update (Full reload needed)
handleError @ main-32cd5038bd66f14eeceb.js:30976
main-32cd5038bd66f14eeceb.js:30977 [HMR] Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
at invariant (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:946:15)
at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:11215:55)
at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:19852:24)
at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:19815:10)
at ReactCompositeComponentWrapper.updateComponent (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:19736:12)
at ReactCompositeComponentWrapper.receiveComponent (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:19638:10)
at Object.receiveComponent (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:3479:22)
at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:19845:23)
at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:19815:10)
at ReactCompositeComponentWrapper.updateComponent (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:19736:12)
handleError @ main-32cd5038bd66f14eeceb.js:30977
main-32cd5038bd66f14eeceb.js:946 Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
at invariant (main-32cd5038bd66f14eeceb.js:946)
at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (main-32cd5038bd66f14eeceb.js:11215)
at ReactCompositeComponentWrapper._updateRenderedComponent (main-32cd5038bd66f14eeceb.js:19852)
at ReactCompositeComponentWrapper._performComponentUpdate (main-32cd5038bd66f14eeceb.js:19815)
at ReactCompositeComponentWrapper.updateComponent (main-32cd5038bd66f14eeceb.js:19736)
at ReactCompositeComponentWrapper.receiveComponent (main-32cd5038bd66f14eeceb.js:19638)
at Object.receiveComponent (main-32cd5038bd66f14eeceb.js:3479)
at ReactCompositeComponentWrapper._updateRenderedComponent (main-32cd5038bd66f14eeceb.js:19845)
at ReactCompositeComponentWrapper._performComponentUpdate (main-32cd5038bd66f14eeceb.js:19815)
at ReactCompositeComponentWrapper.updateComponent (main-32cd5038bd66f14eeceb.js:19736)
这里是我的设置：
.babelrc
{
"presets": ["react", "es2015", "stage-0"],
"plugins": [
"transform-runtime",
"add-module-exports",
"transform-react-display-name",
"flow-runtime",
"react-hot-loader/babel"
]
}
client.js
import ReactDOM from 'react-dom';
import React from 'react';
import { AppContainer } from 'react-hot-loader';
import App from './component/App/app';
const NextApp = require('./component/App/app').default;
const dest = document.getElementById('content');
const render = (Component) => {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
dest
);
};
render(App);
console.log('MODULE HOT:');
console.log(module.hot);
if (module.hot) {
module.hot.accept('./component/App/app',() => {
render(NextApp);
});
}
** App **
import React from 'react';
const App =() => (
<div className="wrapper">
<h1>This is my App!!!!</h1>
</div>
);
export default App;
dev.config
require('babel-polyfill');
// Webpack config for development
var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var assetsPath = path.resolve(__dirname, '../static/dist');
var host = (process.env.HOST || 'localhost');
var port = (+process.env.PORT + 1) || 3001;
// https://github.com/halt-hammerzeit/webpack-isomorphic-tools
var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));
module.exports = {
devtool: 'inline-source-map',
context: path.resolve(__dirname, '..'),
entry: {
'main': [
'react-hot-loader/patch',
'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
'./src/client.js'
]
},
output: {
path: assetsPath,
filename: '[name]-[hash].js',
chunkFilename: '[name]-[chunkhash].js',
publicPath: 'http://' + host + ':' + port + '/dist/'
},
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader', 'eslint-loader']},
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.less$/, loader: 'style-loader!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' },
{ test: /\.scss$/, loader: 'style-loader!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" },
{ test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
]
},
resolve: {
modules: [
'src',
'node_modules'
],
extensions: ['*', '.json', '.js', '.jsx']
},
plugins: [
// hot reload
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(/webpack-stats\.json$/),
new webpack.DefinePlugin({
__CLIENT__: true,
__SERVER__: false,
__DEVELOPMENT__: true,
__DEVTOOLS__: true // <-------- DISABLE redux-devtools HERE
}),
webpackIsomorphicToolsPlugin.development()
]
};
我失去了在哪里可以找到的错误，因为我不是很习惯与HMR工作。帮助赞赏。