Babel-loader: Module parse failed:You may need an appropriate loader to handle this file type.

[pingfengafei]

.babelc
{ "presets": ["es2015", "react"] }

package.json

{
  "name": "react_webpack_render",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack&&node server/index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.14.0",
    "jsx-loader": "^0.13.2",
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.5.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^2.6.1"
  }
}

webpack.config.js

var path = require('path')

var assetsPath = path.join(__dirname, 'public', 'assets')
var serverPath = path.join(__dirname, 'server')

//loader的执行顺序，从下往上，从右
module.exports = [
  {
    name: 'browser',
    entry: './app/entry.js',
    output: {
      path: assetsPath,
      filename: 'entry.generator.js'
    },
    module: {
      rules: [
        {
          test: /\.js(x)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
            }
          ]
        }
      ]
    }
  },
  {
    name: 'server-side rending',
    entry: './server/page.js',
    output: {
      path: serverPath,
      filename: 'page.generator.js',
      library: 'page',
      libraryTarget: 'commonjs'
    },
    module: {
      rules: [
        {
          test: /\.js(x)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader'
            }
          ]
        }
      ]
    }
  }
]

npm start error:

  ERROR in ./server/page.js
    Module parse failed: D:\Users\luo_f\Desktop\react-webpack-server-render-example-master\server\page.js Unexpected token (11:2)
    You may need an appropriate loader to handle this file type.
    |   
    |   var content = ReactDOMServer.renderToString(
    |           <App initialCount={props.initialCount}></App>
    |   );
    | 

I checked seveal related issues but can not solve my problem.
my app dir is not in mode_modules

Is somthing wrong with babel-loader version 7 or I made some mistake?

[pingfengafei]

ops, I made a silly mistake, using /\.(js|jsx)$/ instead of /\.js(x)$/

[zysidea]

/\.js[x]?$/ is also works.

[shashankKeshava]

I'm facing a similar error. Still not able to fix it

Error:

ERROR in ./src/index.js
Module parse failed: Unexpected token (6:12)
You may need an appropriate loader to handle this file type.
|     render() {
|         return (
|             <div>
|                 <h1>Welcome to React Boilerplate</h1>
|             </div>

Webpack Config:

'use strict';

const webpack = require('webpack');
const htmlWebpack = require('html-webpack-plugin');

const commonPaths = require('./common-paths');
console.log(commonPaths.srcPath);
module.exports = {
    // Entry: First file webpack starts(your dependency graph)
    entry: {
        app: commonPaths.inputPath,
    },
    // Output: How and where to put bundles and format them
    output: {
        filename: 'bundle.js',
        path: commonPaths.outputPath,
    },
    // Loaders:  How to treat files before adding to dependency graphs
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                include: [commonPaths.inputPath],
                loader: ['babel-loader'],
                query: {
                    presets: ['es2015', 'react'],
                    plugins: ['transform-runtime'],
                },
                options: {
                    cacheDirectory: true,
                },
            },
        ],
        rules: [
            {
                test: /\.png$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1000,
                        },
                    },
                ],
            },
        ],
    },
    // Plugins: Extremely Customisable
    plugins: [new webpack.ProgressPlugin(), new htmlWebpack()],
};

The entire project is available at React-Redux-BoilerPlate