Missing Loader, Webpack and React - reactjs

Question

I am building an application using Reactstrap and Webpack. I am struggling with Webpack and React. I am tring to run my react-dev server but I am running into this error in my terminal:
ericpark-macbookpro3:mvp ericpark$ npm run react-dev
> github-fetcher-fullstack-v2#1.0.0 react-dev /Users/ericpark/Desktop/mvp
> webpack -d --watch
Webpack is watching the files…
Hash: d1e3cad44a718dd4af71
Version: webpack 2.7.0
Time: 64ms
Asset Size Chunks Chunk Names
bundle.js 3.35 kB 0 [emitted] main
[0] ./react-client/src/index.jsx 298 bytes {0} [built] [failed] [1 error]
ERROR in ./react-client/src/index.jsx
Module parse failed: /Users/ericpark/Desktop/mvp/react-client/src/index.jsx Unexpected token (61:6)
You may need an appropriate loader to handle this file type.
| render() {
| return (
| <div className="App">
| <Navbar></Navbar>
| <Container>
It looks like I am missing a loader. Here is my webpack.config.js
var path = require('path');
var SRC_DIR = path.join(__dirname, '/react-client/src');
var DIST_DIR = path.join(__dirname, '/react-client/dist');
module.exports = {
entry: `${SRC_DIR}/index.jsx`,
output: {
filename: 'bundle.js',
path: DIST_DIR
},
module : {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
],
loaders : [
{
test : /\.jsx?/,
include : SRC_DIR,
loader : 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['env', 'react', 'es2015', 'stage-0']
}
}
]
}
};
Here is my starting file index.jsx as well:
import React, { Component } from 'react';
import Navbar from './components/Navbar.jsx';
import Login from './components/Login.jsx';
import SignUp from './components/SignUp.jsx';
import Search from './components/Search.jsx';
import ProductList from './components/ProductList.jsx';
import FavoriteList from './components/FavoriteList.jsx';
import { Route, Switch } from 'react-router-dom';
import {Container} from 'reactstrap';
import axios from 'axios';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';
class App extends Component {
constructor() {
super();
this.state = {
query : '',
products : [
{
name: 'Samsung - Galaxy J3 with 16GB Memory Cell Phone - Silver (AT&T)',
url: 'https://api.bestbuy.com/click/-/5887123/pdp',
price: 179.99,
image: 'https://img.bbystatic.com/BestBuy_US/images/products/5887/5887123_sd.jpg',
description: 'Android 7.0 Nougat4G LTE5" HD touch screenBluetooth'
},
{
name: 'Samsung - Book Cover for Samsung Galaxy Tab S2 8 - Black',
url: 'https://api.bestbuy.com/click/-/4346001/pdp',
price: 59.99,
image: 'https://img.bbystatic.com/BestBuy_US/images/products/4346/4346001_sd.jpg',
description: 'Compatible with Samsung Galaxy Tab S2 8; polyurethane material; auto on/off function; 3 viewing angles'
},
{
name: 'Samsung - Case for Samsung Galaxy S8 - Blue/clear',
url: 'https://api.bestbuy.com/click/-/5851701/pdp',
price: 19.99,
image: 'https://img.bbystatic.com/BestBuy_US/images/products/5851/5851701_sb.jpg',
description: 'Compatible with Samsung Galaxy S8'
}
],
favorites : []
}
}
handleQuery (event) {
event.preventDefault;
this.setState({
query : event.target.value
});
console.log(event.target.value);
//POST request for searching products
// axios.post('/search', {query : this.state.query}).then(function(response){
// this.setState = {products : response};
// })
}
render() {
return (
<div className="App">
<Navbar></Navbar>
<Container>
<Switch>
<Route path='/login' component={Login}/>
<Route path='/signup' component={SignUp}/>
<Route path='/' render = {(props) =>
<div>
<Search handleQuery = {this.handleQuery.bind(this)}></Search>
<ProductList products = {this.state.products}></ProductList>
</div>
}/>
<Route path='/favorites' render = {(props) =>
<FavoriteList favorites = {this.state.favorites}></FavoriteList>
}/>
</Switch>
</Container>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
Any help would be greatly appreciated
package.json
{
"name": "github-fetcher-fullstack-v2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"react-dev": "webpack -d --watch",
"server-dev": "nodemon server/index.js"
},
"author": "Beth Johnson",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.4.5",
"babel-loader": "^6.2.1",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.23.0",
"css-loader": "^0.28.11",
"react-hot-loader": "^4.1.2",
"webpack": "^2.7.0"
},
"dependencies": {
"angular": "^1.6.3",
"body-parser": "^1.17.2",
"bootstrap": "^4.1.0",
"express": "^4.15.0",
"jquery": "^3.1.1",
"mongoose": "^4.8.6",
"mysql": "^2.13.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"reactstrap": "^5.0.0"
}
}

Answer 1

Seems like Webpack config has a small problem and jsx files are not matched with appropriate loaders.
Try test: /\.jsx?$/, and see if it works.

Answer 2

You can easily fix by updating your config to process both .js and .jsx files:
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
}
You can add the following snippet to the webpack configuration object.
resolve: { extensions: [".jsx", ".js"] }

Answer 3

In your case, you might need to use js file that I recommend this config.
module:{
rules:[{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
test: /\.jsx?$/,
exclude: /node_modules/,
}, {
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}]
}
The config includes all loader for any file you might need, eg: js jsx css scss.