我试图在我的项目中使用hot-react-loader。 所以我更改了一些文件以使用它,但是当我编辑组件时出现错误。
警告:React.createElement:type不应为null,未定义, 布尔值或数字。它应该是一个字符串(对于DOM元素)或a ReactClass(用于复合组件)。
[HMR]无法应用更新。需要完全重新加载!
我做错了什么?
var webpack = require('webpack');
var path = require('path');
// Questo il plugin di webpack che mi genera il file index.html in dist
var HtmlwebpackPlugin = require('html-webpack-plugin');
const PATHS = {
app: path.join(__dirname, 'app/index'),
build: path.join(__dirname, 'dist')
};
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3500',
'webpack/hot/only-dev-server',
'react-hot-loader/patch',
PATHS.app
],
output: {
path: PATHS.build,
filename: 'js/bundle.js'
},
// Questo serve a non specificare le estensioni
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{ test: /\.(png|jpg)$/, loader: "file?limit=1000&name=images/[hash].[ext]" },
{ test: /\.scss$/, loaders: [ 'style','css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' ] }
]
},
// Porta utilizzata da webpack-dev-server
devServer: {
port: 3500
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlwebpackPlugin({
title: 'React Starter Kit',
hash: true,
inject: false,
appMountId: 'app',
template: 'jade!./app/assets/index.jade'
})
]
};
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.dev');
new WebpackDevServer(webpack(config), {
hot: true,
historyApiFallback: true,
stats: {
colors: true
}
}).listen(3500, 'localhost', function (err) {
if (err) {
console.log(err);
}
console.log('Listening at localhost:3500');
});
import ReactDOM from 'react-dom';
import React from 'react';
import App from './app';
import { AppContainer } from 'react-hot-loader';
const root = document.getElementById('app');
ReactDOM.render(
<AppContainer>
<App />
</AppContainer>
, root);
if (module.hot) {
module.hot.accept('./app', () => {
const App = require('./app');
ReactDOM.render(
<AppContainer>
<App />
</AppContainer>
, root);
});
}
import React from 'react';
import { Router, browserHistory } from 'react-router';
import routes from './routes/routes';
const App = () => (
<Router history={browserHistory} routes={routes} />
);
export default App;
答案 0 :(得分:3)
你必须修改路由器组件本身的原型链以强制渲染新的东西。
<?php
$category = "urban";
$photos = Photo::find_all_category($category);
?>
<script src="js/plugins/jquery.js"></script>
<script src="js/plugins/jquery.backstretch.js"></script>
<div class="row urban">
<div class="col-lg-2">
<div class="row">
<?php foreach($photos as $photo): ?>
<a class="id" id="<?php echo $photo->id; ?>" src="admin/images/<?php echo $photo->filename; ?>"><img class="img-responsive" src="admin/images/<?php echo $photo->filename; ?>" alt=""></a>
<?php endforeach; ?>
</div>
</div>
<div class="col-lg-10">
<div class="backstretch"></div>
</div>
</div>
您在此处看到的代码是https://github.com/gaearon/react-hot-boilerplate/pull/61#issuecomment-211504531
的改编