Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: null. Check the render method of TransitionGroup.
具体来说，这个问题只在我使用material-ui并导入它的任何组件时发生。我不能提供具体的步骤来重现这一点，因为它似乎是一个webpack配置或babel配置，这是一个非常通用的。此外，还有一群其他人谁经历了这个问题已经和我已经尝试了许多解决方案没有成功。这就是为什么我决定也许堆栈溢出社区可以提供一些帮助。
所以首先，我100%准确地认为问题是使用了@material-ui。在我的项目中，我试着像这样导入一个Button
import Button from '@material-ui/core/Button'
使用它就像：

<Button
        onClick={()=>{}}
        size='small'
        variant='outlined'
        color='secondary'
        className='primary-button'>
 This is a Button
</Button>

另外，我已经尝试了不同的导入，如import { Button } from '@material-ui/core'。第一级和第二级进口。第三层已经不行了。没有成功！只需注意，删除Button将100%工作。所以我猜这可能是babel或webpack的配置问题。所以我到处玩和研究了很多，但仍然没有成功！
这是我当前的webpack.config

/**
 * COMMON WEBPACK CONFIGURATION
 */

const path = require('path')
const webpack = require('webpack')
const LoadableWebpackPlugin = require('@loadable/webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const merge = require('webpack-merge')

module.exports = options => (merge.smart({
  bail: true,
  output: {
    path: path.resolve(process.cwd(), 'build'),
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.(eot|otf|ttf|woff|woff2)$/,
        use: 'file-loader'
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              // Inline files smaller than 10 kB
              limit: 10 * 1024,
              noquotes: true
            }
          }
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // Inline files smaller than 10 kB
              limit: 10 * 1024
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                enabled: false
                // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
                // Try enabling it in your environment by switching the config to:
                // enabled: true,
                // progressive: true,
              },
              gifsicle: {
                interlaced: false
              },
              optipng: {
                optimizationLevel: 7
              },
              pngquant: {
                quality: '65-90',
                speed: 4
              }
            }
          }
        ]
      },
      {
        test: /\.(mp4|webm)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(['build'], {
      root: process.cwd(),
      verbose: true,
      dry: false
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new LoadableWebpackPlugin({ writeToDisk: true })
  ],
  resolve: {
    modules: [
      path.join(process.cwd(), 'sass'),
      path.join(process.cwd(), 'node_modules'),
      path.join(process.cwd(), 'src')
    ],
    extensions: ['.json', '.js']
  },
  target: 'web' // Make web variables accessible to webpack, e.g. window
}, options))

这是我现在的babel.config.js

function isWebTarget(caller) {
  return Boolean(caller && caller.target === 'web')
}

module.exports = (api) => {
  const web = api.caller(isWebTarget)
  return {
    presets: [
      [
        '@babel/preset-env',
        {
          loose: true,
          targets: !web ? { node: 'current' } : {
            esmodules: true
          },
          modules: 'commonjs'
        }
      ],
      '@babel/preset-react'
    ],
    plugins: [
      '@babel/plugin-syntax-dynamic-import',
      '@babel/plugin-proposal-function-bind',
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }],
      ['babel-plugin-import', {
        libraryName: '@material-ui/core'
      }, 'core'],
      ['babel-plugin-import', {
        libraryName: '@material-ui/icons'
      }, 'icons'],
      [
        'transform-imports',
        {
          '@material-ui/core': {
            // Use "transform: '@material-ui/core/${member}'," if your bundler does not support ES modules
            'transform': '@material-ui/core/${member}',
            'preventFullImport': true
          },
          '@material-ui/icons': {
            // Use "transform: '@material-ui/icons/${member}'," if your bundler does not support ES modules
            'transform': '@material-ui/icons/${member}',
            'preventFullImport': true
          }
        }
      ],
      '@babel/plugin-transform-async-to-generator',
      '@babel/plugin-proposal-object-rest-spread',
      '@loadable/babel-plugin',
      web && 'react-hot-loader/babel'
    ].filter(Boolean)
  }
}