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.
To be very specific, this issue only occurs when I use material-ui and import any of it's component. I can't provide specific steps to reproduce this as it seems to be a webpack config or a babel config and this is a very generic one. Also, there are bunch of others who experienced this issue already and I've tried many solutions with no success. That's why I decided that maybe the stack overflow community can shed some light.
So first, I'm 100% accurate that the issue is using @material-ui. In my project I tried importing just a Button like so
import Button from '@material-ui/core/Button'
And using it like:
<Button
onClick={()=>{}}
size='small'
variant='outlined'
color='secondary'
className='primary-button'>
This is a Button
</Button>
Also I already tried different imports like import { Button } from '@material-ui/core'. So 1st level and 2nd level imports. 3rd level is already not Ok. With NO success! Just a note, removing the Button will work 100%. So I'm guessing that this could be a config issue either from babel or webpack. So I played around and research a lot, But no success still!
Here is my current 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))
And here is my current 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)
}
}
I was able to fix this on webpack.config
So for other's that might encounter the same issue, in my webpack.config
From:
resolve: {
modules: [
path.join(process.cwd(), 'sass'),
path.join(process.cwd(), 'node_modules'),
path.join(process.cwd(), 'src')
]
}
To:
resolve: {
modules: [
path.join(process.cwd(), 'sass'),
'node_modules',
path.join(process.cwd(), 'src')
]
}
Notice the part on the node_modules you only need to remove path.join or any path resolution. I have been banging my head on this over the weekend and all I need is to change one line. (Typical Developer's life). By the way, it's not even this issue that points me to this solution. So things like can't resolve dom-helpers and other Multiple library versions conflict with submodules, you need to check your webpack module resolution if your using webpack.