New to Webpack 5 and Encountering Issues setting up react project

[knightswatch3]

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
| import {render} from "react-dom";
|
> render(<App/>, document.getElementById("root"));

I am making sure I am using the right loaders and mentioned the jsx? in my test clause for the webpack modules. But things seem to remain same. Any help please ?

[sokra]

Since you are using JSX, which is an non-standard javascript extension, you need something to convert that to javascript so that browsers understand it.

It seems like you are trying to configure a loader for that, but

currently no loaders are configured

None of the rules apply to that file. There is something wrong with your test or include/exclude

[anshumanv]

yes, in that case webpack will pick it up by default

[knightswatch3]

Thanks @anshumanv for helping me out. I was stuck with this for a while. And there is a related issue which I am now able to figure out what caused it.

[sokra]

But I am building the project before starting to serve. Am I understanding this incorrectly ?

Yes. You don't need to make a dev build before serving.

[alexander-akait]

Try to remove:

exclude: /node_modules/,
include: APP_DIR,

And check you have @babel/preset-react in babel configuration

[sokra]

This is not related to the babel config. The error message says: currently no loaders are configured to process this file.
This means babel is not even running yet.

What's the value of APP_DIR? Is the processed file inside of this directory?