npm start not working with webpack React - json

Question

Currently I am self teaching myself React and trying to set-up a beginning framework. I'm having the following error after running npm start in my command line:
~/projects/reactApp » webpack --display-error-details Dustin#Dustins-MacBook-Pro
Hash: 94c3df302d8dd2990ab8
Version: webpack 2.4.1
Time: 37ms
ERROR in Entry module not found: Error: Can't resolve './main.js' in '/Users/Dustin/projects/reactApp'
resolve './main.js' in '/Users/Dustin/projects/reactApp'
using description file: /Users/Dustin/projects/reactApp/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /Users/Dustin/projects/reactApp/package.json (relative path: .)
using description file: /Users/Dustin/projects/reactApp/package.json (relative path: ./main.js)
as directory
/Users/Dustin/projects/reactApp/main.js doesn't exist
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/Dustin/projects/reactApp/main.js doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/Dustin/projects/reactApp/main.js.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/Dustin/projects/reactApp/main.js.json doesn't exist
------------------------------------------------------------
~/projects/reactApp »
Coincidentally I get the same error when trying to load localhost:7777. I'm not to familiar with webpack and curious what I am doing wrong. Webpack isn't great at displaying errors, but I've managed to fix other errors up to this point.
webpack.config.js
var config = {
entry: './main.js',
output: {
path: '/',
filename: 'index.js'
},
devServer: {
inline: true,
port: 7777
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
}
module.exports = config;
package.json
{
"name": "reactapp",
"version": "1.0.0",
"description": "first React app following tutorial",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"repository": {
"type": "git",
"url": "reactApp"
},
"keywords": [
"react"
],
"author": "Dustin Waggoner",
"license": "ISC",
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-plugin-transform-react-jsx": "^6.24.1"
}
}
I think it is a path problem, but attempted several different options to correct this. Thanks for any help.

Answer 1

Try this. resolve is mandatory while you are using none-default settings.
Here is the documents for webpack .
var config = {
entry: './main.js',
output: {
path: '/',
filename: 'index.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
inline: true,
port: 7777
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
}
module.exports = config;