Сбой разбора модуля при использовании Webpack

Question

Привет, я студент-разработчик. Я сталкиваюсь с такой ошибкой

ОШИБКА в ./src/index.js 5:16 Ошибка синтаксического анализа модуля: неожиданный токен (5:16) Вам может понадобиться соответствующий загрузчик для обработки этого файла типа, в настоящее время загрузчики не настроены для обработки этого файла. См. https://webpack.js.org/concepts#loaders | импортировать приложение из '../src/components/App' |

ReactDOM.render (, document.getElementById ("app")); i ｢wdm｣: Не удалось скомпилировать.

Я начинаю изучать, что это такое, но у меня недостаточно информации для решения этой проблемы. Не могли бы вы помочь мне решить эту проблему?

пакет. json Часть разработчика:

 "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }

Моя веб-конфигурация:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.export = {
    entry : './src/index.js',
    output : {
        path:path.join(__dirname,'/dist')   ,
        filename:'index_bundle.js' 
    },
    module:{
        rules : [{
            test : /\.js$/,
            exclude: /node_modules/,
            use : {
                loader : 'babel-loader'
            }
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}

index. js

import React from 'react';
import ReactDOM from 'react-dom'
import App from '../src/components/App'

// Error is he
ReactDOM.render(<App />,document.getElementById("app"));

Приложение. js:

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello</h1>
            </div>
        );
    }
}

export default App;

Answer 1

В вашей конфигурации веб-пакета есть две ошибки, которые вызывают эту проблему.

1. Произошла ошибка опечатки. Измените module.export на module.exports (Этот сводит меня с ума: P)

2. Как упомянул @Muhammad, вам нужно упомянуть webpack для компиляции react. Итак, я добавил '@babel/react' в качестве пресетов для babel-loader.

Ниже приведен веб-пакет, который работает для меня:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry : './src/index.js',
    output : {
        path:path.join(__dirname,'/dist')   ,
        filename:'index_bundle.js' 
    },
    module:{
        rules : [{
            test : /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
        options: {
          presets: [
            '@babel/react',
            
          ]
        }
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}

Надеюсь, это поможет:)

Answer 2

Вы должны сообщить webpack, что вы компилируете реакцию. Вам необходимо обновить правило как:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry : './src/index.js',
    output : {
        path:path.join(__dirname,'/dist')   ,
        filename:'index_bundle.js' 
    },
    module:{
        rules : [{
          test: /\.js?$/,
          exclude: /node_modules/,
          loader: "babel-loader",
          query: {
            presets: ["react"]
          }
       }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}