Webpack kann JSX nicht einmal mit entsprechenden Loadern verarbeiten

Question

Zuerst weiß ich, dass es verschiedene Fragen wie diese in SO gibt. Ich folgte ihnen, aber ich bekomme immer noch einen Fehler. Ich lerne React.js mit Schluck, und jetzt wollte ich zum Webpack gehen, um den Hot Code im Browser neu laden zu lassen. Ich lerne webpack zu konfigurieren, basierend auf diesem Code:

https://github.com/learncodeacademy/react-js-tutorials/tree/master/1-basic-react

Wenn ich webpack --watch Befehl ausführen, bekomme ich diesen Fehler:

Hash: 826e21c818de1882d366 
Version: webpack 1.13.1 
Time: 42ms 
    [0] ./js/scripts.js 0 bytes [built] [failed] 

ERROR in ./js/scripts.js 
Module parse failed: C:\Users\Oscar\Documents\Proyectos\react_webpack/src\js\scripts.js Unexpected token (4:16) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (4:16) 
    at Parser.pp$4.raise (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:2221:15) 
    at Parser.pp.unexpected (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:603:10) 
    at Parser.pp$3.parseExprAtom (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1822:12) 
    at Parser.pp$3.parseExprSubscripts (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1715:21) 
    at Parser.pp$3.parseMaybeUnary (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1692:19) 
    at Parser.pp$3.parseExprOps (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1637:21) 
    at Parser.pp$3.parseMaybeConditional (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1620:21) 
    at Parser.pp$3.parseMaybeAssign (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1597:21) 
    at Parser.pp$3.parseExprList (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:2165:22) 
    at Parser.pp$3.parseSubscripts (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1741:35) 
    at Parser.pp$3.parseExprSubscripts (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1718:17) 
    at Parser.pp$3.parseMaybeUnary (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1692:19) 
    at Parser.pp$3.parseExprOps (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1637:21) 
    at Parser.pp$3.parseMaybeConditional (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1620:21) 
    at Parser.pp$3.parseMaybeAssign (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1597:21) 
    at Parser.pp$3.parseExpression (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1573:21) 
    at Parser.pp$1.parseStatement (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:727:47) 
    at Parser.pp$1.parseTopLevel (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:638:25) 
    at Parser.parse (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:516:17) 
    at Object.parse (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:3098:39) 
    at Parser.parse (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\webpack\lib\Parser.js:902:15) 
    at DependenciesBlock.<anonymous> (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\webpack\lib\NormalModule.js:104:16) 
    at DependenciesBlock.onModuleBuild (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10) 
    at nextLoader (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25) 
    at C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5 
    at Storage.finished (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16) 
    at C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\graceful-fs\graceful-fs.js:78:16 
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:404:3) 

Das ist die Struktur meines Projekts:

|-- node_modules 
| |-- //I have all the libraries listed in package.json below 
|-- src 
| |-- js 
| | |-- comments.jsx 
| | |-- scripts.js 
| |-- index.html 
|-- .babelrc 
|-- package.json 
|-- webpack.config.js 

webpack.config.js

var debug = process.env.NODE_ENV !== "production"; 
var webpack = require('webpack'); 
var SRC_FOLDER = __dirname + "/src"; 

module.exports = { 
    context: SRC_FOLDER, 
    devtool: debug ? "inline-sourcemap" : null, 
    entry: "./js/scripts.js", 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /js\/\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015', 'stage-0', 'react'], 
      plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], 
     } 
     } 
    ] 
}, 
    output: { 
    path: SRC_FOLDER + "/js", 
    filename: "scripts.min.js" 
    }, 
    plugins: debug ? [] : [ 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
    ], 
}; 

package.json

{ 
    "name": "react_webpack", 
    "version": "1.0.0", 
    "description": "Learn how to use webpack", 
    "main": "webpack.config.js", 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "webpack": "^1.13.1", 
    "babel-core": "^6.11.4", 
    "babel-loader": "^6.2.4", 
    "babel-plugin-add-module-exports": "^0.2.1", 
    "babel-plugin-react-html-attrs": "^2.0.0", 
    "babel-plugin-transform-class-properties": "^6.11.5", 
    "babel-plugin-transform-decorators-legacy": "^1.3.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "babel-preset-stage-0": "^6.5.0", 
    "react": "^15.2.1", 
    "react-dom": "^15.2.1", 
    "webpack-dev-server": "^1.14.1" 
    }, 
    "devDependencies": { 

    }, 
    "scripts": { 
    "dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot", 
    "test": "echo \"Error: no test specified\" && exit 1" 
} 
} 

.babelrc

{ 
    "presets": [ 
     "es2015", 
     "stage-0", 
     "react" 
    ] 
} 

Und der Einstiegspunkt, der den Fehler Trows, scripts.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {Comment, CommentsList} from 'comments'; 
ReactDOM.render(<CommentsList />, document.getElementById("app")); 

Ich glaube nicht notwendig ist, posten comments.jsx, da ich es bereits in meiner App getestet habe, als ich Schluck benutzte und ohne Probleme funktioniert.

Was ich habe versucht, es zu beheben, hat aber nicht funktioniert:

• die .babelrc Datei erstellen, auch wenn ich die Voreinstellungen in webpack.config.js
• mit Execute webpack gesetzt - config-Flag zu überprüfen, ob es die Konfigurationsdatei
• mit den gleichen Bibliotheken im gitHub Repo-Projekt finden kann (wenn ich diesen Quellcode herunterladen und ausführen webpack --watch es funktioniert)
• überprüfen sie, dass es jede Datei gründet (comments.jsx, scripts.js)
• Geänderte Erweiterung js oder jsx (und Aktualisierung webpack.config.js) zu überprüfen, ob es wegen der Dateierweiterung ist

das All Problem in scripts.js in dieser Linie verursacht wird:

ReactDOM.render(<CommentsList />, document.getElementById("app")); 

Genau, wenn < startet. Es kann nicht mit JSX umgehen, auch wenn ich notwendige Voreinstellungen hinzugefügt habe und alle Abhängigkeiten haben. Was könnte passieren?

Answer 1

In diesem Fall Sie js\/ von RegExp

test: /\.jsx?$/ 

weil /js\/\.jsx?$/ Streichhölzer Dateien wie diese

console.log(/js\/\.jsx?$/.test('js/.jsx')); 
 
console.log(/js\/\.jsx?$/.test('js/.js'));