Use of spread operator (...) with React and Redux - reactjs

I am building a react app with Redux. I have a reducer returning:
const posts = (state={posts:[], search_criterion:''}, action) => {
switch (action.type) {
case 'SOME_EVENT':
return {
...state,
search_criterion:action.search_criterion
}
default:
return state
}
}
export default posts
When I build with Webpack, I get:
Module build failed: SyntaxError: Unexpected token (x:y)
Which points to ....
Any idea? What am I doing wrong?
webpack.config.js
const webpack = require('webpack');
module.exports = {
context: __dirname + "/app",
entry: {
javascript: "./app.js"
// ,html: "./index.html",
},
output: {
filename: "app.js",
path: __dirname + "/server/js",
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.html$/,
loader: "file?name=[name].[ext]",
},
],
},
//alient app settings settings
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('test'),
'APIHOST': JSON.stringify('http://localhost:8081'),
}
})
],
}
package.json
{
"name": "react-project",
"version": "1.0.0",
"description": "",
"main": "app.js",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./webpack.config.js",
"start": "NODE_ENV=test APIHOST=http://localhost:8081 babel-node server/server.js --presets es2015,stage-2"
},
"babel": {
"presets": [
"es2015",
"react"
]
},
"author": "",
"license": "ISC",
"devDependencies": {
"axios": "^0.15.2",
"babel": "^6.5.2",
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"body-parser": "^1.15.2",
"express": "^4.14.0",
"express-handlebars": "^3.0.0",
"express-session": "^1.14.2",
"file-loader": "^0.9.0",
"node-jsx": "^0.13.3",
"socket.io": "^1.5.1",
"uglify-js": "^2.7.4",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"react": "^15.4.0",
"react-dom": "^15.4.0",
"react-redux": "^4.4.6",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-thunk": "^2.1.0"
}
}

In your package.json add stage-0 under react, like so:
"babel": {
"presets": [
"es2015",
"react"
"stage-0"
]
},
Alternatively you could just add the transform-object-rest-spread plugin.

Related

React - Chrome does not report undefined JavaScript object property. Crashes

Since im building my webapp with React, when i try to set something into an undefined object property, the code processing crashes (reproducible with breakpoint debugging) and no errors are shown in the console log. Also the chrome react extension does not give me any errors.
So to finding a bug is more time consuming that it should be.
let changedJsonResponse = jsonResponse;
changedJsonResponse.data = newTableData; // changedJsonResponse.data is undefined
// throws no error & code proccess crashes
webpack.config.js
const webpack = require('webpack');
const path = require('path');
let config = {
devtool: 'eval-source-map',
entry: {
FooManagement: ['babel-polyfill', './domains/FooManagement/entry.jsx'],
},
output: {
path: path.resolve(__dirname, '../web/react/'),
filename: '[name].js'
},
externals: {
'jquery': 'window.jQuery',
'bootbox': 'window.bootbox',
},
resolve: {
alias: {
alias_shared: path.resolve(__dirname, 'shared'),
},
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: [/node_modules/],
loader: 'babel-loader',
options: {presets: ['es2015', 'react']}
},
{
test: /\.css/,
loader: 'style-loader!css-loader'
}
]
}
};
module.exports = config;
package.json
{
"author": "myself",
"version": "0.0.1",
"description": "",
"main": "index.jsx",
"scripts": {
"watch": "webpack -d --watch",
"build": "webpack -p"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"style-loader": "^0.19.0",
"webpack": "^3.8.1"
},
"dependencies": {
"axios": "^0.16.2",
"dateformat": "^3.0.2",
"is-uuid": "^1.0.2",
"lodash": "^4.17.4",
"react": "^16.0.0",
"react-cropper": "^1.0.1",
"react-dom": "^16.0.0",
"react-dropzone": "^4.2.3",
"react-router-dom": "^4.2.2",
"react-switchery-component": "0.0.7",
"uuid": "^3.1.0"
}
}
Chrome version: 62.0.3202.94
I was able to catch those errors in Axios .catch.
After a while i found the cause of the problem.

Webpack, babel and React Error message

Out of nowhere I started getting this error message,
Invalid configuration object. Webpack has been initialised using a
configuration object that does not match the API schema.
- configuration has an unknown property 'devserver'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?,
devServer?, devtool?, entry, externals?, loader?, module?, name?,
node?, output?, performance?, plugins?, profile?, recordsInputPath?,
recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?,
target?, watch?, watchOptions? } For typos: please correct them.
For loader options: webpack 2 no longer allows custom properties in
configuration.
Loaders should be updated to allow passing options via loader options in module.rules.
Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
plugins: [
new webpack.LoaderOptionsPlugin({
// test: /.xxx$/, // may apply this only for some modules
options: {
devserver: ...
}
})
]
I have been scouring the internet for the past 2 hours trying to find a solution but I am going round in circles!
Here is my .babelrc, webpack.config.js, .js and package.json files.
Any help would be amazing. Thanks
.babelrc
{
"presets":[
"react",
["es2015", {"modules": false, "loose": true}]
]
}
package.json
{
"name": "complete-intro-to-react",
"version": "1.0.0",
"description": "A two day workshop on a complete intro to React",
"main": "index.js",
"author": "Brian Holt <btholt#gmail.com>",
"license": "MIT",
"scripts": {
"test": "NODE_ENV=test jest",
"update-test": "npm run test -- -u",
"build": "webpack",
"dev": "webpack-dev-server",
"lint": "eslint js/**/*.js webpack.config.js",
"watch": "webpack --watch"
},
"dependencies": {
"axios": "0.15.2",
"express": "4.14.0",
"history": "^4.4.0",
"lodash": "4.16.2",
"preact": "^6.4.0",
"preact-compat": "^3.9.3",
"react": "15.3.2",
"react-dom": "15.3.2",
"react-redux": "4.4.0",
"react-router": "4.0.0-alpha.5",
"redux": "3.3.1",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"babel-core": "^6.16.0",
"babel-jest": "16.0.0",
"babel-loader": "^6.2.7",
"babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "6.16.0",
"babel-preset-react": "^6.16.0",
"babel-register": "6.16.0",
"css-loader": "0.25.0",
"enzyme": "2.0.0",
"enzyme-to-json": "^1.3.0",
"eslint": "3.6.1",
"eslint-config-standard": "6.1.0",
"eslint-config-standard-jsx": "3.1.0",
"eslint-config-standard-react": "4.1.0",
"eslint-loader": "1.3.0",
"eslint-plugin-promise": "2.0.1",
"eslint-plugin-react": "6.3.0",
"eslint-plugin-standard": "2.0.0",
"jest": "15.1.1",
"jsdom": "9.5.0",
"json-loader": "0.5.4",
"react-addons-test-utils": "15.3.2",
"react-test-renderer": "15.3.2",
"style-loader": "0.13.1",
"webpack": "^2.1.0-beta.22",
"webpack-dev-server": "1.16.2"
},
"directories": {
"test": "test"
},
"repository": {
"type": "git",
"url": "git+https://github.com/btholt/complete-intro-to-react.git"
},
"keywords": [
"react",
"workshop",
"intro",
"redux"
],
"bugs": {
"url": "https://github.com/btholt/complete-intro-to-react/issues"
},
"homepage": "https://github.com/btholt/complete-intro-to-react#readme"
}
webpack.config.js
const path = require('path')
module.exports = {
context: __dirname,
entry: './js/ClientApp.js',
devtool: 'source-map',
output: {
path: path.join(__dirname, '/public'),
filename: 'bundle.js'
},
devserver: {
publicPath: '/public/'
},
resolve: {
extensions: ['.js', '.json']
},
stats: {
colors: true,
reasons: true,
chunks: false
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: 'eslint-loader',
exclude: /node_modules/
},
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
url: true
}
}
]
}
]
}
}
and the .js file
import React from 'react'
import { render } from 'react-dom'
import '../public/normalize.css'
import '../public/style.css'
const App = React.createClass({
render () {
return (
<div className='app'>
<div className="landing">
<h1>svideo</h1>
<input type="text" placeholder='search' />
<a>or Browse All</a>
</div>
</div>
)
}
})
render(<App/>, document.getElementById('app'));
Capital "S" -->devServer not devserver!

Webpack producing no input

I am aware that this is quite a common problem with Webpack, but I am a total newbie and the solutions I've found so far seem to be very specific to the single project. However, the scenario is the same: Webpack compiling the project correctly and then showing a blank page, without reporting any errors.
Here is my webpack.config.js (I made it following tutorials):
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
export default () => ({
entry: [
path.join(__dirname, 'src/index.jsx'),
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './App.html'
}),
],
module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
use: [
{
loader: 'babel',
options: {
babelrc: false,
presets: [
['es2015', { modules: false }],
'react',
],
}
}
]
},
{
test: /\.(css|scss|sass)$/,
loader: 'style!css!sass',
},
]
},
});
module.exports = config;
Here my package.json:
{
"name": "smart-fit",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"dependencies": {
"chartjs": "^0.3.24",
"interactjs": "^1.2.8",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-hot-loader": "^3.0.0-beta.3",
"react-table": "^5.6.0"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.24.1",
"css-loader": "^0.28.1",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"html-webpack-plugin": "^2.28.0",
"loader-utils": "^1.1.0",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.17.0",
"webpack": "^2.1.0-beta.25",
"webpack-dev-server": "^2.1.0-beta.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Webpack version is the lastest and the project is written using React and ES5.

Webpack 2 : You may need an appropriate loader to handle this file type React

I have checked my config and packages multiple times and cannot figure out whats up. Seems webpack is ignoring my babelrc file but I've also tried using the presets option in my config and still cant get it to transpile React. Doing it from the command line with babel cli works fine:
webpack.config.js
var path = require('path');
const config = {
entry: './frontend/app.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.(js || jsx)$/,
use: 'babel-loader',
include: path.resolve(__dirname, 'frontend')
}
],
}
};
module.exports = config;
.babelrc
{
"presets": [
["es2015", {"modules": false}],
"react",
"stage-0"
],
"plugins": [
["module-resolver", {
"root": ["./frontend"],
"alias": {
"actions": "actions",
"components": "components",
"reducers": "reducers",
"stores": "stores",
"utils": "utils"
}
}]
],
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
package.json
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "./frontend/app.js",
"scripts": {
"test": "jest",
"build": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.14.1",
"fetchr": "^0.5.36",
"fluxible": "^1.2.0",
"fluxible-action-utils": "0.2.4",
"fluxible-addons-react": "0.2.8",
"fluxible-reducer-store": "^0.1.0",
"immutable": "^3.8.1",
"keymirror": "^0.1.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router": "^3.0.2"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.22.2",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-module-resolver": "^2.5.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"jest": "^18.1.0",
"webpack": "^2.2.1"
}
}
/\.(js || jsx)$/
is not how regular expressions work. You mean
/\.(js|jsx)$/

React hot loader not realoading after changes

I have the following webpack.config.js :
"use strict";
const debug = process.env.NODE_ENV !== "production";
const webpack = require('webpack');
const path = require('path');
module.exports = {
devtool: debug ? 'inline-sourcemap' : null,
devServer: {
inline: true,
port: 3333,
hot: true,
contentBase: "src/static/",
historyApiFallback: {
index: '/index-static.html'
}
},
entry: [
'webpack-dev-server/client?http://localhost:3000/',
'webpack/hot/only-dev-server',
'./src/app-client.js'
],
output: {
path: path.join(__dirname, 'src', 'static', 'js'),
publicPath: "/js/",
filename: 'bundle.js'
},
module: {
loaders: [{
test: path.join(__dirname, 'src'),
loader: ['babel-loader'],
query: {
cacheDirectory: 'babel_cache',
presets: debug ? ['react', 'es2015', 'react-hmre'] : ['react', 'es2015']
}
},
{ test: /\.jsx?$/, loaders: ['react-hot', 'jsx?harmony'], include: path.join(__dirname, 'src') }
]
},
plugins: debug ? [] : [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
mangle: true,
sourcemap: false,
beautify: false,
dead_code: true
}),
]
};
package.json
{
"name": "judo-heroes",
"version": "1.0.0",
"description": "Simple application to showcase how to achieve universal rendering and routing with React and Express.",
"main": "src/server.js",
"repository": "git#github.com:lmammino/judo-heroes.git",
"scripts": {
"start": "NODE_ENV=development node_modules/.bin/babel-node --presets 'react,es2015' src/server.js",
"start-dev": "npm run start-dev-hmr",
"start-dev-single-page": "node_modules/.bin/http-server src/static",
"start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot",
"build": "NODE_ENV=development node_modules/.bin/webpack -d"
},
"author": "Luciano Mammino",
"license": "MIT",
"dependencies": {
"babel-cli": "^6.11.4",
"babel-core": "^6.13.2",
"babel-loader": "^6.2.5",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"babel-preset-react-hmre": "^1.1.1",
"ejs": "^2.5.1",
"express": "^4.14.0",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-router": "^2.6.1"
},
"devDependencies": {
"http-server": "^0.9.0",
"react-hot-loader": "^1.3.0",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.14.1"
}
}
I am trying to get the browser to refresh every time I make changes to some of the components, but the changes don't take place.
Your issue is probably that you don't get to the loader with test test: /\.jsx?$/, since the first loader matches.
Can you try to use react-hot in the first module?
{
test: path.join(__dirname, 'src'),
loader: ['react-hot','babel-loader'],
query: {
cacheDirectory: 'babel_cache',
presets: debug ? ['react', 'es2015', 'react-hmre'] : ['react', 'es2015']
}
},
A more precise test for this loader would be better in the long run though.
I simply had to run this command:
"start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot",
from
{
"name": "judo-heroes",
"version": "1.0.0",
"description": "Simple application to showcase how to achieve universal rendering and routing with React and Express.",
"main": "src/server.js",
"repository": "git#github.com:lmammino/judo-heroes.git",
"scripts": {
"start": "NODE_ENV=production node_modules/.bin/babel-node --presets 'react,es2015' src/server.js",
"start-dev": "npm run start-dev-hmr",
"start-dev-single-page": "node_modules/.bin/http-server src/static",
"start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot",
"build": "NODE_ENV=production node_modules/.bin/webpack -p"
},
"author": "Luciano Mammino",
"license": "MIT",
"dependencies": {
"babel-cli": "^6.11.4",
"babel-core": "^6.13.2",
"babel-loader": "^6.2.5",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"babel-preset-react-hmre": "^1.1.1",
"ejs": "^2.5.1",
"express": "^4.14.0",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-router": "^2.6.1"
},
"devDependencies": {
"http-server": "^0.9.0",
"react-hot-loader": "^1.3.0",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.14.1"
}
}

Resources