Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов - React и Webpack - PullRequest
Новая
       10

Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов - React и Webpack

0 голосов
/ 04 декабря 2018

Несмотря на то, что я уже добавил загрузчик babel, независимо от того, что он не читает синтаксис JSX.Пожалуйста, любая помощь будет высоко ценится!Я уже выполнил npm install как для present-env, так и для preset-response.

Webpack.config.js

Я использовал конфигурацию webpack, заданную в документации Spring, с реакцией как показанониже.

var path = require('path');
module.exports = {
    entry: './src/main/js/app.js',
    devtool: 'sourcemaps',
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
      },
    module: {
        rules: [
            {
                test: path.join(__dirname, '.'),
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"],
                        plugins: ["@babel/plugin-proposal-class-properties"]
                    }
                }]
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
              }
        ]
    }
};

Home.jsx 

import React, { Component } from "react";
import NavBar from "./navbar";
import Product from "./product";
import css from "./product.css";

const divStyle = {
  display: "flex",
  flexWrap: "wrap",
  flexDirection: "row",
  justifyContent: "flex-start",
  overFlow: "auto",
  whiteSpace: "nowrap"
};

const horizontalScroll = {
  display: "inline-block"
};
class Home extends Component {
  render() {
    return (
      <div style={divStyle}>
        {this.props.products.map(product => (
          <Product
            key={product.id}
            onDelete={this.props.onDelete}
            product={product}
            onIncrement={this.props.onIncrement}
          />
        ))}
      </div>
    );
  }
}

export default Home;

Ошибка: 

[INFO] ERROR in ./src/main/js/app.js
[INFO] Module not found: Error: Can't resolve 'src/main/resources/templates/index.html' in 'E:\alpha\src\main\js'
[INFO]  @ ./src/main/js/app.js 42:12-62
[INFO] 
[INFO] ERROR in /alpha/src/main/js/home.jsx 21:6
[INFO] Module parse failed: Unexpected token (21:6)
[INFO] You may need an appropriate loader to handle this file type.
[INFO] |   render() {
[INFO] |     return (
[INFO] >       <div style={divStyle}>
[INFO] |         {this.props.products.map(product => (
[INFO] |           <Product
[INFO]  @ ./src/main/js/app.js 40:11-49
[INFO] 
[INFO] ERROR in /alpha/src/main/js/navbar.jsx 5:8
[INFO] Module parse failed: Unexpected token (5:8)
[INFO] You may need an appropriate loader to handle this file type.
[INFO] | 
[INFO] | class NavBar extends Component {
[INFO] >   state = {
[INFO] |     cartItems: 0,
[INFO] |     notifications: 0,
[INFO]  @ ./src/main/js/app.js 38:13-53

Ошибка говорит о том, что она не может специально читать JSX.У меня уже есть бабел-загрузчик.Я не уверен, что еще я должен делать.Заранее спасибо.

...