Webpack-Fehler: "Möglicherweise benötigen Sie einen geeigneten Loader, um diesen Dateityp zu verarbeiten"

Question

Ich habe ein persönliches Projekt mit react eingerichtet, aber einen Fehler erhalten, auf den ich keine Antwort finden konnte. Webpack hält geben die folgende Fehlermeldung:

ERROR in ./app/components/Home.js 
Module parse failed: 
/Users/LandonKoo/projects/lktheprogrammer/app/components/Home.js Unexpected token (5:10) 
You may need an appropriate loader to handle this file type. 
| class Home extends Component{ 
| render() { 
|  return (<h1>Hey!!!! Home!!</h1>); 
| } 
| } 
@ ./app/src/index.js 11:12-44 

package.json:

{ 
    "name": "lktheprogrammer", 
    "version": "1.0.0", 
    "description": "Blog for LK the Programmer", 
    "main": "index.js", 
    "scripts": { 
    "watch": "webpack -d --watch", 
    "production": "webpack -p" 
}, 
"author": "Landon Koo <landonkoo0207@gmail.com>", 
"license": "ISC", 
"devDependencies": { 
    "babel-core": "^6.24.0", 
    "babel-loader": "^6.4.1", 
    "babel-preset-es2015": "^6.24.0", 
    "babel-preset-react": "^6.23.0", 
    "html-webpack-plugin": "^2.28.0", 
    "webpack": "^2.3.1", 
"webpack-dev-server": "^2.4.2" 
}, 
"dependencies": { 
    "babel-core": "^6.24.0", 
    "babel-loader": "^6.4.1", 
    "react": "^15.4.2", 
    "react-bootstrap": "^0.30.8", 
    "react-dom": "^15.4.2", 
    "react-router": "^2.8.1" 
} 
} 

webpack.config.js:

var webpack = require('webpack'); 
var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, 'app/dist'); 
var APP_DIR = path.resolve(__dirname, 'app/src'); 

var config = { 
    entry: APP_DIR + '/index.js', 
    output: { 
    path: BUILD_DIR, 
    filename: 'index_bundle.js' 
    }, 
    module : { 
    loaders : [ 
     { 
     test : /\.(js|jsx)$/, 
     include : APP_DIR, 
     exclude : /node_modules/, 
     loader : 'babel-loader' 
     } 
    ] 
    } 
}; 

module.exports = config; 

Ich habe stundenlang auf diese aufgeklebt. Jeder Kommentar wird sehr dankbar sein! Danke!

Answer 1

Sie benötigen .babelrc Dateioptionen

//./.babelrc 
{ 
    "presets":[ 
     "es2015", "react" 
    ] 
} 

oder geben Sie Voreinstellungen wie loader

{ 
    test : /\.(js|jsx)$/, 
    include : APP_DIR, 
    exclude : /node_modules/, 
    loader : 'babel-loader', 
    query: { presets: ['es2015', 'react']} 
} 

Answer 2

Verwendung "reagieren-hot-Lader auch https://github.com/babel/babel-loader/issues/173

Answer 3

für mich siehe Bitte erstellen Es war, dass meine Jsx-Dateien JSX-Erweiterung in Großbuchstaben

hatten 0

Test: /.(js|jsx)$/, nicht Versalien JSX nicht finden, so dass benötigte Test werden: /.(js|jsx|JSX|JS)$/,

oder umbenennen Groß JSX Dateinamenerweiterung zu Kleinbuchstaben jsx würde auch funktionieren