モジュールがJSXで解析できない、webpackでエラーを見つけることができない、babel configs

Question

私はこの設定の詳細を何回も繰り返してきたので、時間が経つにつれて一度ウォーキングしていましたが、今エラーが発生しています...

ERROR in ./src/index.js 
Module parse failed: /Users/Jeff/javascript/testbuildwords/src/index.js Unexpected token (5:11) 
You may need an appropriate loader to handle this file type. 
| class MyComponent extends React.Component { 
| render() { 
|  return <div>This is my component</div>; 
| } 
| } 

私はエラーがこれらのファイルのどこかでなければならないと感じ、私は彼らの上に見て、他の人と比べて1000倍にして、私はエラーに

webpack.config.js

const path = require("path"); 

module.exports = { 
    entry: "./src/index.js", 
    output: { 
    path: path.resolve(__dirname, "build"), 
    filename: "index.js", 
    libraryTarget: "commonjs2" 
    }, 
    module: { 
    rules: [ 
     { 
     test: /.js$/, 
     include: path.resolve(__dirname, "src"), 
     exclude: /(node_modules|bower_components|build)/, 
     use: "babel-loader" 
     }, 
     { 
     test: /.css$/, 
     use: ["style-loader", "css-loader"] 
     }, 
     { 
     test: /.(png|jpg|gif|eot|svg|ttf|woff|woff2)$/, 
     use: [ 
      { 
      loader: "file-loader", 
      options: {} 
      } 
     ] 
     } 
    ] 
    }, 
    externals: { 
    react: "commonjs react" 
    } 
}; 

を見つけることができませんしました

{ 
    "name": "testbuildwords", 
    "version": "0.1.0", 
    "main": "build/index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "start": "webpack --watch", 
    "build": "webpack" 
    }, 
    "author": "", 
    "license": "ISC", 
    "description": "", 
    "dependencies": { 
    "css-loader": "^0.28.7", 
    "file-loader": "^1.1.5", 
    "prop-types": "^15.6.0", 
    "react": "^16.0.0", 
    "react-dom": "^16.0.0", 
    "style-loader": "^0.19.0", 
    "webpack": "^3.6.0" 
    }, 
    "devDependencies": { 
    "babel-cli": "^6.26.0", 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-plugin-transform-class-properties": "^6.24.1", 
    "babel-plugin-transform-object-rest-spread": "^6.26.0", 
    "babel-plugin-transform-react-jsx": "^6.24.1", 
    "babel-preset-env": "^1.6.0", 
    "eslint-plugin-class-property": "^1.0.6" 
    } 
} 

./src/index.js

import React from "react"; 

class MyComponent extends React.Component { 
    render() { 
    return <div>This is my component</div>; 
    } 
} 
export default MyComponent; 

Answer 1

がbabel react-presetを追加してみてください0 .babelrc

{ 
    "presets": ["env"], 
    "plugins": [ 
    "transform-object-rest-spread", 
    "transform-react-jsx", 
    "transform-class-properties" 
    ] 
} 

package.json。

{ 
    "presets": ["env", "react"] 
} 

Answer 2

私はWebpackが.jsxファイルを暗黙的に解決できないと思います。あなたがファイルを？：webpack.config.jsするために解決しなければならない拡張子を追加する場合

resolve: { 
    extensions: ['', '.js', '.jsx'] 
} 

Answer 3

JSX拡張

test: /.jsx$/, 
include: path.resolve(__dirname, "src"), 
exclude: /(node_modules|bower_components|build)/, 
use: { 
    loader: 'babel-loader', 
    options: { 
     presets: ['es2015', 'react', 'babel-preset-stage-0'] 
    } 
} 

、解決ブロック内を解決するためのプリセットと1以上のルールを追加します。何 JSXを追加エントリのような

resolve: { 
    extensions: ['', '.jsx', '.js'] 
} 

Answer 4

回答はありませんでした。その