Django Webpack React：插件/预设文件不允许导出对象，只有函数

Question

我正在尝试使用 django 配置我的反应。

但由于某种原因，每当我尝试npm run start 时，我都会收到此错误： Plugin/Preset files are not allowed to export objects, only functions. In ../../node_modules/babel-preset-react/lib/index.js 我试过了： npm install @babel/preset-react npm install babel-preset-react --save-dev npm install -D babel-loader @babel/core @babel/preset-env webpack 但什么也没做。

Django 版本：2.2.6

Webpack 配置：

var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
module.exports = {
  entry:  path.join(__dirname, 'assets/src/js/index'),
  output: {
    path: path.join(__dirname, 'assets/dist'),
    filename: '[name]-[hash].js'
  },
  plugins: [
    new BundleTracker({
      path: __dirname,
      filename: 'webpack-stats.json'
    }),
  ],
  module: {
      rules: [
        {
          test: /\.jsx?$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          options: {
             presets: ['react']
          }
        },
      ],
    },
}

设置：

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'dist/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
    }
}

.babelrc:

{
    "presets": [
      "es2015", "react"
    ]
}

package.json:

{
  "name": "collegeapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "./node_modules/.bin/webpack --config webpack.config.js",
    "watch": "npm run start -- --watch"
  },
  "repository": {
    "type": "git",
    "url": 
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": 
  },
  "homepage":
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@babel/preset-env": "^7.7.4",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.26.0",
    "webpack": "^4.41.2",
    "webpack-bundle-tracker": "^0.4.3",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

Answer 1

问题是你给应用程序提供了两种 babel，我在配置 react base 时遇到了这种复杂性。

基于 babel 核心，需要安装 babel react 及其预设。就像使用 @babel/core 一样，安装 @babel/react 和 @babel/preset-react。确保你的 react babel 插件支持 Babel 核心。

去掉 babel 不必要的插件，这会混淆 web-pack 使用哪个 babel。

希望对你有帮助。