Как решить «Ошибка» Не удается найти модуль «babel-preset-реагировать», при работе с babel в реакции - PullRequest
Новая
       4

Как решить «Ошибка» Не удается найти модуль «babel-preset-реагировать», при работе с babel в реакции

0 голосов
/ 25 января 2020

Я изучаю React и flask и пытаюсь настроить его в основном с помощью этого видео и описанных там шагов. https://www.youtube.com/watch?v=TKIHpoF8ZIk

Хотя при попытке заставить бабелку работать и бегать "npm run build" я получаю ответ "Error Cannot find module 'babel-preset-react'". Я попробовал это решение Не могу найти модуль 'babel-preset-реакции' , но все равно не смог заставить его работать. Кто-нибудь знает, как решить эту проблему? Спасибо

Мой код:

пакет. json файл 

  {
  "name": "react_test",
  "version": "1.0.0",
  "description": "react test",
  "main": "index.jsx",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --progress -d --config webpack.config.js -watch",
    "build": "webpack"
  },
  "keywords": [
    "python",
    "react"
  ],
  "babel": {
    "presets": [
      "react",
      "es2015"
    ]
  },
  "author": "J",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {}
}

Мой webpack.config. js файл 

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

const config = {

    entry: __dirname + '/js/index.jsx',
    output: {
       path: path.resolve(__dirname, 'dist'),
       publicPath: '/dist/',
  //      path: __dirname + '/dist',
        filename: 'bundle.js'
    },
    resolve:{
        extensions: ['.js', '.jsx','.css']
    },


    module: {

      rules: [
        {
          test: /\.jsx?/,
          exclude: /node_modules/,
          use:'babel-loader'
        }
      ]
    }

};

module.exports = config;

index. html file 

<!doctype html>
<html>

<body>

  <div id = "content" />
  <script src="dist/bundle.js" type = "text/javascript">
  </script>

</body>

</html>

index.jsx file 

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("content"));

app.jsx file 

import React from "react";

export default class App extends React.Component{

  render(){
    return <p> Hello React </p>;

  }
}
...