• Home
  • Jobs
  • Courses
  • Questions
  • Teachers
  • For business
  • ES/EN

0

137
Views
Preset files are not allowed to export objects

I have a carousel file in which I want to get index.js and build block.build.js, so my webpack.config.js is:

var config = {
  entry: './index.js',
  output: {
    path: __dirname,
    filename: 'block.build.js',
  },
  devServer: {
    contentBase: './Carousel'
  },
  module : {
    rules : [
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015'],
          plugins: ['transform-class-properties']
        }
      }
    ]
  }
};
module.exports = config;

The package.json which I use is below:

{
  "name": "carousel",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "@babel/core": "^7.0.0-beta.40",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.0-beta.0",
    "babel-plugin-lodash": "^3.3.2",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-react": "^6.24.1",
    "cross-env": "^5.1.3",
    "lodash": "^4.17.5",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-swipeable": "^4.2.0",
    "styled-components": "^3.2.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.10",
    "webpack-dev-server": "^3.1.0"
  },
  "author": "brad traversy",
  "license": "ISC"
}

… but I get this error message:

ERROR in ./index.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.

Does anyone know how to solve this?

4 months ago ·

Santiago Trujillo

3 answers
Answer question

0

You're using a combination of Babel 6 and Babel 7. There is no guarantee of compatibility across versions:

"@babel/core": "^7.0.0-beta.40",
"babel-cli": "^6.26.0",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-react": "^6.24.1",

should be

"@babel/core": "^7.0.0-beta.40",
"@babel/cli": "^7.0.0-beta.40",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"@babel/preset-react": "^7.0.0-beta.40",

and

    query: {
      presets: ['react', 'es2015'],
      plugins: ['transform-class-properties']
    }

would be

    query: {
      presets: ['@babel/react', '@babel/es2015'],
      plugins: ['@babel/proposal-class-properties']
    }

I'm also confused because you didn't mention @babel/proposal-class-properties in your package.json, but assuming it is in there it should also be updated.

4 months ago · Santiago Trujillo Report

0

It happened to me and a simple solution for me was to uninstall babel-loader@8^ and @babel/core:

npm uninstall --save babel-loader
npm uninstall --save @babel/core

… and then to install version 7 babel-loader:

npm install --save-dev babel-loader@^7
4 months ago · Santiago Trujillo Report

0

That is due to outdated babel packages being used. The babel project, just like most other active Javascript projects, have moved on to using scope packages. Hence, the package names starts with @babel

If you are using yarn, follow the below one:

Step 1: Remove the old packages

$ yarn remove babel-core babel-loader babel-preset-env babel-preset-react

step 2: Add the new packages

$ yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

If you are using npm, follow the below one:

step 1: Remove the old packages

$ npm uninstall babel-core babel-loader babel-preset-env babel-preset-react

step 2: Add the new packages

$ npm add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

Step 3: common to both npm or yarn

After installing the newer packages, remember to update your .babelrc presets from react to @babel/preset-react. Here is a simple example

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}
4 months ago · Santiago Trujillo Report
Answer question
Find remote jobs
Loading

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2022 PeakU Inc. All Rights Reserved.