Babel Plugin/Preset files are not allowed to export objects, only functions

JavascriptWebpackBabeljs

Javascript Problem Overview


I`m tryng to use Babel-loader on an old project, and i notice some issues regarding when babel loader is working on wrapped objects, is this its default behaviour ? I am not sure if this is a bug or something im doing wrong, i could not find much about it over google, so this is my last resource.

Would i need to change something to my code to make it work ?

This are my current specs: Webpack: 3.19.0 babel/core: 7.0.0-beta.34 babel-loader: 8.0.0-beta.0

Please refer to my packages.json if needed:

http://paste.ubuntu.com/26187880/

I`m tryng to load a single file wrapped in a function:

http://paste.ubuntu.com/26187814/

Resuming, something old, that is built like this:

(  window.global = { } )();

This is my webpack config:

const webpackConfig = {
    context: __dirname,
    entry: {
        app: '../../JavaScript/Namespacing.js'
    },
    module: {
        rules: [
          {
            test: /.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
            }
          }
        ]
    },
    output: {
      path: __dirname + "/../../static/js",
      filename: "[name].js"
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ],
}

And the error i get on my file is the following:

Plugin/Preset files are not allowed to export objects, only functions.

So, am i missing something ?

Thanks for any help.

Javascript Solutions


Solution 1 - Javascript

I got the same error with babel 7.x and and "babel-loader": "^8.0.4"

I solved the issue by changing the following dependencies in package.json. I got the solution from these link

"devDependencies": {
	"@babel/core": "^7.1.6",
	"@babel/preset-env": "^7.1.6",
	"@babel/preset-react": "^7.0.0",
	"babel-loader": "^8.0.4",
	"webpack": "^4.25.1",
	"webpack-cli": "^3.1.2"
}

and in .babelrc

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

or in package.json

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

If you are using npm then use the following

npm install @babel/core --save-dev
npm install @babel/preset-env --save-dev
npm install @babel/preset-react --save-dev
npm install babel-loader --save-dev
npm install webpack --save-dev
npm install webpack-cli --save-dev

If you are using yarn, then use the following

yarn add @babel/core --dev
yarn add @babel/preset-env --dev
yarn add @babel/preset-react --dev
yarn add babel-loader --dev
yarn add webpack --dev
yarn add webpack-cli --dev

Solution 2 - Javascript

From your package.json, I can see that you are using older plugins and presets meant for Babel v6, which will result in this error message. You need to switch to e.g., @babel/preset-env, then update your .babelrc accordingly (if you provide .babelrc, more specific guidance can be given).

Here is a related ticket with some explanation - https://github.com/babel/babel-loader/issues/540

A few more semi-related notes on what I see in package.json:

The old babel-core dependency is still there. Remove this or update it to version 7.0.0-bridge.0. Similarly, the old react preset is in there, remove it.

If you are using the env preset, you do not need to use the es2015 preset at all. Remove it.

Solution 3 - Javascript

Babel has been moved its packages into its Scope Repository Since version 7.x .


the last version of babel packages (in main npmjs ) are :

"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
...

but you have to use The Continued version in @babel/ scoped repository:

by today these are :

"@babel/core": "^7.12.16",
"@babel/preset-env": "^7.12.16",
"@babel/preset-react": "^7.12.13",
...

so you have to uninstall and install them:

npm uninstall babel-core babel-preset-env babel-preset-react
npm install @babel/core @babel/preset-env @babel/preset-react

or :

yarn remove babel-core babel-preset-env babel-preset-react --dev
yarn add @babel/core @babel/preset-env @babel/preset-react --dev

> Note 1: you can add a @ and change first - to / > > Note 2: note that, The babel-loader package is not in babel > package, its a module for webpack to load babel. (it remains > bebel-loader with latest version)


after changing babel to its scope you have to make required changes in the .babelrc :

from:

"presets" : ["env","react"]

to :

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

Solution 4 - Javascript

answers are for old versions. currently this set up is enough:

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

if you are using this package "babel-preset-stage-0" on top of those you will still get same error. So uninstall "babel-preset-stage-0" and make sure your all babel packages are starts with "@babel" except "babel-loader". @babel indicates that the package is maintained by the babel team

Solution 5 - Javascript

Most of the packages were not even installed. So, this is the combination which actually worked. Remember to delete your node_modules before testing and changes in .babelrc is important. Updated devDependencies of package.json and .babelrc from.

Updated from:

1. Package.json file:

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "webpack": "^4.41.2",
}


2. .babelrc file:

{
   "presets": [
      "env",
      "react",
      "es2015"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread",
    "transform-react-jsx"
  ]
}

Updated to:

1. Package.json file:

"devDependencies": {
      "@babel/core": "^7.13.10",
      "@babel/plugin-proposal-class-properties": "^7.8.3",
      "@babel/preset-env": "^7.1.6",
      "@babel/preset-react": "^7.0.0",
      "babel-cli": "^6.26.0",
      "babel-core": "^7.0.0-bridge.0",
      "babel-loader": "^8.0.4",
      "webpack": "^4.46.0"
}


2. .babelrc file:

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

Solution 6 - Javascript

this worked for me:

npm uninstall --save babel-loader

npm uninstall --save @babel/core

npm install --save-dev babel-loader@^7

and in babelrc:

"presets" : ["env", "react"]

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGabriel SlomkaView Question on Stackoverflow
Solution 1 - JavascriptPrince FrancisView Answer on Stackoverflow
Solution 2 - JavascriptSpain TrainView Answer on Stackoverflow
Solution 3 - JavascriptAbilogosView Answer on Stackoverflow
Solution 4 - JavascriptdaisyView Answer on Stackoverflow
Solution 5 - JavascriptKushalSethView Answer on Stackoverflow
Solution 6 - JavascriptChiraag MittalView Answer on Stackoverflow