webpack standard-loader, Problèmes avec jsx?

Question

Obtention de cette erreur lors de la compilation avec webpack. Utiliser un chargeur standard comme préchargeur. Le readme spécifie cette configuration pour le webpack 2: https://www.npmjs.com/package/standard-loader. Il y a jsx inclus dans le test, donc je suis confus pourquoi il y a un problème d'analyse de jsx.

Notez que tout compilé bien, jusqu'à ce que j'ai ajouté le chargeur standard pour eslinting.

ERROR in ./src/index.jsx 
 
Module parse failed: /Users/kwokbk/Desktop/Apps/redux/react-redux-boiler/node_modules/standard-react-loader/index.js??ref--0!/Users/kwokbk/Desktop/Apps/redux/react-redux-boiler/src/index.jsx Unexpected token (11:2) 
 
You may need an appropriate loader to handle this file type. 
 
| 
 
| render(
 
| <Provider store={store}> 
 
|  <App /> 
 
| </Provider>, 
 
@ multi webpack-hot-middleware/client ./src/ 
 
webpack: Failed to compile.

index.jsx

import React from 'react' 
 
import { render } from 'react-dom' 
 
import { Provider } from 'react-redux' 
 
import { createStore } from 'redux' 
 
import App from './components/App' 
 
import reducer from './reducers' 
 

 
const store = createStore(reducer) 
 

 
render(
 
    <Provider store={store}> 
 
    <App /> 
 
    </Provider>, 
 
    document.getElementById('react-root') 
 
)

webpack.config

const CONFIG = require('./webpack.base.js'); 
const webpack = require('webpack'); 

const { CLIENT_ENTRY, CLIENT_OUTPUT } = CONFIG; 

module.exports = { 
    entry: { 
     main: [ 
      'webpack-hot-middleware/client', 
      CLIENT_ENTRY 
     ], 
     vendor: [ 
      'react', 
      'react-dom', 
      'redux', 
      'react-redux' 
     ] 
    }, 
    output: { 
     path: CLIENT_OUTPUT, 
     publicPath: CLIENT_OUTPUT, 
     chunkFilename: '[name].chunk.js', 
     filename: '[name].js' 
    }, 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    module: { 
     rules: [ 
      { 
       enforce: 'pre', 
       test: /\.jsx?$/, 
       loader: 'standard-loader', 
       exclude: /(node_modules)/, 
       options: { 
        parser: 'babel-eslint' 
       } 
      } 
     ], 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|server)/, 
       loader: 'babel-loader' 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.optimize.CommonsChunkPlugin({name: 'vendor', filename: 'vendor.js', minChunks: 2}) 
    ] 
} 

package.json

{ 
    "name": "react-redux-boiler", 
    "version": "1.0.0", 
    "description": "React Redux Boiler with webpack dev middleware, hot reloading, mocha-enzyme testing ", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "start": "cross-env NODE_ENV=development nodemon -r 'babel-register' src/server" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "git+https://github.com/bkkwok/react-redux-boiler.git" 
    }, 
    "author": "Benjamin Kwok", 
    "license": "ISC", 
    "bugs": { 
    "url": "https://github.com/bkkwok/react-redux-boiler/issues" 
    }, 
    "homepage": "https://github.com/bkkwok/react-redux-boiler#readme", 
    "dependencies": { 
    "cross-env": "^4.0.0", 
    "express": "^4.15.2", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-redux": "^5.0.3", 
    "redux": "^3.6.0" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.24.0", 
    "babel-eslint": "^7.2.1", 
    "babel-loader": "^6.4.1", 
    "babel-preset-airbnb": "^2.2.3", 
    "babel-preset-es2015": "^6.24.0", 
    "babel-preset-react": "^6.23.0", 
    "babel-register": "^6.23.0", 
    "chai": "^3.5.0", 
    "enzyme": "^2.8.0", 
    "eslint-config-standard": "^7.1.0", 
    "eslint-loader": "^1.7.1", 
    "eslint-plugin-react": "^6.10.3", 
    "mocha": "^3.2.0", 
    "nodemon": "^1.11.0", 
    "sinon": "^2.1.0", 
    "standard": "^9.0.2", 
    "standard-loader": "^6.0.1", 
    "standard-react-loader": "^1.0.0", 
    "webpack": "^2.3.2", 
    "webpack-dev-middleware": "^1.10.1", 
    "webpack-hot-middleware": "^2.17.1" 
    }, 
    "standard": { 
    "parser": ["babel-eslint", "eslint-plugin-react"] 
    } 
} 

.babelrc

{ 
    presets: ['es2015', 'react'] 
} 

Answer 1

Dans webpack 2, les chargeurs doivent résider sous rules, donc à changer:

module: { 
     rules: [ 
      { 
       enforce: 'pre', 
       test: /\.jsx?$/, 
       loader: 'standard-loader', 
       exclude: /(node_modules)/, 
       options: { 
        parser: 'babel-eslint' 
       } 
      }, 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|server)/, 
       loader: 'babel-loader' 
      } 
     ] 
    },