Preset files are not allowed to export objects

Question

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

Answer 1

There are upgrades in babel 7 from version 6 refer to https://babeljs.io/docs/en/v7-migration. To solve the current problem/error

Install

npm install --save-dev @babel/preset-react

npm install --save-dev @babel/preset-env

then in .babelrc the dependency for presets should look like

{

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

   "plugins": [
    "react-hot-loader/babel", "transform-object-rest-spread"]

}

Answer 2

I had "stage-1" within my presets in .babelrc, so I removed that and the error went away

Answer 3

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"
]
}

Answer 4

Got the same issue in my webpack/react project - it seems that there was an issue with the .babelrc file.

I updated it as seen below and it did the trick:

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread"
    ]
}