Webpack 3 schlägt auf JSX-Syntax fehl

Question

Ich habe vor kurzem von Webpack v1 auf v3 aktualisiert und jetzt erkennt der Build JSX-Syntax nicht von der App. Ich folgte der Dokumentation für V1 zu V2 von here und dann v3 installiert.

webpack.config.js

const webpack = require('webpack'); 
const precss = require('precss'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const path = require('path'); 

const jsPresets = [ 
    ['env', { 
    targets: { 
     chrome: 52, 
     browsers: [ 
     'last 4 versions', 
     'safari >= 7', 
     ], 

    }, 
    } ], 
    'babel-preset-stage-2', 
]; 

const baseConfig = { 
    entry: [ 
    'babel-polyfill', 
    'antd/dist/antd.css', 
    './wp-content/plugins/custom/js/router', 
    './wp-content/plugins/custom/js/legacy/header', 
    './node_modules/m-react-splitters/lib/splitters.css', 
    'react-s-alert/dist/s-alert-default.css', 
    'react-s-alert/dist/s-alert-css-effects/flip.css', 
    'react-s-alert/dist/s-alert-css-effects/bouncyflip.css', 
    'react-quill/dist/quill.snow.css', 
    ], 
    output: { 
    path: path.resolve(__dirname, './wp-content/plugins/custom/js'), 
    filename: 'custom.js', 
    }, 
    module: { 
    rules: [{ 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
     fallback: 'style-loader', 
     use: [ 
      'css-loader?-url', 
      'postcss-loader', 
     ] 
     }), 
    }, { 
     // whatwg-fetch use Promsie which IE11 doesn't support 
     test: /\.js$/, 
     include: [/whatwg-.*/], 
     use: { 
      loader: 'babel-loader' 
     }, 
     }, { 
     test: /\.(js|jsx)$/, 
     exclude: /(node_modules|bower_components)/, 
     use: { 
     loader: 'babel-loader', 
     options: { 
      presets: jsPresets, 
      plugins: [ 
      ['import', { libraryName: 'antd' }], 
      'transform-class-properties', 
      'transform-es2015-arrow-functions', 
      ], 
     }, 
     }, 
    }], 
    }, 

    plugins: [ 
    new ExtractTextPlugin({ 
     filename: '../css/custom.css', 
     allChunks: true, 
    }), 
    new webpack.ProvidePlugin({ 
     React: 'react', 
     Intl: 'imports-loader?this=>global!exports-loader?global.Intl!intl', 
    }), 
    ], 
}; 

module.exports = baseConfig; 

Fehlermeldung am Terminal nach webpack geworfen versucht zu bündeln:

Ich bin nicht sicher, was hier falsch ist, ist jede Hilfe dankbar.

Answer 1

Soweit ich in Ihren Presets sehen kann, verwenden Sie kein Reaktions-Preset. Sie müssen wie so babel-Preset-reagieren installieren:

npm install --save-dev babel-cli babel-preset-react 

Und dann einfach in Ihren Presets hinzufügen "reagieren" und es sollte transpile.