Reactjs Ant设计因babel插件导入和创建react应用程序重新布线而失败
我正在遵循Ant设计指南 我已经安装了“react应用程序重新布线”、“自定义cra”和“babel插件导入”。这是我的完整package.json文件:Reactjs Ant设计因babel插件导入和创建react应用程序重新布线而失败,reactjs,webpack,create-react-app,antd,babel-loader,Reactjs,Webpack,Create React App,Antd,Babel Loader,我正在遵循Ant设计指南 我已经安装了“react应用程序重新布线”、“自定义cra”和“babel插件导入”。这是我的完整package.json文件: { "name": "client", "version": "0.1.0", "private": true, "dependencies": { "antd": "^3.10.0", "react": "^16.5.1", "react-dom": "^16.5.1", "react-inf
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"antd": "^3.10.0",
"react": "^16.5.1",
"react-dom": "^16.5.1",
"react-infinite-scroller": "^1.2.2",
"react-scripts": "1.1.5"
},
"scripts": {
"analyze": "source-map-explorer build/static/js/main.*",
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001",
"devDependencies": {
"babel-plugin-import": "^1.11.0",
"customize-cra": "^0.2.10",
"react-app-rewired": "^2.0.2",
"source-map-explorer": "^1.6.0"
}
}
我还有一个config-overrides.js文件:
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);
但是,“启动”命令失败,出现以下错误:
/home/vedantroy/Programming/app_name/client/node_modules/customize-cra/index.js:49
getBabelLoader(config).options.plugins.push(plugin);
^
TypeError: Cannot read property 'options' of undefined
at Object.config (/home/vedantroy/Programming/app_name/client/node_modules/customize-cra/index.js:49:25)
at Object.webpack (/home/vedantroy/Programming/app_name/client/node_modules/lodash.flow/index.js:177:42)
at Object.<anonymous> (/home/vedantroy/Programming/app_name/client/node_modules/react-app-rewired/scripts/start.js:22:15)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:266:19)
/home/vedantroy/Programming/app\u name/client/node\u modules/customize cra/index.js:49
getBabelLoader(config).options.plugins.push(plugin);
^
TypeError:无法读取未定义的属性“options”
在Object.config(/home/vedantroy/Programming/app_name/client/node_modules/customize cra/index.js:49:25)
在Object.webpack(/home/vedantroy/Programming/app_name/client/node_modules/lodash.flow/index.js:177:42)
反对。(/home/vedantroy/Programming/app_name/client/node_modules/react app rewired/scripts/start.js:22:15)
at模块编译(内部/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js(internal/modules/cjs/loader.js:700:10)
在Module.load(内部/modules/cjs/loader.js:599:32)
在tryModuleLoad(内部/modules/cjs/loader.js:538:12)
at Function.Module._load(内部/modules/cjs/loader.js:530:3)
位于Function.Module.runMain(内部/modules/cjs/loader.js:742:12)
启动时(内部/bootstrap/node.js:266:19)
如何修复此错误/可能的原因是什么?我很确定我完全遵循了Ant Design的指南。您可以使用
自定义cra的函数和.babelrc中,您可以为antd编写babel配置。看起来您正在使用react-scripts@1.x
您需要的react应用程序-rewired@1.6.2
更改上述版本并按照上述步骤操作@
它将开始工作
注:customize cra
用于react应用程序-rewired@2.x