Cragmorton
Cragmorton

Reputation: 153

Uncaught Error: Element type is invalid

I used React few month ago, now when I tried to use that code, made some changes in webpack config I'm getting errors. I changed react-router to react-router-dom. Whole routes file is here https://github.com/mstanielewicz/react-simple-boilerplate/blob/master/app/config/routes.js I'm getting:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

I went through the code a few time and don't see any errors. Components and Containers are defined and exported correctly.

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>
  )
}

Directory structure looks like this

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

with exports like this

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

And webpack cfg

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],
}

Anyone can see a problem here?

Upvotes: 1

Views: 3009

Answers (1)

Victor Baron
Victor Baron

Reputation: 177

Seems like a problem of import to me.

In react-router-dom, Router as been replaced by BrowserRouter. Or may be a bad default export, for example

import BrowserRouter from 'react-router-dom

instead of

import { BrowserRouter } from 'react-router-dom'

EDIT :

Your exports seems a bit weird. Try to change import { MainContainer, HomeContainer } from 'containers' into

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

and export default class FooContainer in the respective files.

There is also the fact you're using a Router inside a Router. Shouldn't it be a Route ?

Upvotes: 2

Related Questions