ReactJS functional component render error

Question

I use functional component like const Component = (props) => <div>asdasdasd</div> . I don't understand why it brokes... I have this error in console when i render my app:

This is source code:

 import React from 'react' import PropTypes from 'prop-types' import withStyles from 'react-jss' import classNames from 'classnames' const Words = ({type, classes, children}) => { switch (type) { case 'h1': return <h1 className={classNames(classes.h1, classes.resetMargins)}>{children}</h1> case 'h2': return <h2 className={classNames(classes.h2, classes.resetMargins)}>{children}</h2> case 'h3': return <h3 className={classNames(classes.h3, classes.resetMargins)}>{children}</h3> case 'h4': return <h4 className={classNames(classes.h4, classes.resetMargins)}>{children}</h4> case 'h5': return <h5 className={classNames(classes.h5, classes.resetMargins)}>{children}</h5> case 'h6': return <h6 className={classNames(classes.h6, classes.resetMargins)}>{children}</h6> case 'paragraph': return <p className={classNames(classes.p, classes.resetMargins)}>{children}</p> default: return <p className={classNames(classes.p, classes.resetMargins)}>{children}</p> } } const styles = (theme) => ({ resetMargins: { margin: 0, padding: 0 }, h1: { fontSize: theme.fontSize.h1, marginBottom: 30 }, h2: { fontSize: theme.fontSize.h2, marginBottom: 30 }, h3: { fontSize: theme.fontSize.h3, marginBottom: 20 }, h4: { fontSize: theme.fontSize.h4, marginBottom: 20 }, h5: { fontSize: theme.fontSize.h5, marginBottom: 20 }, h6: { fontSize: theme.fontSize.h6, marginBottom: 20 }, p: { fontSize: theme.fontSize.paragraph, marginBottom: 20 } }) Words.propTypes = { type: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'paragraph']) } export default withStyles(styles)(Words) 

And i import it like import Words from './words/Words.js'

and use like: <Words type='paragraph'>asd321</Words>

What i do wrong? Because in webpack i have this:

Without this component all works fine. Components witch maded by class works good, no errors, but with functional component i have an error

WEBPACK.CONFIG:

 const path = require('path') const webpack = require('webpack') const HtmlWebPackPlugin = require("html-webpack-plugin"); module.exports = { entry: { app: ['@babel/polyfill', './src/index.js'] }, module: { rules: [ { test: /\\.css?$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, ] }, { test: /\\.(js|jsx)?$/, exclude: /node_modules/, use: ['react-hot-loader/webpack'], }, { test: /\\.(js|jsx)$/, exclude: /node_modules/, include: path.join(__dirname, 'src'), loader: require.resolve('babel-loader'), }, { test: /\\.(js|jsx)$/, loader: 'prettier-loader', exclude: /node_modules/, options: require('./prettier.config') }, { test: /\\.(jpe?g|png|gif)$/, use: [{ loader: 'url-loader', options: { limit: 10000 } }] }, { test: /\\.(eot|svg|ttf|woff2?|otf)$/, use: 'file-loader' } ] }, resolve: { extensions: ['*', '.js', '.jsx', '.css'], alias: { '@components': path.resolve(__dirname, './src/components'), '@common': path.resolve(__dirname, './src/common'), '@containers': path.resolve(__dirname,'./src/containers'), '@routes': path.resolve(__dirname, './src/routes'), '@styleguide': path.resolve(__dirname, './styleguide'), '@assets': path.resolve(__dirname, './src/assets') } }, output: { path: path.resolve(__dirname, 'target'), filename: '[name].js' }, plugins: [ new webpack.ProvidePlugin({ R: 'ramda' }), new HtmlWebPackPlugin({ filename: "index.html", template: "public/index.html" }), ], devServer: { contentBase: path.join(__dirname, './target'), port: 3131 } } 

.babelrc

 { "presets": [ [ "@babel/preset-env", { "useBuiltIns": "usage", "debug": true } ], "@babel/preset-react" ], "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-object-rest-spread", "@babel/plugin-transform-react-jsx", "@babel/plugin-syntax-dynamic-import", "@babel/plugin-transform-arrow-functions", "react-hot-loader/babel" ] } 

Answer 1

I'm SOrry. I found soulution. It was in webpack/babel-loader. Because i include src directory and my Word component was outside src