试图让react路由器(v4.0.0)和react热加载程序(3.0.0-beta.6)正常运行,但在浏览器控制台中出现以下错误:
警告:React.createElement:类型无效--应为字符串
(对于内置组件)或类/函数(对于复合
组件)但得到:未定义。您可能忘了导出您的
组件,该组件来自定义它的文件。
index.js:
从“React”导入React;
从“react dom”导入react dom;
从“/routes.js”导入路由;
require('jquery');
导入'bootstrap/dist/css/bootstrap.min.css';
导入'bootstrap/dist/js/bootstrap.min.js';
导入“/css/main.css”;
const renderap=(批准)=>;{
render(appRoutes,document.getElementById('root');
};
renderApp(routes());
routes.js:
从“React”导入React;
从“react hot loader”导入{AppContainer};
从“react Router”导入{Router,Route,browserHistory,IndexRoute};
从“./store/store.js”导入存储;
从'react redux'导入{Provider};
从“/containers/App.jsx”导入应用程序;
从“/containers/shop/Products.jsx”导入产品;
从“/containers/shop/Basket.jsx”导入篮子;
常数路由=()=>;(
<;AppContainer>;
<;提供程序存储={store}>;
<;路由器历史={browserHistory}>;
<;路由路径=“/”组件={App}>;
<;索引路由组件={Products}/>;
<;路由路径=";/basket";组件={basket}/>;
<;/Route>;
<;/Router>;
<;/Provider>;
<;/AppContainer>;
);
导出默认路径;
大多数情况下,这是由于不正确的导出/导入。
常见错误:
//文件:LeComponent.js
导出类LeComponent扩展React.Component{…}
//文件:App.js
从“/LeComponent”导入LeComponent;
可能的选择:
//文件:LeComponent.js
导出默认类LeComponent扩展React.Component{…}
//文件:App.js
从“/LeComponent”导入LeComponent;
有几种方法可能是错误的,但这种错误是因为每次有60%的时间是由于导入/导出不匹配造成的
编辑
通常,您应该获得一个stacktrace,该stacktrace指示故障发生的大致位置。这通常紧跟在你的原始问题中的信息之后
如果它没有显示,那么可能值得调查原因(可能是您缺少的构建设置)。不管怎样,如果没有显示,唯一的方法就是缩小导出/导入失败的范围
不幸的是,在没有堆栈跟踪的情况下,唯一的方法是手动删除每个模块/子模块,直到不再出现错误,然后以自己的方式备份堆栈
编辑2
通过评论,这确实是一个导入问题,特别是导入一个不存在的模块