I'm trying to learn how to write a React App and set up from practically scratch.

I keep trying to run webpack --config webpack.dev.config.js. I keep getting this error. And I've tried using different loaders and presets.

What is wrong with my setup? Is it my npm node modules are outdated?

I've tried updating all my presets, loaders and even babel itself.

Error:

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/kyle.calica-steinhil/Code/react-ponents/react-imgur-album/node_modules/babel-preset-es2015/lib/index.js
    at createDescriptor (/Users/kyle.calica-steinhil/Code/react-ponents/react-imgur-album/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
    at items.map (/Users/kyle.calica-steinhil/Code/react-ponents/react-imgur-album/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)

webpack.dev.config.js:

var path = require('path');

module.exports = {
  mode: 'development',
  // context: path.resolve(__dirname, 'src'),
  entry: path.resolve(__dirname,'src/index.js'),
  output: {
    filename: 'main.js',
    libraryTarget: "monjs2"
  },
  module: {
     rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
         use: [
           {
             loader: 'babel-loader',
             options: {
               presets: ['es2015','react'],
               plugins: ['transform-class-properties']
            }
           }
         ]
       }
     ]
   },
   resolve: {
     extensions: ['.js']
   }
 };

package.json :

{
  "name": "react-imgur-album",
  "version": "0.0.1",
  "description": "React Component for displaying images in an Imgur Album",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.dev.config.js --progress --display-error-details"
  },
  "keywords": [
    "imgur",
    "react",
    "react-ponents",
    "ponent",
    "images",
    "photos",
    "pics"
  ],
  "author": "Kyle Calica",
  "license": "ISC",
  "dependencies": {
    "@babel/preset-react": "^7.0.0",
    "react-dom": "^16.5.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "eslint": "^5.7.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "fixed": "^0.3.0",
    "it": "^1.1.1",
    "path": "^0.12.7",
    "react": "^16.5.2",
    "webpack": "^4.22.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  }
}

index.js:

import React, { Component } from 'react';

var imgurAPI = '/';

export default class ImgurAlbum extends Component {
  constructor(props){
    super(props);
    this.state = {
      imgurPosts: [],
      isLoading: true
    };
  }


  ponentDidMount(){
    fetch(imgurAPI + this.props.album + '/images',{
      'headers':{
        'Authorizathion': 'client-id'
      }
    }).then(res => res.json())
    .then(data => console.log(data));
  }

  render(){
        return(
          <div>
            <h1>hi!</h1>
          </div>
        );
      }
}

I notice I have two babel cores installed, I don't know how to remove one, or which one to keep. Or even how to select which one with webpack?

I'm trying to learn how to write a React App and set up from practically scratch.

I keep trying to run webpack --config webpack.dev.config.js. I keep getting this error. And I've tried using different loaders and presets.

What is wrong with my setup? Is it my npm node modules are outdated?

I've tried updating all my presets, loaders and even babel itself.

Error:

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/kyle.calica-steinhil/Code/react-ponents/react-imgur-album/node_modules/babel-preset-es2015/lib/index.js
    at createDescriptor (/Users/kyle.calica-steinhil/Code/react-ponents/react-imgur-album/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
    at items.map (/Users/kyle.calica-steinhil/Code/react-ponents/react-imgur-album/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)

webpack.dev.config.js:

var path = require('path');

module.exports = {
  mode: 'development',
  // context: path.resolve(__dirname, 'src'),
  entry: path.resolve(__dirname,'src/index.js'),
  output: {
    filename: 'main.js',
    libraryTarget: "monjs2"
  },
  module: {
     rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
         use: [
           {
             loader: 'babel-loader',
             options: {
               presets: ['es2015','react'],
               plugins: ['transform-class-properties']
            }
           }
         ]
       }
     ]
   },
   resolve: {
     extensions: ['.js']
   }
 };

package.json :

{
  "name": "react-imgur-album",
  "version": "0.0.1",
  "description": "React Component for displaying images in an Imgur Album",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.dev.config.js --progress --display-error-details"
  },
  "keywords": [
    "imgur",
    "react",
    "react-ponents",
    "ponent",
    "images",
    "photos",
    "pics"
  ],
  "author": "Kyle Calica",
  "license": "ISC",
  "dependencies": {
    "@babel/preset-react": "^7.0.0",
    "react-dom": "^16.5.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "eslint": "^5.7.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "fixed": "^0.3.0",
    "it": "^1.1.1",
    "path": "^0.12.7",
    "react": "^16.5.2",
    "webpack": "^4.22.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  }
}

index.js:

import React, { Component } from 'react';

var imgurAPI = 'https://api.imgur./3/album/';

export default class ImgurAlbum extends Component {
  constructor(props){
    super(props);
    this.state = {
      imgurPosts: [],
      isLoading: true
    };
  }


  ponentDidMount(){
    fetch(imgurAPI + this.props.album + '/images',{
      'headers':{
        'Authorizathion': 'client-id'
      }
    }).then(res => res.json())
    .then(data => console.log(data));
  }

  render(){
        return(
          <div>
            <h1>hi!</h1>
          </div>
        );
      }
}

I notice I have two babel cores installed, I don't know how to remove one, or which one to keep. Or even how to select which one with webpack?

• javascript
• reactjs
• webpack
• babeljs
• babel-loader

1 Answer 1

I found my solution!

It's a babel mismatch. I had an old babel-core and babel-presets installed.

In Babel 7, it is best to install using:

npm i @babel/preset-react @babel/preset-env

then in your .babelrc:

{
  "presets" : ["@babel/preset-env","@babel/preset-react"]
}

I also uninstalled the old babel-preset-react and babel-preset-es2015 for safe measure.

Still learning so I might be missing steps or understanding here. Please add if you believe you need more information or if I am wrong about anything, but I was able to get mine to build