Error starting react project - wordpress

Question

I'm following this tutorial on building a React app on top of WordPress, and I'm having trouble starting it.
I modified package.json file a bit and webpack.config.js` and I am getting the following error in my terminal
➜ wp-api git:(development) ✗ npm start
> wp-api#1.0.0 start /Users/myuser/Projects/wp-api
> webpack-dev-server --open
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.resolve has an unknown property 'modulesDirectories'. These properties are valid:
object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
- configuration.resolve.extensions[0] should not be empty.
npm ERR! Darwin 16.5.0
npm ERR! argv "/usr/local/Cellar/node/7.10.0/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v7.10.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! wp-api#1.0.0 start: `webpack-dev-server --open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the wp-api#1.0.0 start script 'webpack-dev-server --open'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the wp-api package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server --open
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs wp-api
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls wp-api
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/myuser/.npm/_logs/2017-05-15T07_40_36_249Z-debug.log
The log file is
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/7.10.0/bin/node',
1 verbose cli '/usr/local/bin/npm',
1 verbose cli 'start' ]
2 info using npm#4.2.0
3 info using node#v7.10.0
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle wp-api#1.0.0~prestart: wp-api#1.0.0
6 silly lifecycle wp-api#1.0.0~prestart: no script for prestart, continuing
7 info lifecycle wp-api#1.0.0~start: wp-api#1.0.0
8 verbose lifecycle wp-api#1.0.0~start: unsafe-perm in lifecycle true
9 verbose lifecycle wp-api#1.0.0~start: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/myuser/Projects/wp-api/node_modules/.bin:/Users/myuser/.rbenv/shims:/Users/myuser/.rbenv/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin
10 verbose lifecycle wp-api#1.0.0~start: CWD: /Users/myuser/Projects/wp-api
11 silly lifecycle wp-api#1.0.0~start: Args: [ '-c', 'webpack-dev-server --open' ]
12 silly lifecycle wp-api#1.0.0~start: Returned: code: 1 signal: null
13 info lifecycle wp-api#1.0.0~start: Failed to exec start script
14 verbose stack Error: wp-api#1.0.0 start: `webpack-dev-server --open`
14 verbose stack Exit status 1
14 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:279:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:194:7)
14 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:194:7)
14 verbose stack at maybeClose (internal/child_process.js:899:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid wp-api#1.0.0
16 verbose cwd /Users/myuser/Projects/wp-api
17 error Darwin 16.5.0
18 error argv "/usr/local/Cellar/node/7.10.0/bin/node" "/usr/local/bin/npm" "start"
19 error node v7.10.0
20 error npm v4.2.0
21 error code ELIFECYCLE
22 error errno 1
23 error wp-api#1.0.0 start: `webpack-dev-server --open`
23 error Exit status 1
24 error Failed at the wp-api#1.0.0 start script 'webpack-dev-server --open'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the wp-api package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error webpack-dev-server --open
24 error You can get information on how to open an issue for this project with:
24 error npm bugs wp-api
24 error Or if that isn't available, you can get their info via:
24 error npm owner ls wp-api
24 error There is likely additional logging output above.
25 verbose exit [ 1, true ]
The package.json and webpack.config.js are:
{
"name": "wp-api",
"version": "1.0.0",
"description": "React based WordPress app",
"main": "index.js",
"dependencies": {
"alt": "^0.18.6",
"axios": "^0.15.3",
"extract-text-webpack-plugin": "^2.1.0",
"lodash": "^4.17.4",
"node-sass": "^4.5.2",
"prop-types": "^15.5.8",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router": "^3.0.1",
"sass-loader": "^6.0.3"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-env": "^1.4.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.0",
"firebase-tools": "^3.6.1",
"html-webpack-plugin": "^2.28.0",
"react-hot-loader": "^1.3.1",
"style-loader": "^0.16.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
},
"scripts": {
"start": "webpack-dev-server --open",
"test": "echo \"Error: no test specified\" && exit 1"
},
"babel": {
"presets": [
"env",
"react"
]
},
"author": "dingo-d",
"license": "GPL"
}
and
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const outputCss = 'styles/[name].css';
var config = {
devtool: 'inline-source-map', // This will show line numbers where errors are accured in the terminal
devServer: {
historyApiFallback: true, // This will make the server understand "/some-link" routs instead of "/#/some-link"
},
entry: [
'webpack-dev-server/client?http://127.0.0.1:8080/', // Specify the local server port
'webpack/hot/only-dev-server', // Enable hot reloading
'./src/index' // This is where Webpack will be looking for the entry index.js file
],
output: {
path: path.join(__dirname, 'public'), // This is used to specify folder for producion bundle. Will not be used here, but it's a good practice to have it
filename: 'bundle.js' // Filename for production bundle
// publicPath: '/'
},
resolve: {
modulesDirectories: ['node_modules', 'src'], // Folders where Webpack is going to look for files to bundle together
extensions: ['', '.js'] // Extensions that Webpack is going to expect
},
module: {
// Loaders allow you to preprocess files as you require() or “load” them. Loaders are kind of like “tasks” in other build tools, and provide a powerful way to handle frontend build steps.
loaders: [
{
test: /\.jsx?$/, // Here we're going to use JS for react components but including JSX in case this extension is prefered
exclude: /node_modules/, // Speaks for itself
loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015'] // Modules that help with hot reloading and ES6 transcription
}
],
rules: [
{ test: /\.(js)$/, use: 'babel-loader' },
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
})
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(), // Hot reloading
new webpack.NoErrorsPlugin(), // Webpack will let you know if there are any errors
new HtmlWebpackPlugin({
template: 'index.html'
}),
]
}
module.exports = config;
I haven't done much projects with webpack, so my knowledge in this aspect is very limited.
What am I doing wrong? I tried deleting the node_modules folder and running npm install again, but that didn't work.

Answer 1

Solution to the 1st problem:
npm uninstall webpack --save-dev
npm install webpack#2.1.0-beta.22 --save-dev
Solution to the
configuration.resolve.extensions[0] should not be empty. :
Remove '' from the array
resolve: {
modulesDirectories: ['node_modules', 'src'], // Folders where Webpack is going to look for files to bundle together
extensions: ['.js'] // Extensions that Webpack is going to expect
},
Or replace it with '*'
resolve: {
modulesDirectories: ['node_modules', 'src'], // Folders where Webpack is going to look for files to bundle together
extensions: ['*','.js'] // Extensions that Webpack is going to expect
},