Errors when updated babel and webpack version in react project

Question

I am working on a project who was using babel version 5, webpack version 1, and ava version 0.14.0.

After I did some updates when i run npm run build-example i get:

Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Multiple configuration files found. Please remove one:

• package.json
• pathto\react-stars.babelrc

Here's my old package.json

After updates, now I'm using babel version 7.10, webpack version 4.43, and ava version 3.10.1. Here's the updated package.json

{
  "name": "react-rating-stars-component",
  "version": "2.2.0",
  "description": "Simple star rating component for your React projects.",
  "main": "dist/react-stars.js",
  "repository": "https://github.com/ertanhasani/react-stars",
  "babel": {
    "presets": [
      "react",
      "es2015"
    ]
  },
  "ava": {
    "babel": {
      "presets": [
        "es2015",
        "react"
      ]
    },
    "require": [
      "babel-register"
    ]
  },
  "scripts": {
    "build": "babel src --out-dir dist",
    "dev": "babel src --out-dir dist --watch",
    "build-example": "webpack -p --config webpack.production.config.js",
    "dev-example": "webpack-dev-server . --hot --inline"
  },
  "keywords": [
    "star",
    "rating",
    "react",
    "stars",
    "rating",
    "component",
    "raty",
    "rate",
    "reactjs",
    "ratings"
  ],
  "author": "Ertan Hasani",
  "license": "ISC",
  "devDependencies": {
    "ava": "^3.10.1",
    "@babel/cli": "^7.10.4",
    "babel-loader": "^8.1.0",
    "@babel/core": "^7.10.4",
    "@babel/plugin-transform-object-assign": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-addons-test-utils": "^15.6.2",
    "react-dom": "^16.13.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {}
}

Here's my old webpack.production.config.js

Here's the updated webpack.production.config.js:

'use strict';

var webpack = require('webpack')

module.exports = {

  entry: ['./example/index.js'],

  output: {
    filename: './example/bundle.js',
    pathinfo: true
  },

  module: {
    rules: [{
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/,
      query: {
        cacheDirectory: true,
        presets: ['@babel/react', '@babel/preset-env']
      }
    }]
  },

  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    })
  ],

  optimization: {
    minimize: false
  }
};

Here's my old webpack.config.js

my updated webpack.config.js:

'use strict';

module.exports = {

  entry: ['./example/index.js'],

  debug: true,

  devtool: 'inline-source-map',

  output: {
    filename: './example/bundle.js',
    pathinfo: true
  },

  module: {
    loaders: [{
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/,
      query: {
        cacheDirectory: true,
        presets: ['@babel/react', '@babel/preset-env']
      }
    }]
  }

};

I also updated `.babelrc. file:

Here's my old .babelrc file!

my updated .babelrc file:

{
  "presets": ["@babel/preset-env", "@babel/react"],
  "plugins": [
    "@babel/plugin-transform-object-assign"
  ]
}

Answer 1

It seems like you have multiple configurations as mentioned in the error message, I'd suggest removing the following configuration lines from your package.json file and operate your babel configurations exclusively from the .babelrc file in your project root

  "babel": {
    "presets": [
      "react",
      "es2015"
    ]
  }