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

How does your directory tree look like?

Oro
– Oro

2018-01-21 10:15:34 +00:00
Commented Jan 21, 2018 at 10:15 — Oro
– Oro, Commented Jan 21, 2018 at 10:15
I added the directory structure to the post

eignhpants
– eignhpants

2018-01-21 15:38:12 +00:00
Commented Jan 21, 2018 at 15:38 — eignhpants
– eignhpants, Commented Jan 21, 2018 at 15:38

ben_fluleck · Accepted Answer · 2018-01-21 16:41:57Z

2

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

edited Jan 21, 2018 at 16:41

answered Jan 21, 2018 at 11:37

ben_fluleck

542 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

eignhpants Over a year ago

Yea I copy/pasted this wrong so there should be a line rules: [ right below module. I updated it above. When I change to your above structure i get configuration.module has an unknown property 'loader

ben_fluleck Over a year ago

if that is the case then it is something else I will have another look please change it back to rules as loader has been deprecated

ben_fluleck Over a year ago

is there any way you can give me a link to the repo so I can simulate the config

eignhpants Over a year ago

I was able to get it working. There was a disparity in webpack version in the guide I was using and my installed version. When I changed my rules: to loaders it was fixed. I will mark your answer as correct as it was a syntax problem.

Collectives™ on Stack Overflow

Webpack resolve compiles, but errors in the browser

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related