Output filename not configured Error in Webpack

I was getting the same error and it turned out to be my webpack config file name.

I had it as “webpack.config” instead of “webpack.config.js“

The “Output filename not configured” error seems to come up generally when there is a typo somewhere, and I’ve found the file name to be a sneaky place you forget to check.

Also double-check that the webpack.config.js file is in the right spot (in general, the root directory of the project) and the paths listed in the config file are correct.

Common mistakes of this error is typo and most of the times it’s writing
module.export instead of module.exports.
Also check the file name should be with a .js extension. e.g. webpack.config.js

You MUST have a file named webpack.config.js on project root.

You have a typo somewhere in your webpack.config.js file. Review your config file. Had similar problem and it was as a result of a typo.

Try exporting your configuration using module.exports = config where config is your configuration in a JavaScript object. In your case just do

module.exports = {
  output: {
    filename: 'bundle.js',
    library: 'require',
    libraryTarget: 'this'
  }
}

If this does not solve your problems, refer to the issue on https://github.com/webpack/webpack/issues/2403

This error will also occur if you are running the command ‘webpack -w’ against a directory that does not have a webpack config file.

So if you are opening a new terminal window or tab and haven’t changed directory to the root of your project before running the webpack command you will receive the error.

I ran into this problem after following Webpacks docs for production builds. The way I ran into the issue is, I believe, specific to webpack-merge.

This is what their docs have in webpack.dev.js:

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  }
});

But this is what I needed to have:

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common(), {
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  }
});

Notice the only change is running common() instead of common.

If you using __dirname make sure it referenced to correct path. Default path is / which is local drive root.

I had a similar error and managed to resolve it. The core of the issue was not in fact in the webpack.config.js code, but rather in my entry js file (in my case main.js). Ensure that you have the correct requires and render code. My example code is as follows:

var React = require('react');
var ReactDOM = require('react-dom');

var Main = React.createClass({
  render: function() {
    return (
      <div>
         <h1>Hello World, lets see how you React..</h1>
      </div>
    );
  },
});

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

Following are the things to check when you get this error.

• Whether your executing webpack command in the directory where
  your webpack.config.js file resides.
• You may be pointing to the wrong directory in your terminal.
• Typo error with the file name “webpack.config.js”.
• No Module to export in your config file.
• Check for typo error in your config file

1. create a file @ root directory webpack.config.js
2. paste below code in this file

module.exports = {
  entry: "./app.js",
  output: {
    filename: "bundle.js"
  }, 
  watch: true
}

3. app.js should also in root directory. write below line in app.js file:

document.write('welcome to react v2 app');

REF. https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460#.a64eeonhn

just to post my solution. Might help someone.

if you get this error, it always has to do with some typo error. In my case I had forgotten to close the last } with a semicolon at the end, like this: };

module.exports = {
    entry: './index.js',
    output: {
        filename:'bundle.js'
    }
};

This worked.

I came across this error when there is a spelling mistake the config details.

output: {
    path: "app/dist/assets",
    filname: "bundle.js",
    publicPath: "assets"
},

mispelled “filename”. on correcting the spelling, this issue is resolved

also after checking the right file name which should be ‘webpack.config.js’, a good note is to check where the ‘webpack.config.js’ file is located. it should be in the same folder as your package.json file is located

Assuming that you would be using windows. i ran out into same error and realized i have to do something like this in wiindows
d:\unpack-webpack> d:\unpack-webpack\node_modules.bin\webpack

instead i was doing
d:\unpack-webpack\node_modules.bin\webpack

Hope this helps 🙂
Thanks
Gaurav Khurana

Make sure that webpack.config is in the proper place in the tree. Actually mine was in the proper place but I had to delete the whole file and then replace because the first time I ran web pack in terminal I had missed an underscore for __dirname. Instead of two, I had one. So I ran it with that fixed that a couple times trying this or that and came across this post. So I started over and even though in the same place for some reason it wasn’t according to webpack.