Webpack resolve compiles, but errors in the browser

Question

I am new to using webpack, I tried to use resolve so that I do not have to type .js or .jsx but I keep getting an error. Everything compiles fine, but I get an error on the browser.

Webpack file after this paragraph

I added resolve to my webpack.config and it was fine. Webpack compiled and everything is gravy, until I load the browser, where I get the same error if I did not have this line except in the browser. I can take out the resolve statement and get the same error on my terminal.

Gist of it is this:

import in my my module

import AppBar from './components/AppBar';

my resolve statement

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.jsx']
  },
 ...

Which gives the following error:

ERROR in ./app/main.jsx
Module not found: Error: Can't resolve './components/AppBar' in 
'/Users/auser/dev/project/app'

This my full webpack.config :

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './app/index.jsx'
  },
  devtool: 'source-map',
  devServer: {
    contentBase: './dist',
    hot: true
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module:{
    rules: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            query: {
              // If you set something here, also set it in .babelrc
              presets: ['es2016', 'react'],
              plugins: ['transform-class-properties']
          }
        }
      }
    ]
},
plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Hot Module Replacement',
      template: './app/index-template.html'
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
],
output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Directory Structure:

├── Makefile
├── app
│   ├── components
│   │   ├── AppBar.jsx
│   │   ├── Content.jsx
│   │   ├── SideBar.jsx
│   │   └── Table.jsx
│   ├── index-template.html
│   ├── index.jsx
│   ├── main.jsx
│   ├── print.js
│   └── utils
│       └── data-formatter.js
├── config.pyc
├── dist
│   ├── app.bundle.js
│   ├── app.bundle.js.map
│   └── index.html
├── npm-debug.log
├── package.json
└── webpack.config.js

Answer 1

there is an error with your webpack config or the one you posted (the format is wrong). The module of the babel-loader should be an object with arrays, I can't see where yours begins :(, possible syntax error. The correct format should be something like this :

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './app/index.jsx'
  },
  devtool: 'source-map',
  devServer: {
    contentBase: './dist',
    hot: true
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module:{
    rules:[
    {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            options: {
              // If you set something here, also set it in .babelrc
              presets: ['es2016', 'react'],
              plugins: ['transform-class-properties']
          }
        }
      }
    ]
}, ......
The rest goes below here

Link to docs if you need any more help https://github.com/babel/babel-loader