react.js - create-react-app构建项目，添加antd后报错？

问题描述

问 题

react 项目添加 antd 后配置报错

• node version： v6.10.0

• npm version: 3.10.10

使用 create-react-app 构建了一个项目，然后尝试添加 antd , 感觉一切都很美好，我的页面上成功渲染了一个漂亮的按钮，但是，console 提示 antd 需要按需加载。
于是，我按照 官方文档的高级配置 进行了配置。

• npm run eject

一些隐藏的配置项出现在目录中，比如 config/

之后，我修改了 config/webpack.config.dev.js 代码如下:

• 增加了 query.plugin

// Process JS with Babel.
{
    test: /\.(js|jsx)$/,
    include: paths.appSrc,
    loader: 'babel',
    query: {
      plugin: [
        ["import",{"libraryName":"antd","style":"css"}]
      ],
      // This is a feature of `babel-loader` for webpack (not Babel itself).
      // It enables caching results in ./node_modules/.cache/babel-loader/
      // directory for faster rebuilds.
      cacheDirectory: true
    }
  },

然后官方默认的 package.json (ps：不需要改动)

"babel": {
    "presets": [
      "react-app"
    ]
  },

最后是我自己的 js

import React, { Component } from 'react';
import { Button } from 'antd';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">          
          <Button type="danger">危险</Button>    
      </div>
    );
  }
}

export default App;

报错信息：

Error in ./src/index.js
Module build failed: ReferenceError: [BABEL] E:\workspace\react-demo\src\index.js: Unknown option: base.plugin. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options.
 @ multi main

上个页面的图片：

百度了下，没找到解决方案，也不知道问题到底存在在哪里，package.json 的那个配置是默认配置，没有改动，按理说不会报错的，而且在我安装 babel-plugin-import 并往 webpack.config.dev.js 里面添加配置项之前页面也正常渲染了我需要的 antd 组件，添加后报错了，好气哦。。。

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

plugin => plugins

这篇关于react.js - create-react-app构建项目，添加antd后报错？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！