反应错误：不允许插件/预设文件导出对象，仅导出功能

Question

I am trying to install new react project but have encountered some issues.

Now after resolving many issues, I'm stuck with this issue:

 ERROR in ./script.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In D:\react_project\node_modules\babel-preset-es2015\lib\index.js

I have encountered this issue after installing @babel/core version 7.

Here's my package.json :

{
  "name": "react_project",
  "version": "1.0.0",
  "description": "first project on react",
  "main": "index.js",
  "scripts": {
    "it": "webpack-dev-server --hot"
  },
  "author": "azima",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.17.1",
    "webpack-dev-server": "^3.1.7"
  },
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "webpack-cli": "^3.1.0"
  }
}

webpack.config.js:

var path = require('path');
module.exports = {
    entry: './script.jsx',
    output: {
        path: path.resolve(__dirname,''),
        filename: 'transpiled.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loaders: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }   
            }   
        ]
    }
}

What does the error mean and how can I resolve it?

Answer 1

Sorry I didn't see this question earlier, but here is the problem and the solution for it: "babel-loader": "^8.0.1" works with "@babel/core": "^7.0.0" . Babel 7 moved to scoped packages and introduced some changes in the plugin API, so your problem is you are mixing old and new babel.

babel-preset-es2015 is no longer needed, since there is a @babel/preset-env which takes care of all the new features you may need based on the target platform (see the link for configuration options).

babel-preset-react (which is a babel v6 preset) is now @babel/preset-react (a v7 preset).

And your webpack loader configuration should now look like this:

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    options: {
        presets: ['@babel/preset-env', '@babel/preset-react']
    }
}