Webpack 无法解析 JSX

Question

我不熟悉使用 webpack 并做出反应。我找到了此类问题的解决方案，但它们似乎不适用于我，因为它通常缺少依赖项或 webpack 配置文件的格式不正确。

我的 package.json

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^4.2.0",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1"
  },
  "dependencies": {
    "jquery": "^3.3.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }

我的 webpack.config.js

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

var DIST_DIR = path.resolve(__dirname,"dist");
var SRC_DIR = path.resolve(__dirname,"src");

module.exports = {
  entry: "./src/app/index.js",
  output: {
    filename: 'bundle.js',
    path: DIST_DIR + "/app",
    publicPath:"/app/"
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module:{
    rules:[
        {
            test:/.(js|jsx)$/,
            exclude: /node_modules/,
            include: SRC_DIR +"/app",
            loader: "babel-loader",
            query:{
                presets:["es2015","react","stage-2","react-dom"]
            }
        }
    ]
  }
};

我的 index.js

import React from "react";
import ReactDOM from "react-dom";

class Layout extends React.Component {
    render(){
        return(
            <h1>Work please</h1>
        );
    }
} 

render(<Layout/>, document.getElementById('app'))

错误信息

  ERROR in ./src/app/index.js
Module parse failed: Unexpected token (13:6)
You may need an appropriate loader to handle this file type.
| class Layout extends React.Component {
|
| const app =   render(){
|               return(
|                       <h1>Work please</h1>

Answer 1

您的配置要求包含 jsx 的文件以 .jsx 扩展名结尾。

将您的测试更改为 /.(js|jsx)$/

Answer 2

您的组件看起来是 React 类组件 (React.Component) 和无状态功能组件 (SFC) 的混合体

尝试改变这个...

class Layout extends React.Component {
    const app = render(){
        return(
            <h1>Work please</h1>
        );
    }
} 
document.getElementById('app');
render(<Layout>,app)

到无状态功能组件 (SFC)：

...
import { render } from 'react-dom';
...
const App = () => (
  <h1>Work please</h1>
);

render(<App />, document.getElementById('app'));

或React Class Component:

...
import { render } from 'react-dom';
...
class Layout extends React.Component {
    render(){
        return(
            <h1>Work please</h1>
        );
    }
} 
;
render(<Layout />, document.getElementById('app'))

更多关于Functional and Class Components