JSX is not transpiled in babel-loader when babel/preset-react is specified in .babelrc

i really tried to find the problem before posting here but i couldn't, i hope you can help me

i'm using **Babel** and **webpack** in React project and i'm getting this ERROR message

:

```
zacnnnt@zacnnnt:~/projects/VenvDjango/django-react-Tuto/project$ npm run dev

ERROR in ./project/frontend/src/components/App.js 8:2
Module parse failed: Unexpected token (8:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const App = () => (
|
> } />
| );
| const wrapper = document.getElementById("app");
@ ./project/frontend/src/index.js 1:0-35
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! django-react-Tuto@1.0.0 dev: `webpack --mode development ./project/frontend/src/index.js --output ./project/frontend/static/frontend/main.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the django-react-Tuto@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/zacnnnt/.npm/_logs/2019-11-20T21_04_44_609Z-debug.log
```

**App.js**

```import React from "react";
import ReactDOM from "react-dom";
import DataProvider from "./DataProvider";
import Table from "./Table";

const App = () => (

} />
);
const wrapper = document.getElementById("app");
wrapper ? ReactDOM.render(, wrapper) : null;
```

**DataProvider.js**
```
import PropTypes from "prop-types";
class DataProvider extends Component {

static propTypes = {
endpoint: PropTypes.string.isRequired,
render: PropTypes.func.isRequired
}

state = {
data: [],
loaded: false,
placeholder: "Loading..."
}

componentDidMount() {
fetch(this.props.endpoint)
.then(response => {
if (response.status !== 200) {
return this.setState({ placeholder: "Something went wrong" });
}
return response.json();
})
.then(data => this.setState({ data: data, loaded: true }));
}

render() {
const { data, loaded, placeholder } = this.state;
return loaded ? this.props.render(data) :

{placeholder}

;
}
}

export default DataProvider;
```

Start with the webpack command, the .babelrc referenced in the title, and the JSX entry point in App.js; compare how that file is routed through babel-loader. Reproduce the failure with npm run dev and check the related DataProvider.js usage. Done means the JSX parses and the command completes without the loader error.

Written by the indexing model from the issue text.