首页 > 解决方案 > 错误:插件/预设文件不允许导出对象,只能导出函数。反应JS

问题描述

我已经尝试过不同版本的 babel 和 webpack,但这个问题仍然相同。这不是我的 webpack.config.js 中的错误吗?如您所见,那里的webpack版本很低,如果这些错误可能是在webpack的版本上?

我尝试了 babel 的低版本,但还是一样,我真的想不通。已经 24 小时的问题,我仍然无法解决这个问题。我想升级 ReactJS 版本 16。

webpack.config.js

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

// new WebpackDevServer(webpack(config), {

module.exports = {

  context: __dirname,
  entry: [
      'webpack-dev-server/client?http://localhost:3000',
      'webpack/hot/only-dev-server',
      './app/modules/common/index'
  ],

  output: {
      path: path.resolve('./app/static/bundles/'),
      filename: '[name]-[hash].js',
      publicPath: 'http://localhost:3000/app/static/bundles/',
       // Tell django to use this URL to load packages and not use STATIC_URL + bundle_name
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(), // don't reload if there is an error
    new BundleTracker({filename: './webpack-stats.json'}),
  ],

  module: {
    loaders: [
    { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=public/icons/[name].[ext]"},
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
            presets: ['es2015','react']
        }
    },
    ],
  },

  resolve: {
    modulesDirectories: ['node_modules', 'bower_components'],
    extensions: ['', '.js', '.jsx']
  }
}

Babel 配置(.babelrc、package.json、cli 命令)

包.json

{
"devDependencies": {
"@babel/core": "^7.0.1",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"react-hot-loader": "^3.0.0-beta.6",
"webpack": "^1.9.8",
"webpack-bundle-tracker": "0.0.5",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^1.9.0",
"mobx-logger": "^0.5.0",
"mobx-react-devtools": "^4.2.11",
"file-loader": "^0.11.2"
"react": "^16.6.3",
"react-dom": "^16.6.3",
  },
}

.babelrc

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

错误截图: 在此处输入图像描述

标签: javascriptreactjswebpackbabeljs

解决方案


我现在明白了,我改变了我的webpack.config.js

query: { presets: [ '@babel/env', '@babel/react', ]

推荐阅读