React-hot-loader 一直报错，不知道怎么解决

#1

目录结构

搞了一晚上没搞好，不用hot-loader可以运行

#2

在plugins中添加

new webpack.DefinePlugin({
		"process.env": {
			NODE_ENV: JSON.stringify("production")
		}
	})
#3

加了也没用，都是一样 :joy:

#4

我在node里面打印了process.env, 发现压根没有NODE_ENV

#5

按理说设置了这个plugin，webpack会把代码中的process.env.NODE_ENV替换成字符串，是不是在没有用webpack处理的代码中用了process.env.NODE_ENV。
你可以试试用cross-env插件。
package.json的scripts中添加

"testnv":"cross-env NODE_ENV=development node test1.js"

test1.js

console.log(process.env.NODE_ENV);
#6

我的webpack配置是这样的，webpack-dev-server可以实现热加载的效果，不用在配置react-hot-loader了。

var webpack = require("webpack");
var path = require("path");

var config = {
	entry: './js/index.js',

	output: {
		path: './js/build/',
		filename: 'bundle.js',
		publicPath: '/js/build/',
		chunkFilename: "[id].bundle.js"
	},

	module: {
		loaders: [
			{
				test: /\.js$/, 
				include: [
					path.resolve(__dirname, "js")
				],
				exclude: [
					path.resolve(__dirname, "js/build"),
					path.resolve(__dirname, "node_modules")
				],
				loader: 'babel-loader',
				query: {
					presets: ['es2015', 'react'],
					plugins: ['transform-object-assign']
				}
			}
		]
	},

	plugins: []
};

var env = process.env.NODE_ENV;
console.log("node env: \x1b[32m" + env + "\x1b[0m");
if (env === 'production') {
	// 将代码中的process.env.NODE_ENV替换为production，方便webpack压缩代码
	config.plugins.push(
		new webpack.DefinePlugin({
			"process.env": {
				NODE_ENV: JSON.stringify("production")
			}
		})
	);
	// 开启sourcemap
	config.devtool = "source-map";
	// // 开启文件hash	//暂不使用，上线时再开启
	// config.output.filename = "[hash].bundle.js";
	// config.output.chunkFilename = "[id].[hash].bundle.js";
}
module.exports = config;
#7

贴一下index.html文件内容，前两天我配hot模式快被搞疯了，最后发现问题在index.html文件中。

#9

cross-env 不用额外安装吗？

还是undefined :disappointed_relieved:

#10

已贴上

#11

好像和我碰到的问题不一样，我是在引入bundle.js的时候，没注意加上了type=“text/babel”，然后就各种折腾，去掉就好了！

#12

嗯，cross-env需要安装才行。

 "devDependencies": {
...
    "cross-env": "^1.0.7"
...
#13

可能我发现了原因了，就是我的webpack之前就不会watch的，watch改了代码都没反应，所以server用我打包的错误代码一直运行，现在没那个报错了，但是我改了也没update

#14

不使用React-hot-loader只使用webpack-dev-server就可以做到无刷新吧？

#15

啊啊啊，我终于知道问题了，太TM坑爹了，其实我一开始就有想过这个问题。怪就怪这node_modules动则上10W个文件的搞得我没去换目录试试。
C:\Program Files (x86)\ 我项目在这里面，而目录里面有空格！
我找到一个测试工具https://github.com/webpack/watchpack 我在其他目录试测试能跑通，就这个TM的带空格的目录基本都没跑通！
浪费了我1整天时间当买个教训。