How to resolve " Error "Cannot find module 'babel-preset-react' ", when working with babel in react

Question

I am learning React and flask and have been trying to set it up primarly using this video and the steps there. https://www.youtube.com/watch?v=TKIHpoF8ZIk

Though when trying to get babel to work and running "npm run build" I get the response "Error Cannot find module 'babel-preset-react'". I tried this solution Cannot find module 'babel-preset-react' but could still not get it to work. Does anyone know how to solve this issue? Thanks

My code:

package.json file

  {
  "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": {}
}

My webpack.config.js file

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>;

  }
}

How to resolve " Error "Cannot find module 'babel-preset-react' ", when working with babel in react

0 Answers0