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.
Чтобы быть точным c, эта проблема возникает только тогда, когда я использую material-ui и импортирую любой из его компонентов. Я не могу предоставить конкретные c шагов для воспроизведения этого, так как это похоже на конфигурацию webpack или конфигурацию babel, а это очень общий c. Кроме того, есть множество других, кто уже сталкивался с этой проблемой, и я пробовал много решений безуспешно. Вот почему я решил, что, возможно, сообщество по переполнению стека может пролить свет.
Итак, во-первых, я на 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'. Итак, импорт 1-го и 2-го уровня. 3-й уровень уже не в порядке. Без успеха! Обратите внимание: удаление 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)
}
}