Блог

Я рассмотрел все вопросы SO, касающиеся этой проблемы, и до сих пор мне не удалось решить эту проблему.

Я следую курсу Pluralsight по React, и пример приложения создается вручную с нуля; это означает, что каждая зависимость добавляется вручную без использования какого-либо интерфейса командной строки. Поскольку курс несколько устарел, мне пришлось потратить довольно много времени на обновление большинства пакетов babel, пока я не столкнулся с этой проблемой при запуске webpack.

Это список зависимостей от пакета.json

      "babel": {
       "presets": [
         "react",
         "env",
         "stage-2"
       ]
      },
      "dependencies": {
        "@babel/cli": "^7.14.3",
        "@babel/core": "^7.14.3",
        "@babel/preset-env": "^7.14.4",
        "@babel/preset-react": "^7.13.13",
        "@babel/preset-stage-2": "^7.8.3",
        "babel-loader": "^8.2.2",
        "ejs": "^3.1.6",
        "express": "^4.17.1",
        "nodemon": "^2.0.7",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "webpack": "^5.38.1"
      },
      "devDependencies": {
        "babel-eslint": "^10.1.0",
        "eslint": "^7.27.0",
        "eslint-plugin-react": "^7.24.0",
        "webpack-cli": "^4.7.0"
      }
 

И это то, что webpack.config.js

 const path = require('path');

module.exports = {
    entry: './lib/components/app.jsx',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            { 
                test: /.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', { targets: 'defaults' }],
                            '@babel/preset-react'
                        ]
                    }
                }
            }
        ],
    },
    devtool: 'source-map',
};
 

I am running the command «webpack -w».

Most answers in SO talk about correctly configuring the «presets» in the webpack.config.js file. So far I have tried several things with the exact same result:

 presets: [
    ['@babel/preset-env', { targets: 'defaults' }],
    '@babel/preset-react'
]


presets: [
    '@babel/preset-react'
]                       

presets: [
    '@babel/preset-env', 
    '@babel/preset-react'
]
 

The full error I am getting is as follows:

ERROR in ./lib/components/app.jsx Module build failed (from
./node_modules/babel-loader/lib/index.js): Error: Cannot find module
‘babel-preset-react’

• If you want to resolve «react», use «module:react»
• Вы имели в виду «@babel/реагировать»? на работе.Модуль._resolveFilename (внутренний/модули/cjs/загрузчик.js:636:15) при разрешении (C:UserssromeroDocumentsLearningReactadvanced-reactnode_modulesv8-compile-cachev8-compile-cache.js:164:23) при разрешении стандартного имени (C:UserssromeroDocumentsLearningReactadvanced-reactnode_modules@babelcorelibconfigfilesplugins.js:111:7) при разрешении (C:UserssromeroDocumentsLearningReactadvanced-reactnode_modules@babelcorelibconfigfilesplugins.js:59:10) при загрузке (C:UserssromeroDocumentsLearningReactadvanced-reactnode_modules@babelcorelibconfigfilesplugins.js:78:20) в loadPreset.next () в createDescriptor (C:UserssromeroDocumentsLearningReactadvanced-reactnode_modules@babelcorelibconfigconfig-descriptors.js:187:16) в createDescriptor.далее () на шаге (C:UserssromeroDocumentsLearningReactadvanced-reactnode_modulesgensyncindex.js:261:32) в evaluateAsync (C:UserssromeroDocumentsLearningReactadvanced-reactnode_modulesgensyncindex.js:291:5)

И для полноты картины, файл app.jsx, на который ссылается ошибка, — это:

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

const App = () => {
    return (
        <h2>I am working!</h2>
    );
};

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

Любая помощь будет признательна.

babel Ключ в вашем package.json файле предназначен для Вавилона 6.x и ссылается на плагины, которые вы не установили, поэтому вы получаете эту ошибку.

@babel/preset-env и @babel/preset-react , скорее всего, выполнит все, о чем вам нужно беспокоиться, поэтому, пока они установлены и указаны в конфигурации Webpack, вы можете идти.