How is the equivalent of 'module.exports = {};' in es6 for postcss.config.js?

I am using postcss loader in webapck2. The loader expects a config file postcss.config.js. I do not need any option. This issue comment (https://github.com/akveo/ng2-admin/issues/604#issuecomment-271974780) suggests I can simply put this in postcss.config.js

module.exports = {};

However when I run webpack (webpack -p --config webpack.config.js), I got these error message

ERROR in ./~/postcss-loader!./~/css-loader?{"modules":true}!./~/less-loader!./app/scripts/components/forms/form.less
Module build failed: Unknown word (1:1)

> 1 | exports = module.exports = require("../../../../node_modules/css-loader/lib/css-base.js")();
    | ^
  2 | // imports
  3 |

I think it is because my babel loader also applies to all files with .js extension and module.exports = {}; is probably not translated well by babel.

What is the right syntax in es6 to define empty module export?

If I just commented out the line, I got the same error.

If I left the file blank, then postcss complaints about missing config file:

ERROR in ./~/postcss-loader!./~/css-loader?{"modules":true}!./~/less-loader!./app/scripts/components/forms/form.less
Module build failed: Error: No PostCSS Config found in: /Users/antkong/dev/project/app/scripts/components/forms
    at Error (native)
    at /Users/antkong/dev/project/node_modules/postcss-load-config/index.js:51:26

I am using postcss-loader 1.1.0 and webpack 2.3.3

Solution

The issue is not the config, and you wouldn't be able to use ES modules unless you transpiled the config first.

You apply the postcss-loader after the css-loader, which generated JavaScript and that is not valid CSS, but that's what postcss-loader expects. The postcss-loader should be between the css-loader and the less-loader.

Your .less rule would look like this:

{
  test: /\.less$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true
      }
    },
    'postcss-loader',
    'less-loader'
  ]
}

Or if you're using extract-text-webpack-plugin:

{
  test: /\.less$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {
          modules: true
        }
      },
      'postcss-loader',
      'less-loader'
    ]
  })
}