React/Webpack2 を使用しようとしていますが、開発モードで動作しています。しかし、本番モードに切り替えようとすると、次のエラーが発生しました。
ReactComponentTreeHook.js:164 Uncaught SyntaxError: Unexpected token :
ソースコードを確認したところ、すべて問題ないように見えますが、どういうわけか機能しません。
process.env.NODE_ENV !== 'production' ? warning(element, 'ReactComponentTreeHook: Missing React element for debugID %s when ' + 'building stack', id) : void 0;
助けてくれてありがとう！
私はかなり標準的な構成を使用しています（webpack2オフドキュメントから）
.babelrc { "presets": [ ["es2015", {"modules": false}], // webpack はネイティブのインポート構文を理解し、それをツリー シェーキングに使用します
"stage-2",
// Specifies what level of language features to activate.
// Stage 2 is "draft", 4 is finished, 0 is strawman.
// See https://tc39.github.io/process-document/
"react"
// Transpile React components to JavaScript
],
"plugins": [
"react-hot-loader/babel"
// Enables React code to work with HMR.
]
}
//
//{
// "presets": ["react", "es2015", "stage-0"],
// "plugins": ["react-hot-loader/babel"]
//}
webpack.common.config
var autoprefixer = require('autoprefixer');
var precss = require('precss');
var webpack = require("webpack"),
helpers = require("./helpers"),
glob = require("glob"),
HtmlWebpackPlugin = require("html-webpack-plugin"),
ExtractTextPlugin = require("extract-text-webpack-plugin"),
CopyWebpackPlugin = require("copy-webpack-plugin"),
srcName = "src";
module.exports = {
entry : [
'react-hot-loader/patch',
// activate HMR for React
'webpack-dev-server/client?http://localhost:5000',
// bundle the client for webpack-dev-server
// and connect to the provided endpoint
'webpack/hot/only-dev-server',
// bundle the client for hot reloading
// only- means to only hot reload for successful updates
'babel-polyfill',
helpers.root(srcName, "index.js")
],
context : helpers.root(srcName),
module : {
rules : [
{
enforce : 'pre',
test : /\.jsx?$/,
loader : 'eslint-loader',
options: {
fix: true,
},
include: helpers.root(srcName)
},
{
test : /\.jsx?$/,
loaders : [
'babel-loader',
],
exclude : /node_modules/
},
{
test : /\.css$/,
loaders : [
'style-loader',
'css-loader?modules',
'postcss-loader',
],
},
],
},
plugins : [
new webpack.LoaderOptionsPlugin({
options : {
// Javascript lint
eslint : {
configFile : '.eslintrc',
failOnWarning : false,
failOnError : false
}
}
})
]
};
webpack.prod.config
var helpers = require("./helpers"),
commonConfig = require("./webpack.common.js"),
webpack = require("webpack"),
webpackMerge = require("webpack-merge"),
ExtractTextPlugin = require("extract-text-webpack-plugin"),
CssSourcemapPlugin = require("css-sourcemaps-webpack-plugin"),
CopyWebpackPlugin = require("copy-webpack-plugin"),
HtmlWebpackPlugin = require("html-webpack-plugin");
const ENV = process.env.NODE_ENV = process.env.ENV = "production";
// path : helpers.root("dist"),
module.exports = webpackMerge(commonConfig, {
devtool : "source-map",
output : {
path : helpers.root("dist"),
publicPath : "/",
filename : "[name].[hash].js",
chunkFilename : "[id].[hash].chunk.js"
},
plugins : [
new HtmlWebpackPlugin({
rootPath : "",
template : "index.ejs"
}),
new webpack.NoErrorsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
children : true,
async : true,
}),
new CssSourcemapPlugin(),
new ExtractTextPlugin("[name].css"),
new webpack.DefinePlugin({
"process.env" : {
"ENV" : JSON.stringify(ENV)
}
})
]
});
パッケージ.json
{
"name": "giffy_search",
"version": "1.0.0",
"description": "The Gif Search Engine",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"deploy": "rimraf ./dist && webpack --config config/webpack.prod.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/wellnine/giffySearch.git"
},
"keywords": [
"search",
"gif",
"engine"
],
"author": "Sviat Wellnine",
"license": "ISC",
"bugs": {
"url": "https://github.com/wellnine/giffySearch/issues"
},
"homepage": "https://github.com/wellnine/giffySearch#readme",
"devDependencies": {
"autoprefixer": "^6.5.3",
"babel": "^6.5.2",
"babel-core": "^6.20.0",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.9",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-es2015-native-modules": "^6.9.4",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"babel-polyfill": "^6.20.0",
"babel-runtime": "^6.20.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.26.1",
"css-sourcemaps-webpack-plugin": "^1.0.3",
"ejs-loader": "^0.3.0",
"eslint": "^3.12.0",
"eslint-loader": "^1.6.1",
"eslint-plugin-react": "^6.8.0",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"html-webpack-plugin": "^2.24.1",
"postcss-loader": "^1.2.0",
"precss": "^1.4.0",
"react-addons-test-utils": "^15.4.1",
"react-hot-loader": "^3.0.0-beta.1",
"redux-devtools": "^3.3.1",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.1.1",
"rimraf": "^2.5.4",
"stats-webpack-plugin": "^0.4.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^2.1.0-beta.27",
"webpack-dev-server": "^2.1.0-beta.0",
"webpack-merge": "^1.1.1"
},
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-redux": "^4.4.6",
"react-router": "^3.0.0",
"react-router-redux": "^4.0.7",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-thunk": "^2.1.0"
}
}