0

I know this is a common question for webpack; it's really hard to debug something if it won't give you any information about the cause or location of the error.

I'm getting the error:

Error: 'output.filename' is required, either in config file or as --output-filename

I know it has to do with a syntax error somewhere, but I'm too new to webpack to figure it out.

Here's my config file. It's called "webpack.config.js" in the root folder (i.e. the folder in which I initially ran: npm init).

const webpack = require('webpack');
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const RewriteImportPlugin = require("less-plugin-rewrite-import");

const root_dir = path.resolve(__dirname)
const src_dir = path.resolve(__dirname, "webpack_src")
const build_dir = path.resolve(__dirname, "webpack_bin")
const node_mod_dir = path.resolve(__dirname, 'node_modules');
const extractLESS = new ExtractTextPlugin('style.css');

const config = {
  entry: {
    index: path.resolve(src_dir, 'index.js')
  },
  output: {
    path: build_dir,
    filename: 'bundle.js'
  },
  resolve: {
    modules: [root_dir, 'node_modules'],
  },
  module: {
    rules: [
      {
        loader: 'babel-loader',
        test: /\.(js)$/
      },
      {
        use: extractLESS.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            {
              loader: 'less-loader',
              options: {
                paths: [root_dir, node_mod_dir],
                plugins: [
                  new RewriteImportPlugin({
                    paths: {
                      '../../theme.config': __dirname + '/semantic_ui/theme.config',
                    }
                  })
                ]
              }
            }]
        }),
        test: /\.less$/
      },
      {
        use: ['file-loader'],
        test: /\.(png|jpg|gif|woff|svg|eot|ttf|woff2)$/
      },
    ]
  },
  plugins: [
    extractLESS,
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};

module.exports = {
  config
};
Michael Jungo
  • 31,583
  • 3
  • 91
  • 84
twils0
  • 2,431
  • 2
  • 12
  • 24

1 Answers1

1

You're exporting module.exports = { config }, which means that you are exporting an object with one property, namely config, but webpack expects the object to be your entire config. Webpack requires output.filename, whereas you only provide config.output.filename.

The export should be your config:

module.exports = config;
Michael Jungo
  • 31,583
  • 3
  • 91
  • 84
  • That's it! I had seen another thread with a lot of similar syntactical suggestions, but none of them mentioned the bracket issue. – twils0 Jul 30 '17 at 14:45
  • I (incorrectly) though either way was acceptable - with brackets or without. Also, if anyone wants a non-Frankenstein (I've already corrected a few more things from my snippet above) example of how to implement semantic-ui-react with semantic-ui-less themes, I would use this blog, which links to git examples: [neekey](http://neekey.net/2016/12/09/integrate-react-webpack-with-semantic-ui-and-theming/) – twils0 Jul 30 '17 at 14:52