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

[yangheng]

babel-loader@8.0.0-beta.0 @babel/core@next @babel/preset-env@next

Input Code

import React from 'react'
import { AppContainer } from 'react-hot-loader'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types';
import App from './containers/app'

const MOUNT_NODE = document.getElementById('container')

const render = Comp => {
    ReactDOM.render(
        <AppContainer>
            <Comp/>
        </AppContainer>,
        MOUNT_NODE
    )
}

render(App)

// Webpack Hot Module Replacement API
if (module.hot) {
    module.hot.accept('./containers/app', () => { render(App) })
}

Babel/Babylon Configuration (.babelrc, package.json, cli command)

/**
 * Created by kukuchong on 2017/11/8.
 */

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');

const config = {

    context: path.join(__dirname, 'src'),
    entry: {
        'app':'./index.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.join(__dirname, 'public')
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                include: [
                    path.resolve(__dirname, 'src')
                ],
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                        babelrc: false,
                        presets: [
                            ["@babel/env", {
                                "targets": {
                                    'browsers': ['Chrome >=59']
                                },
                                "modules":false,
                                "loose":true
                            }],"react"],

                        plugins: [
                            "react-hot-loader/babel",
                            ["import", {libraryName: "antd", style: "css"}],
                            "@babel/proposal-object-rest-spread"

                        ]
                    }
                }
                ]

            },
            {
                test: /\.css/,
                include: [
                    path.resolve(__dirname, 'src')
                ],
                exclude: /(node_modules)/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1
                            }
                        },
                        'postcss-loader']
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    //resolve-url-loader may be chained before sass-loader if necessary
                    use: ['css-loader', 'postcss-loader', 'sass-loader']
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'postcss-loader', 'less-loader']
                })
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000
                        }
                    }
                ]
            },
            {
                test: /\.(eot|ttf|wav|mp3)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {}
                    }
                ]
            }
        ]
    },
    resolve: {
        modules: [path.resolve(__dirname, 'node_modules')],
        extensions: ['.js', '.jsx', '.json', '.scss' ,'.less', '.css'],
        unsafeCache: true,
        alias: {
            'react': path.resolve(__dirname, 'node_modules/react/cjs/react.development.js'),
            'react-dom': path.resolve(__dirname, 'node_modules/react-dom/cjs/react-dom.development.js')
        }
    },
    performance: {},
    devtool: 'eval',

    target: 'web',

    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM'
    },

    stats: {
        colors: true,
        reasons: true,
        hash: true,
        version: true,
        timings: true,
        chunks: true,
        chunkModules: true,
        cached: true,
        cachedAssets: true
    }
    ,

    devServer: {
        port: 3000,
        contentBase: path.resolve(__dirname, 'public'),
        hot: true,
        inline: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin("styles.css"),
        new webpack.optimize.CommonsChunkPlugin({
            name: "common"
        }),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new HtmlWebpackPlugin({
            inject: "body",
            title: "tools",
            template: path.resolve(__dirname, 'src/template/index.html')
        }),
        new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, 'node_modules/react/cjs/react.development.js'),
                to: path.resolve(__dirname, 'public/react.js')
            },
            {
                from: path.resolve(__dirname, 'node_modules/react-dom/cjs/react-dom.development.js'),
                to: path.resolve(__dirname, 'public/react-dom.js')
            }
        ]),
        new webpack.optimize.UglifyJsPlugin({
            comments: false,
            sourceMap: true,
            compress: {warnings: true, screw_ie8: false},
            mangle: {screw_ie8: false},
            output: {screw_ie8: false}
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"development"'
        }),
        new webpack.optimize.AggressiveMergingPlugin()

    ]

}

module.exports = config;

Expected Behavior

ERROR in ./src/index.js
Module build failed: Error: [BABEL] /Users/kukuchong/yunshipei/dawn/src/index.js: Plugin/Preset files are not allowed to export objects, only functions.
at createDescriptor (/Users/kukuchong/yunshipei/dawn/node_modules/@babel/core/lib/config/option-manager.js:365:11)
at /Users/kukuchong/yunshipei/dawn/node_modules/@babel/core/lib/config/option-manager.js:188:12
at Array.map (native)
at /Users/kukuchong/yunshipei/dawn/node_modules/@babel/core/lib/config/option-manager.js:187:48
at cachedFunction (/Users/kukuchong/yunshipei/dawn/node_modules/@babel/core/lib/config/caching.js:48:17)
at OptionManager.mergeOptions (/Users/kukuchong/yunshipei/dawn/node_modules/@babel/core/lib/config/option-manager.js:53:18)
at OptionManager.init (/Users/kukuchong/yunshipei/dawn/node_modules/@babel/core/lib/config/option-manager.js:121:14)
at manageOptions (/Users/kukuchong/yunshipei/dawn/node_modules/@babel/core/lib/config/option-manager.js:37:30)
at loadConfig (/Users/kukuchong/yunshipei/dawn/node_modules/@babel/core/lib/config/index.js:15:37)
at Object.transform (/Users/kukuchong/yunshipei/dawn/node_modules/@babel/core/lib/transform.js:13:36)
at transpile (/Users/kukuchong/yunshipei/dawn/node_modules/babel-loader/lib/index.js:55:20)
at /Users/kukuchong/yunshipei/dawn/node_modules/babel-loader/lib/fs-cache.js:116:18
at ReadFileContext.callback (/Users/kukuchong/yunshipei/dawn/node_modules/babel-loader/lib/fs-cache.js:36:21)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:359:13)
@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./index.js

Current Behavior

Your Environment

software	version(s)
node	v7.9.0
npm	v5.4.2
Operating System	macOS 10.12.6

[babel-bot]

Hey @yangheng! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

[loganfsmyth]

Just like env is now @babel/env, react should be @babel/react and you'll need to install @babel/preset-react.

[yangheng]

Yeah, you are right . Thank you !

[loganfsmyth]

No problem! Took me time to notice too.

[abbymrs]

@loganfsmyth when i use import key word in koajs server file, it generates the same error.
babel-cli and babel-node have been installed, but when i execute nodemon server.js --exec babel-node, this error occurs.

nodejs version: 8.9.0
babel-core: 6.26.0

[rxgx]

@abbymrs I believe that should be @babel/core instead of babel-core

[abbymrs]

@rxgx I did install @babel/core, not babel-core, i typed babel --version in the command, then it shown 6.26.0 (babel-core 6.26.0)

[loganfsmyth]

@abbymrs All of Babel 7's beta packages are under the @babel/* scope. From your description, it sounds like you've potentially installed @babel/core for 7.x, but babel-cli is still Babel 6. Perhaps what you need is to update that to be @babel/cli?

[abbymrs]

@loganfsmyth i removed @babel/cli and @babel/core, and installed babel-cli in global and devDependencies, it works now, thank you!

[loganfsmyth]

@abbymrs Cool, glad you got it working.

One comment I'll add is that usually you don't want to install things globally unless you've got a really good reason. Installing in devDependencies is best, but as you probably noticed it makes actually running the command more difficult. For that you'll want to take a look at https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b or npm scripts.

[abbymrs]

@loganfsmyth Thanks for your sharing^^. i choose to install babel-cli globally, because i think it will be used anywhere, not just this project.

[loganfsmyth]

Fair! The risk is mostly that eventually some projects might use Babel 6 and some might use Babel 7, but that's probably not a big deal until 7.x actually gets released anyway.

[srghma]

I'm getting this error only with react-optimize in my babelrc

{
  "presets": [
    ["@babel/env", {
      "targets": {
        "browsers": "last 2 Chrome versions",
        "node": "current"
      }
    }],
    "@babel/react",
    "react-optimize"
  ],
  "plugins": [
    "@babel/transform-runtime",
    ["babel-plugin-root-import", {
      "rootPathSuffix": "."
    }]
  ]
}

my devDeps

  "devDependencies": {
    "@babel/core": "^7.0.0-beta.33",
    "@babel/plugin-transform-runtime": "^7.0.0-beta.33",
    "@babel/preset-env": "^7.0.0-beta.33",
    "@babel/preset-react": "^7.0.0-beta.33",
    "@babel/register": "^7.0.0-beta.33",
    "@babel/runtime": "^7.0.0-beta.33",
    "babel-eslint": "^8.0.3",
    "babel-loader": "^8.0.0-beta.0",
    "babel-plugin-root-import": "^5.1.0",
    "babel-preset-react-optimize": "^1.0.1",

[loganfsmyth]

@BjornMelgaard With the way that preset is currently written, it won't work on Babel 7. May be reason to reconsider this error and make it a warning instead.

For now I'd say you're better off installing the plugins directly anyway. All that preset does is load these 4 plugins: https://github.com/thejameskyle/babel-react-optimize/blob/master/packages/babel-preset-react-optimize/src/index.js#L2

So I'd change your

  "plugins": [
    "@babel/transform-runtime",
    ["babel-plugin-root-import", {
      "rootPathSuffix": "."
    }]

to

  "plugins": [
    "@babel/transform-react-constant-elements",
    "@babel/transform-react-inline-elements",
    "transform-react-remove-prop-types",
    "transform-react-pure-class-to-function",

    "@babel/transform-runtime",
    ["babel-plugin-root-import", {
      "rootPathSuffix": "."
    }]

and do

npm install @babel/plugin-transform-react-constant-elements @babel/plugin-transform-react-inline-elements babel-plugin-transform-react-remove-prop-types babel-plugin-transform-react-pure-class-to-function

[srghma]

Thanks, that working.

Can you help me with updating babel-react-optimize

When I trying to use it in home project I getting error

$ npm install --save-dev https://github.com/BjornMelgaard/babel-react-optimize\#fix/babel-7
$ cd node_modules/babel-preset-react-optimize
$ yarn install
$ gulp build
$ cd ../.. 
$ yarn run build
yarn run v1.3.2
$ node scripts/build
/home/bjorn/work/nuuz-chrome-extension/node_modules/@babel/core/lib/config/option-manager.js:120
      throw e;
      ^

Error: [BABEL] /home/bjorn/work/nuuz-chrome-extension/webpack/webpack.config.babel.js: Cannot find module 'babel-plugin-react-optimize' from '/home/bjorn/work/nuuz-chrome-extension'
    at Function.module.exports [as sync] (/home/bjorn/work/nuuz-chrome-extension/node_modules/resolve/lib/sync.js:40:15)
    at resolveStandardizedName (/home/bjorn/work/nuuz-chrome-extension/node_modules/@babel/core/lib/config/loading/files/plugins.js:78:29)
    at resolvePlugin (/home/bjorn/work/nuuz-chrome-extension/node_modules/@babel/core/lib/config/loading/files/plugins.js:27:10)
    at loadPlugin (/home/bjorn/work/nuuz-chrome-extension/node_modules/@babel/core/lib/config/loading/files/plugins.js:35:18)
    at createDescriptor (/home/bjorn/work/nuuz-chrome-extension/node_modules/@babel/core/lib/config/option-manager.js:443:21)
    at /home/bjorn/work/nuuz-chrome-extension/node_modules/@babel/core/lib/config/option-manager.js:166:12
    at Array.map (<anonymous>)
    at /home/bjorn/work/nuuz-chrome-extension/node_modules/@babel/core/lib/config/option-manager.js:165:48
    at cachedFunction (/home/bjorn/work/nuuz-chrome-extension/node_modules/@babel/core/lib/config/caching.js:40:17)
    at /home/bjorn/work/nuuz-chrome-extension/node_modules/@babel/core/lib/config/option-manager.js:90:14
Done in 0.94s.

I'm not sure how babel 7 searching modules

[selected-pixel-jameson]

I'm getting the same error when I try to use the react-table module.

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const nodeExternals = require('webpack-node-externals');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

const analyze = !!process.env.ANALYZE_ENV
const env = process.env.NODE_ENV || 'development'

const extractSass = new ExtractTextPlugin({
    filename: "[name].css",
});

const webpackConfig = {
    entry: {
        'main': './wwwroot/source/app.js'

    },
    output: {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename: '[name].bundle.js',
        publicPath: '/dist/'
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        }),
        extractSass
    ],
    resolve: {
        extensions: [ '.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'assets/fonts/',    // where the fonts will go
                        publicPath: '/dist/'       // override the default path
                    }
                }]
            },
            {
                test: /\.(gif|png|jpe?g)$/i,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'assets/images/',    // where the fonts will go
                        publicPath: '/dist/'       // override the default path
                    }
                }]
            },
            {
                test: /\.css$/, use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            },
            {
                test: /\.scss$/,
                use: extractSass.extract({
                    use: [{
                        loader: "css-loader",
                        options: {
                            minimize: true
                        }
                    }, {
                            loader: "sass-loader",
                            options: {
                                minimize:true
                            }
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            },
            {
                test: /\.(js|jsx)$/,
                exclude: '/node_modules/',
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/react', '@babel/env']
                    }
                }
            }
        ]
    }
}

if (analyze) {
    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

if (env === 'production') {
    webpackConfig.plugins.push(
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: false
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                screw_ie8: true,
                conditionals: true,
                unused: true,
                comparisons: true,
                sequences: true,
                dead_code: true,
                evaluate: true,
                if_return: true,
                join_vars: true
            },
            output: {
                comments: false
            }
        })
    )
}

module.exports = webpackConfig

This is the error I'm getting.

Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.
    at createDescriptor (C:\Users\james\source\repos\GeniusSupply\GS.ManageApp\node_modules\@babel\core\lib\config\config-descriptors.js:158:11)
    at C:\Users\james\source\repos\GeniusSupply\GS.ManageApp\node_modules\@babel\core\lib\config\config-descriptors.js:101:12
    at Array.map (native)
    at createDescriptors (C:\Users\james\source\repos\GeniusSupply\GS.ManageApp\node_modules\@babel\core\lib\config\config-descriptors.js:100:27)
    at createPresetDescriptors (C:\Users\james\source\repos\GeniusSupply\GS.ManageApp\node_modules\@babel\core\lib\config\config-descriptors.js:92:10)
    at C:\Users\james\source\repos\GeniusSupply\GS.ManageApp\node_modules\@babel\core\lib\config\config-descriptors.js:64:19
    at presets (C:\Users\james\source\repos\GeniusSupply\GS.ManageApp\node_modules\@babel\core\lib\config\config-descriptors.js:54:25)
    at mergeChainOpts (C:\Users\james\source\repos\GeniusSupply\GS.ManageApp\node_modules\@babel\core\lib\config\config-chain.js:215:68)
    at C:\Users\james\source\repos\GeniusSupply\GS.ManageApp\node_modules\@babel\core\lib\config\config-chain.js:168:7
    at buildRootChain (C:\Users\james\source\repos\GeniusSupply\GS.ManageApp\node_modules\@babel\core\lib\config\config-chain.js:57:20)
    at loadConfig (C:\Users\james\source\repos\GeniusSupply\GS.ManageApp\node_modules\@babel\core\lib\config\index.js:45:53)
    at transformSync (C:\Users\james\source\repos\GeniusSupply\GS.ManageApp\node_modules\@babel\core\lib\transform-sync.js:13:36)
    at Object.transform (C:\Users\james\source\repos\GeniusSupply\GS.ManageApp\node_modules\@babel\core\lib\transform.js:20:65)
    at transpile (C:\Users\james\source\repos\GeniusSupply\GS.ManageApp\node_modules\babel-loader\lib\index.js:55:20)
    at Object.module.exports (C:\Users\james\source\repos\GeniusSupply\GS.ManageApp\node_modules\babel-loader\lib\index.js:179:20)
 @ ./wwwroot/source/components/ContactList.jsx 12:41-63
 @ ./wwwroot/source/app.js
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--3-2!node_modules/sass-loader/lib/loader.js??ref--3-3!wwwroot/sass/main.scss:
     5 assets
       [0] ./node_modules/css-loader?{"minimize":true}!./node_modules/sass-loader/lib/loader.js?{"minimize":true}!./wwwroot/sass/main.scss 34 kB {0} [built]
        + 8 hidden modules

npm ERR! Windows_NT 10.0.16299
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "wbp"
npm ERR! node v6.11.4
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! genius-supply-management-app@1.0.0 wbp: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the genius-supply-management-app@1.0.0 wbp script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the genius-supply-management-app package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs genius-supply-management-app
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls genius-supply-management-app
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\james\source\repos\GeniusSupply\GS.ManageApp\npm-debug.log```

[aretecode]

@loganfsmyth it would be nice if this error gave an indication about where the offending exporter path is located, and for bonus, a link to this issue or a guide 👍

[lewischa]

A filepath to the offending export would be very nice. I am also running into this issue.

[metacoding]

I get the same error with react-hot