未捕获的错误：元素类型无效

Posted 2023-02-21

【中文标题】未捕获的错误：元素类型无效

【英文标题】：Uncaught Error: Element type is invalid

【发布时间】：2017-09-06 23:54:09

【问题描述】：

几个月前我使用了 React，现在当我尝试使用该代码时，对 webpack 配置进行了一些更改，我遇到了错误。 我将 react-router 更改为 react-router-dom。 整个路线文件在这里 https://github.com/mstanielewicz/react-simple-boilerplate/blob/master/app/config/routes.js 我得到：

：应为字符串（对于 内置组件）或类/函数（用于复合组件） 但得到：未定义。您可能忘记从 定义它的文件。

我检查了几次代码，没有发现任何错误。组件和容器已正确定义和导出。

import React from 'react'
import 
  BrowserRouter as Router,
  Route,
  hashHistory,
  IndexRoute,
 from 'react-router-dom'
import  MainContainer, HomeContainer  from 'containers'

export default function getRoutes() 
  return (
    <Router history=hashHistory>
        <Router path='/' component=MainContainer >
          <IndexRoute component=HomeContainer />
      </Router>
    </Router>
  )

目录结构是这样的

- app
  |_components
  |  |_Home
  |  |_index.js
  |_containers
     |_Main
     |_Home
     |_index.js

这样的出口

export MainContainer from './Main/MainContainer'
export HomeContainer from './Home/HomeContainer'

和 webpack 配置文件

var path = require('path')
var htmlWebpackPlugin = require('html-webpack-plugin')

var HtmlWebpackPluginConfig = new HtmlWebpackPlugin(
  template: path.join(__dirname, 'app/index.html'),
  filename: 'index.html',
  inject: 'body',
)

module.exports = 
  devtool: 'cheap-module-inline-source-map',
  entry: [
    './app/index.js',
  ],
  output: 
    path: path.join(__dirname, 'dist'),
    filename: 'index_bundle.js',
  ,
  module: 
    rules: [
      
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      ,
      
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      ,
    ],
  ,
  resolve: 
    modules: [
      path.join(__dirname, 'app'),
      'node_modules',
    ],
  ,
  plugins: [HtmlWebpackPluginConfig],

任何人都可以在这里看到问题吗？

【问题讨论】：

请在问题本身中包含相关代码。

【参考方案1】：

对我来说似乎是import 的问题。

在 react-router-dom 中，Router 被 BrowserRouter 替换。或者可能是坏的default export，比如

import BrowserRouter from 'react-router-dom

而不是

import  BrowserRouter  from 'react-router-dom'

---

编辑：

您的导出似乎有点奇怪。 尝试把import MainContainer, HomeContainer from 'containers'改成

import MainContainer from './containers/Main/MainContainer'
import HomeContainer from 'containers/Main/HomeContainer'

和export default class FooContainer 在各自的文件中。

还有一个事实是，您在 Router 中使用了 Router。不应该是 Route 吗？