I'm starting to create my application, so I implemented the project configuration using webpack.
The project structure is:

node_modules

public

|----bundle.js

|----index.html

src

|----app.jsx

|----index.jsx

|----components

     |-----appBar.jsx

webpack.config.jsx:

const path = require('path');



module.exports = {

    mode: 'development',

    entry: path.resolve(__dirname, 'src/index.jsx'),

    output: {

        path: path.resolve(__dirname, 'public'),

        filename: 'bundle.js'

    },

    module: {

        rules: [

            {

                test: /.jsx$/,

                exclude: /node_modules/,

                loader: 'babel-loader',

            }

        ]

    },

    devServer: {

        contentBase: path.join(__dirname, 'public'),

        compress: true,

        port: 9000

    }

}

app.jsx:

import ButtonAppBar  from './components/appBar';

import React from 'react';





class App extends React.Component {

    render(){

        return (

            <div>

                <ButtonAppBar />

            </div>

        )

    }

};



export default App;

index.html:

import React from 'react'

import ReactDOM from 'react-dom'

import App from './app'





ReactDOM.render(<App />, document.getElementById('app'));

package.json:

    dependencies: {

    @material-ui/core: ^1.5.1,

    react: ^16.4.2,

    react-dom: ^16.4.2

  },

  devDependencies: {

    babel-core: ^6.26.3,

    babel-loader: ^7.1.5,

    babel-preset-env: ^1.7.0,

    babel-preset-react: ^6.24.1,

    webpack: ^4.17.0,

    webpack-cli: ^3.1.0,

    webpack-dev-server: ^3.1.5

  }

I run this instruction:

webpack --display-error-details

I got this error:

ERROR in ./src/index.jsx

Module not found: Error: Can't resolve './app' in '/home/user/Desktop/my_app/src'

resolve './app' in '/home/user/Desktop/my_app/src'

  using description file: /home/user/Desktop/my_app/package.json (relative path: ./src)

    Field 'browser' doesn't contain a valid alias configuration

    using description file: /home/user/Desktop/my_app/package.json (relative path: ./src/app)

      no extension

        Field 'browser' doesn't contain a valid alias configuration

        /home/user/Desktop/my_app/src/app doesn't exist

      .wasm

        Field 'browser' doesn't contain a valid alias configuration

        /home/user/Desktop/my_app/src/app.wasm doesn't exist

      .mjs

        Field 'browser' doesn't contain a valid alias configuration

        /home/user/Desktop/my_app/src/app.mjs doesn't exist

      .js

        Field 'browser' doesn't contain a valid alias configuration

        /home/user/Desktop/my_app/src/app.js doesn't exist

      .json

        Field 'browser' doesn't contain a valid alias configuration

        /home/user/Desktop/my_app/src/app.json doesn't exist

      as directory

        /home/user/Desktop/my_app/src/app doesn't exist

[/home/user/Desktop/my_app/src/app]

[/home/user/Desktop/my_app/src/app.wasm]

[/home/user/Desktop/my_app/src/app.mjs]

[/home/user/Desktop/my_app/src/app.js]

[/home/user/Desktop/my_app/src/app.json]

 @ ./src/index.jsx 11:11-27

I found similar questions such as webpack: Module not found: Error: Can't resolve (with relative path) and Webpack 4 : ERROR in Entry module not found: Error: Can't resolve './src'