I can't start server. Webpack2, babel-loader, Redux

[aopiskin]

I am new in React and doing a Todo List but i can't start my server because i am getting error when I try yarn run build

Error

ERROR in ./src/index.js
Module parse failed: C:\Users\PixyDigital\Desktop\Getto\src\index.js Unexpected token (8:4)
You may need an appropriate loader to handle this file type.
|
| render(
|
|
| ,
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js
webpack: Failed to compile.

index.js

import React from "react"
import {render} from "react-dom"
import {Provider} from "react-redux"
import store from "./stores/store"
import App from "./components/app.js"

render(


,
document.getElementById("app")
)

webpack.config.js

module.exports = {
entry: __dirname + "/src/index.js",
output:{
filename: "bundle.js",
path: __dirname + "/dist"
},
module:{
loaders:[
{
test:/.css$/,
loader:"style-loader$css-loader"
},
{
test:/.jsx$/,
loader:"babel-loader",
exclude:/node_modules/
}
]
},
resolve:{
extensions:['*','.js','.jsx','.css']
},
devServer:{
contentBase: __dirname + "/dist"
}
}

package.json

{
"name": "todoApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"license": "MIT",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack-dev-server --inline --hot"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"style-loader": "^0.18.2",
"webpack": "^3.1.0",
"webpack-dev-server": "^2.5.1"
},
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-hot-loader": "^1.3.1",
"react-redux": "^5.0.5",
"redux": "^3.7.1"
}
}

So have can I resolve my problem, Do you have any idea ?
Thanks.

[danez]

It seems you are missing the babel configuration?

See here https://babeljs.io/docs/usage/babelrc/
And here https://github.com/babel/babel-loader#options

[robksawyer]

I'm getting a similar error (see below) with the following webpack config. I've also made sure that I have a .babelrc in the root.
You can find the project at https://github.com/robksawyer/keystone-react-template-mern

Error

yarn build v0.27.5
$ NODE_ENV='production' webpack -p
Hash: 21440689127886e92048
Version: webpack 2.7.0
Time: 182ms
    Asset       Size  Chunks             Chunk Names
bundle.js  821 bytes       0  [emitted]  app
   [0] ./src/client/client.js 285 bytes {0} [built] [failed] [1 error]
   [1] multi ./src/client/client.js 28 bytes {0} [built]

ERROR in ./src/client/client.js
Module parse failed: /Users/rsawyer/Sites/keystone-react-template-mern/src/client/client.js Unexpected token (13:2)
You may need an appropriate loader to handle this file type.
| 
| const client = (
|   <Provider store={store}>
|     <Router>
|       {routes}
 @ multi ./src/client/client.js

webpack.config.js

// Webpack 1.0 config
// To visit your app, navigate to http://localhost:8080.
'use strict';

const path = require('path');

module.exports = {
  entry: {
    app: ['./src/client/client.js']
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
    // sourceMapFilename: 'bundle.js.map',
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: '/\.js$/',
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: '/\.css$/',
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          {
           loader: 'postcss-loader',
           options: {
             plugins: function () {
               return [
                 require('autoprefixer')
               ];
             }
           }
         }
        ]
      }
    ]
  }
};

Here's the package.json file for reference.

[robksawyer]

Fixed it by removing the test in babel-loader. Now there's a new problem – it's always something.

[npisciotti1]

Just a question @robksawyer, you have [email protected] but your config file is formatted for 1.0?

Also this is probably not the proper place for troubleshooting.
Feel free to drop me an email: [email protected]

[laichuangchong]

@robksawyer

test: '/.js$/'

test: /.js$/,

[nbkhope]

@laichuangchong thank you so much. I had a similar problem and did not notice I was enclosing the regular expression under quotes. 🤣

[laichuangchong]

@nbkhope welcome

[loganfsmyth]

I'm triaging old issues on babel-loader. Since this has been inactive for ages, I'm going to close it. Feel free to re-open if there's still something to discuss, but I'm assuming at this point it's been too long to address in a useful way.