Webpack соответствующий загрузчик для обработки этого типа файла

Я использую веб-пакет с реакцией. Я настроил конфигурацию как для производства, так и для разработки. Я получаю эту ошибку в моем файле src/index.js:

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

Index.js

import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "bootstrap/dist/css/bootstrap.min.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    // <React.StrictMode>
    <App />
    // </React.StrictMode>
);

reportWebVitals();

Пакет.json

    "name": "client",
    "version": "0.1.0",
    "private": true,
    "proxy": "http://127.0.0.1:9000",
    "dependencies": {
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "axios": "^1.1.2",
        "bootstrap": "^5.1.0",
        "bootstrap-css-only": "^4.4.1",
        "dotenv": "^16.0.3",
        "history": "^5.3.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-router-dom": "^6.4.2",
        "react-scripts": "5.0.1",
        "react-twitter-login": "^1.5.0",
        "reactstrap": "^9.1.4",
        "universal-cookie": "^4.0.4",
        "web-vitals": "^2.1.4",
        "webpack": "^5.75.0",
        "webpack-cli": "^4.10.0"
    },
    "scripts": {
        "start": "webpack serve",
        "build": "webpack",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "@babel/core": "^7.20.2",
        "@babel/preset-env": "^7.20.2",
        "@babel/preset-react": "^7.18.6",
        "babel-loader": "^9.1.0",
        "clean-webpack-plugin": "^4.0.0",
        "css-loader": "^6.7.2",
        "node-sass": "^7.0.3",
        "postcss-loader": "^7.0.1",
        "postcss-preset-env": "^7.8.3",
        "saas": "^1.0.0",
        "sass-loader": "^13.2.0",
        "style-loader": "^3.3.1",
        "webpack-dev-server": "^4.11.1"
    }
}

Webpack.common.js

const path = require("./path");

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const paths = require("./paths");

module.exports = {
    // Where webpack looks to start building the bundle
    entry: [paths.src + "/index.js"],

    // Where webpack outputs the assets and bundles
    output: {
        path: paths.build,
        filename: "[name].bundle.js",
        publicPath: "/",
    },

    // Customize the webpack build process
    plugins: [
        // Removes/cleans build folders and unused assets when rebuilding
        new CleanWebpackPlugin(),

        // Copies files from target to destination folder
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: paths.public,
                    to: "assets",
                    globOptions: {
                        ignore: ["*.DS_Store"],
                    },
                    noErrorOnMissing: true,
                },
            ],
        }),

        // Generates an HTML file from a template
        // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
        // new HtmlWebpackPlugin({
        //  title: "webpack Boilerplate",
        //  favicon: paths.src + "/images/favicon.png",
        //  template: paths.src + "/template.html", // template file
        //  filename: "index.html", // output file
        // }),
    ],

    // Determine how modules within the project are treated
    module: {
        rules: [
            // JavaScript: Use Babel to transpile JavaScript files
            { test: /\.(js|jsx)$/, use: ["babel-loader"] },

            // Images: Copy image files to build folder
            { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: "asset/resource" },

            // Fonts and SVGs: Inline files
            { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: "asset/inline" },
        ],
    },

    resolve: {
        modules: [paths.src, "node_modules"],
        extensions: [".js", ".jsx", ".json"],
        alias: {
            "@": paths.src,
            assets: paths.public,
        },
    },
};

Webpack.dev.js

const { merge } = require("webpack-merge");

const common = require("./webpack.common");

module.exports = merge(common, {
    // Set the mode to development or production
    mode: "development",

    // Control how source maps are generated
    devtool: "inline-source-map",

    // Spin up a server for quick development
    devServer: {
        historyApiFallback: true,
        open: true,
        compress: true,
        hot: true,
        port: 3000,
    },

    module: {
        rules: [
            // Styles: Inject CSS into the head with source maps
            {
                test: /\.(sass|scss|css)$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: { sourceMap: true, importLoaders: 1, modules: false },
                    },
                    { loader: "postcss-loader", options: { sourceMap: true } },
                    { loader: "sass-loader", options: { sourceMap: true } },
                ],
            },
        ],
    },
});

.babelrc

{
    "presets": ["@babel/preset-env","@babel/preset-react", "react"],
    "plugins": ["@babel/plugin-proposal-class-properties"]
  }

./public/index.html

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "utf-8" />
    <link rel = "icon" href = "%PUBLIC_URL%/favicon.ico" />
    <meta name = "viewport" content = "width=device-width, initial-scale=1" />
    <meta name = "theme-color" content = "#000000" />
    <meta
      name = "description"
      content = "Web site created using create-react-app"
    />
    <link rel = "apple-touch-icon" href = "%PUBLIC_URL%/logo192.png" />

    <link rel = "manifest" href = "%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id = "root"></div>
  </body>
</html>

<App/> — это компонент класса реакции. webpack.common.js, webpack.dev.js, webpack.prod.js находятся в одной папке "config"

Не могли бы вы опубликовать полное сообщение об ошибке с неожиданным токеном, о котором он сообщает? Неожиданный токен означает, что синтаксический анализатор имеет дело с каким-то синтаксисом, который не был правильно настроен.

OFRBG 19.11.2022 03:23
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
0
1
580
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вам не хватает правила для js/jsx

  { test: /\.(js|jsx)/, loader: "babel-loader", exclude: /node_modules/ },

Ты должен npm install babel-loader

OP добавил его в webpack.common.js.

OFRBG 19.11.2022 03:35

Как вы компилируете вебпак?

Yilmaz 19.11.2022 03:43
Ответ принят как подходящий

Ваш скрипт npm не нацелен на ваш файл конфигурации.

    "scripts": {
        "start": "webpack serve --config webpack.dev.js",
        "build": "webpack --config webpack.prod.js",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },

Другие вопросы по теме