javascript - PluginPreset files are not allowed to export objects, only functions. Removing and keeping babel installs? Selectio

admin管理员组

文章数量:1328967

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

Share Follow edited Oct 25, 2018 at 5:59 Kyle Calica-St asked Oct 23, 2018 at 16:31 Kyle Calica-StKyle Calica-St 2,96366 gold badges3232 silver badges6464 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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

本文标签：